AEM Agent Skillsを使用したコンポーネント開発
AEM Agent SkillsをAI支援の開発の一部として使用して、AEM コンポーネントを開発する方法を説明します。
このチュートリアルでは、AIを活用したIDE （カーソルなど）で自然言語を使用して、WKND サイトプロジェクト でプロモーションバナー コンポーネントを開発します。 コーディングエージェントは、create-component AEM エージェントスキルを適用して実装を生成します。
前提条件
このチュートリアルに従うには、次の操作が必要です。
- カーソルやGitHub Copilot機能を備えたVisual Studio CodeなどのAIを活用したIDE。
- WKND Sites プロジェクト のローカルクローンがビルドされ、ローカル AEM SDK インスタンスにデプロイされました。
- そのプロジェクトに AEM Agent Skills がインストールされています。 まだ実行していない場合は、AEM エージェントスキルの設定を完了してください。
コンポーネント要件
WKND チームがホームページにプロモーションバナーを表示する場合、デザイン参照は次のようになります。
作成者は、コンポーネントダイアログでプロモーションラベル、CTAラベル、CTAリンクのフィールドを設定できる必要があります。
デザイン参照は、ワイヤーフレーム、モックアップ、または静的マークアップキャプチャを介して取得されたスクリーンショットです。
コンポーネントの開発
-
IDEでWKND プロジェクトを開きます。 AEM エージェントスキルが存在することを確認し（例：
.agents/skills）、新しいエージェントチャットを開始します。
-
次のようなプロンプトを入力します。 IDEがチャットで画像をサポートしている場合は、コンポーネントデザインのスクリーンショット（ワイヤーフレーム、モックアップ、または静的マークアップキャプチャを介して取得）を添付します。
code language-text Create a WKND Promo Banner Component. Please see attached screenshot for design reference. Dialog specification are: 1. Promo Label - Textfield, required 2. CTA Text - Textfield, required 3. CTA Link - Pathfield, required -
コーディングエージェントは、
create-componentAEM エージェントスキルを使用してコンポーネントを生成します。 提案されたHTL、Sling モデル、ダイアログ XMLおよび関連ファイルを確認します。
create-component スキルはFigma デザイン統合をサポートしています-
コンポーネントをローカルのAEM インスタンス/SDKにデプロイします。
code language-shell $ mvn clean install -PautoInstallSinglePackage -
オーサリングでは、ホームページにプロモーションバナーを配置して、動作を検証します。 デザイン参照と異なる場合は、実装を調整します。
-
ページまたは「公開済みとして表示」を公開して、新しく作成したコンポーネントを確認します。
おめでとうございます。 AIを活用した開発の一環として、AEM Agent Skillsを使用して新しいAEM コンポーネントを正常に作成しました。
単純なコンポーネントから脱却
このチュートリアルでは、シンプルなコンポーネントを使用します。 同じcreate-component スキルは、次のような豊富なケースもサポートしています。
- マルチフィールドとネストされたダイアログフィールド
- AEM コアコンポーネント拡張機能（Sling Resource Merger パターンを含む）
- Figma MCP サーバー（例：
plugin-figma-figma）がIDEで有効になっている場合、レイアウトとスタイル設定のためのFigma ファイルまたはフレーム URL
フィールドタイプ、ダイアログパターン、Figma ルールおよび例については、インストール済みのスキルフォルダー（例：.agents/skills/create-component/SKILL.md）のSKILL.mdをお読みください。
概要、IDEによるインストールパス、およびトラブルシューティングについては、Adobe Skills リポジトリのAEM Component Development Agentを参照してください。
AGENTS.md
最後に、コンポーネントの作成の一環としてAGENTS.mdがどのように生成されたかを説明します。
AEM as a Cloud Service プロジェクトの場合、ensure-agents-md ブートストラップスキル（AEM Agent Skillsの設定中に選択）は、環境にない場合に、リポジトリルートにAGENTS.mdを作成します。 プロジェクトレイアウトから学んだものを使用します。
既存のAGENTS.md ファイルを not が上書きします。
