/create-component

name: create-component
description: |
  Creates complete AEM components with dialog, HTL template, Sling Model, unit tests, and clientlibs.
  Supports extending Core Components and project components. When a Figma design URL is provided,
  fetches the design via Figma MCP (get_design_context) and translates it into pixel-perfect HTL, CSS,
  and JS. Follows Adobe Experience League best practices for AEM Cloud Service and 6.5.
  Use this skill whenever the user mentions creating, building, generating, or scaffolding an AEM
  component, or mentions component types like teaser, card, hero, banner, accordion, tabs, carousel,
  list, navigation, breadcrumb, or any custom AEM component. Also trigger when the user wants to
  extend a Core Component, create a component dialog, add a Sling Model, or convert a Figma design
  into an AEM component.
compatibility: Requires AEM as a Cloud Service or AEM 6.5. Maven project structure with core, ui.apps modules. Figma design integration requires the `plugin-figma-figma` MCP server to be enabled in the IDE.
license: Apache-2.0
metadata:
  author: AEM Dev Agent
  version: "1.0"
  aem_version: "6.5/Cloud Service"

AEM Component Creation Skill

Creates complete AEM components following Adobe best practices.

Configuration Gate Check — Do This First

> This configuration check needs to happen first because without it, the skill will use incorrect project paths and package names, causing every generated file to be wrong.

**First tool call**: Read `.aem-skills-config.yaml` in the **project root** (same level as `pom.xml`).

**Check**: Does the file exist and does it have `configured: true`?

| Status | Action | | --- | --- | | File missing or configured: false | Stop and display the error message below. Do not explore the codebase or proceed — the config values are needed for correct file paths and naming. Wait for the user to configure. | | configured: true | Read project, package, and group values from the YAML file. Proceed with component creation. |

If NOT configured, Display This Message and Stop:

Project configuration required!

Before creating components, configure your project settings in:
`.aem-skills-config.yaml` (in your project root, same level as pom.xml)

Open the file and update:
- project: Your AEM project name (e.g., 'mysite', 'wknd')
- package: Your Java package (e.g., 'com.mysite.core')
- group: Your component group (e.g., 'MySite Components')
- configured: true

After updating, ask me to create the component again.

Why you should not explore the codebase when unconfigured:

Doing any of the following before configuration is set will lead to incorrect assumptions and wasted effort:

• Reading any other repository files
• Listing directories to "understand the project"
• Checking existing components for patterns
• Looking at pom.xml, Java files, or folder structures
• Inferring values from any source

The config file is the single source of truth for project values — skipping it leads to wrong paths and package names in every generated file.

No Hallucination Rule

Only create the exact fields the user specified — adding extra fields creates authoring confusion and maintenance burden, and renaming fields breaks content contracts.

**Load reference for full rules:** `references/no-hallucination-rules.md`

Workflow Overview

| Step | Action | | --- | --- | | 0 | Configuration validation (do this first — see above) | | 1 | Extract & validate component name | | 1.5 | Component extension decision (if extending) | | 2 | Gather requirements & confirm dialog specification | | 2.3 | Figma design fetch (if Figma URL provided) | | 3 | Create all component files | | 3.11 | Dependency verification (required for servlets) | | 4 | Completion summary |

Step 0: Configuration Validation

0.1 Read Configuration

1. Read `.aem-skills-config.yaml` from the project root 2. Check that `configured: true` 3. Read `project`, `package`, and `group` values

0.2 Validate — Use Only the Config File

Do not infer project values from the file system, existing components, Java files, pom.xml, or prior knowledge. These sources may be outdated or inconsistent — `.aem-skills-config.yaml` is the single source of truth because the user explicitly sets it.

0.3 Load Conventions

1. Read `references/aem-conventions.md` for file structure templates, naming conventions, and patterns

0.4 Project State Analysis (after configuration validated)

1. **Check Component Name Uniqueness** - Look in `/apps/[project]/components/` 2. **Check Model Class Conflicts** - Look in `core/src/main/java/[package-path]/models/` 3. **Analyze Existing Patterns** - Review 1-2 recent components for style reference

Step 1: Extract & Validate Component Name

• Parse component name from user's message (ask if not provided)
• Normalize to lowercase kebab-case (e.g., `My Component` -> `my-component`)
• Validate: starts with letter, only letters/numbers/hyphens, no consecutive hyphens

Step 1.5: Component Extension Decision

When user says "extend {component}":

**Tier 1: Check Project Components First**

• Search `/apps/{project}/components/{component}`
• If found -> Use as `sling:resourceSuperType`

**Tier 2: Check Core Components**

| User Says | Maps To | | --- | --- | | image | core/wcm/components/image/v3/image | | teaser, card | core/wcm/components/teaser/v2/teaser | | text, richtext | core/wcm/components/text/v2/text | | title, heading | core/wcm/components/title/v3/title | | list | core/wcm/components/list/v4/list | | button, cta | core/wcm/components/button/v2/button | | navigation, nav | core/wcm/components/navigation/v2/navigation | | container, section | core/wcm/components/container/v1/container | | accordion | core/wcm/components/accordion/v1/accordion | | tabs | core/wcm/components/tabs/v1/tabs | | carousel | core/wcm/components/carousel/v1/carousel | | embed, video | core/wcm/components/embed/v2/embed |

**Tier 3: Not Found** - As