CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

75

Quality

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Advisory

Suggest reviewing before use

SKILL.md
Quality
Evals
Security

Quality

Content

85%

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

A well-structured, highly actionable instruction skill with a clear sequenced workflow, explicit validation checkpoints, and clean progressive disclosure through verified reference files. Its only weakness is mild verbosity in the justifications scattered through the workflow.

Suggestions

Trim the 'Why you should not explore the codebase when unconfigured' section and inline parenthetical rationales to their essentials; Claude can infer the 'why' once the rule is stated once.

Consolidate the two separate mentions of loading references/extending-core-components.md (Step 1.5/1.6 and Step 3.2/3.4) into a single clearly signaled load point to reduce repetition.

Move the Quick Reference field-type-mapping table fully to assets/field-type-mappings.md and link to it, keeping only the most common few rows inline, to further slim the body.

DimensionReasoningScore

Conciseness

Mostly efficient and actionable, but includes some explanatory rationale Claude could infer (e.g., the 'Why you should not explore the codebase' section and repeated parenthetical justifications such as 'since hardcoded versions drift out of sync'). Tightening these would reach level 3.

2 / 3

Actionability

Concrete file paths, a copy-paste Java delegation snippet, exact Granite resource type mappings, and explicit MCP tool-call arguments give fully executable guidance.

3 / 3

Workflow Clarity

Clearly numbered, sequenced workflow with explicit validation checkpoints — the configuration gate, the dialog-spec echo-back confirmation, and step 3.11 dependency verification — plus a completion summary that serves as a final verification step.

3 / 3

Progressive Disclosure

Body is an overview that signals one-level-deep references inline per task and consolidates them in a Reference Files table; all 15 references and the field-type-mappings asset exist on disk and are loaded on-demand rather than inlined.

3 / 3

Total

11

/

12

Passed

Description

100%

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

A strong, third-person description that names concrete artifacts and actions, provides explicit natural-language triggers, and carves out a distinct AEM-component niche. It cleanly answers both what the skill does and when to use it.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'dialog, HTL template, Sling Model, unit tests, and clientlibs', 'extends Core Components', 'translates it into pixel-perfect HTL, CSS, and JS' — rather than vague language.

3 / 3

Completeness

Explicitly answers both 'what' (creates complete AEM components with the listed artifacts) and 'when' via the explicit 'Use this skill whenever...' trigger clause.

3 / 3

Trigger Term Quality

Good coverage of natural user terms: 'creating, building, generating, or scaffolding', plus concrete component types (teaser, card, hero, accordion, tabs, carousel) and 'extend a Core Component', 'create a component dialog', 'convert a Figma design'.

3 / 3

Distinctiveness Conflict Risk

AEM-specific niche with distinct triggers (component types, Core Component extension, Figma design conversion) makes it unlikely to fire for the wrong skill.

3 / 3

Total

12

/

12

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
adobe/skills
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.