CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

create-component

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.

Quality

94%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a dense, highly actionable AEM playbook: exact paths, decision tables, copy-paste snippets, and a strong configuration gate with user feedback loops. Its main weaknesses are repetition of the configuration gate and the absence of an explicit build/test verification step after file creation.

Suggestions

State the configuration gate once (the Step 0 section) and have the top gate-check section and the Reference Files table simply point to it, removing the five-bullet 'Why you should not explore' rationale that restates one point.

Add a final verification step to the workflow (e.g. compile core module / run the generated unit tests, or instruct to trigger a build) so file creation closes with a feedback loop rather than an open offer.

Fix the formatting where bold markers run lines together ('Load: references/htl-patterns.md**If Figma URL provided, ALSO load:**' and the mis-numbered '1./1./2.' list under Figma URL parsing) so instructions render as intended.

DimensionReasoningScore

Conciseness

Mostly lean, table-driven, AEM-specific knowledge Claude does not already have (paths, granite resource types, Core Component mapping). However, the configuration gate is stated three times (gate-check section, Step 0, and the Reference Files table) and the 'Why you should not explore the codebase when unconfigured' section repeats one rationale as five bullets, so a trim is possible — fits anchor 4, not 5.

4 / 5

Actionability

Fully executable, copy-paste-ready guidance: exact file paths (e.g. 'ui.apps/src/main/content/jcr_root/apps/[project]/components/{component-name}/.content.xml'), a granite resource-type mapping table, the exact MCP tool-call JSON for get_design_context, a ready-to-display configuration error message, and a concrete delegation-pattern code snippet. Minor formatting glitches (run-together bold on the 3.3/3.7 'ALSO load' lines) do not hurt executability.

5 / 5

Workflow Clarity

Clear 0→4 sequence with a hard validation gate ('Check: Does the file exist and does it have configured: true?' → stop and wait for user), a dialog-spec confirmation checkpoint ('Echo back EXACTLY what you understood… Is this correct?'), and Step 3.11 dependency verification. Between 4 and 5: recovery loops exist for configuration and spec mismatches, but there is no explicit post-creation build/test verification of generated files (only an offer to build), so a minor validation gap remains.

4 / 5

Progressive Disclosure

Verified against the actual bundle: every file cited in the body (15 references/*.md plus assets/field-type-mappings.md) exists on disk, references are one level deep (reference files cross-link only to siblings, no nested chains), inline 'Load:' cues appear at point of use, and a consolidated task→reference table at the end provides navigation. Matches the 5 anchor.

5 / 5

Total

18

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is exemplary: concrete artifact-level capabilities, a rich set of natural trigger terms with synonyms, an explicit 'Use this skill whenever…' clause, and a well-defined niche. Third-person voice and concrete MCP tool naming leave nothing to infer.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with comprehensive coverage — 'Creates complete AEM components with dialog, HTL template, Sling Model, unit tests, and clientlibs', extends Core Components, and 'fetches the design via Figma MCP (get_design_context) and translates it into pixel-perfect HTL, CSS, and JS'. Matches the comprehensive-coverage 5 anchor; only a trace of buzz ('pixel-perfect') which does not create a coverage gap.

5 / 5

Completeness

Explicitly answers both what (artifact-level detail plus Figma translation) and when ('Use this skill whenever the user mentions creating, building, generating, or scaffolding an AEM component…'), matching the 5 anchor structure verbatim. It is third person throughout ('Creates', 'fetches'), so no voice penalty applies.

5 / 5

Trigger Term Quality

Comprehensive natural trigger terms with synonyms: 'creating, building, generating, or scaffolding', component-type names users would say ('teaser, card, hero, banner, accordion, tabs, carousel, list, navigation, breadcrumb'), and concrete intents ('extend a Core Component, create a component dialog, add a Sling Model, or convert a Figma design into an AEM component').

5 / 5

Distinctiveness Conflict Risk

Clear AEM component-creation niche with domain-specific triggers ('AEM component', 'Sling Model', 'Core Component', Figma-to-AEM) that users would not say when needing another skill; minimal overlap risk.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

adobe/skills

Path

plugins/aem/cloud-service/skills/create-component/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.