Component development using AEM Agent Skills
Learn how to develop an AEM component using AEM Agent Skills as part of AI-assisted development.
In this walkthrough, you use natural language in an AI-powered IDE (for example, Cursor) to develop a Promo Banner component in the WKND Sites Project. The coding agent applies the create-component AEM Agent Skill to generate the implementation.
Prérequis
Pour suivre ce tutoriel, vous avez besoin des éléments suivants :
- Un IDE optimisé par l’IA tel que Cursor ou Visual Studio Code avec Copilote GitHub.
- A local clone of the WKND Sites Project, built and deployed to a local AEM SDK instance.
- AEM Agent Skills installed in that project. If you have not done that yet, complete Setup AEM Agent Skills.
Component requirement
Let's assume the WKND team wants to display a promo banner on the home page, and the design reference is as follows:
Authors must be able to set Promo label, CTA label, and CTA link fields in the component dialog.
The design reference is a screenshot obtained via wireframe, mockup or static markup capture.
Develop the component
-
Open the WKND project in your IDE. Confirm that AEM Agent Skills are present (for example, under
.agents/skills), then start a new agent chat.
-
Enter a prompt like the following. Attach the component design screenshot (obtained via wireframe, mockup or static markup capture) if your IDE supports images in chat:
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 -
L’agent de codage utilise les compétences
create-componentde l’agent AEM pour générer le composant. Examinez le HTL proposé, le modèle Sling, le code XML de boîte de dialogue et les fichiers associés.
create-component prend en charge l’intégration de conception Figma-
Déployez le composant sur l’instance AEM/SDK locale.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
Lors de la création, placez la bannière de promotion sur la page d’accueil et validez le comportement. Affinez l’implémentation si elle diverge toujours de la référence de conception.
-
Passez en revue le composant nouvellement créé en publiant la page ou en sélectionnant Afficher comme publié(e).
Félicitations. Vous avez créé un nouveau composant AEM à l’aide des compétences de l’agent AEM dans le cadre du développement assisté par l’IA.
Au-delà des composants simples
Cette procédure pas à pas utilise un composant simple. La même compétence create-component prend également en charge des cas plus complexes, notamment :
- Champs de champs multiples et de boîtes de dialogue imbriquées
- Extensions des composants principaux d’AEM (y compris les modèles Sling Resource Merger)
- Les URL de fichier ou de cadre Figma pour la mise en page et le style, lorsque le serveur MCP Figma (par exemple
plugin-figma-figma) est activé dans votre IDE
Pour connaître les types de champ, les modèles de boîte de dialogue, les règles Figma et des exemples, lisez-les SKILL.md dans votre dossier de compétences installé, par exemple .agents/skills/create-component/SKILL.md.
Pour obtenir une présentation, les chemins d’installation par IDE et la résolution des problèmes, consultez Agent de développement de composants AEM dans le référentiel des compétences Adobe.
AGENTS.md
Avant de conclure, voyons comment le fichier AGENTS.md a été généré lors de la création du composant.
Pour les projets AEM as a Cloud Service, la compétence d’amorçage ensure-agents-md (sélectionnée pendant Configurer les compétences de l’agent AEM) crée des AGENTS.md à la racine du référentiel lorsqu’elle est manquante. Il utilise ce qu’il apprend de la disposition de votre projet.
Il ne remplace pas un fichier AGENTS.md existant.
