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

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

85%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 well-sequenced, action-oriented workflow with strong validation checkpoints and clean one-level-deep reference navigation. The main weakness is mild redundancy around the configuration-gate rationale, which slightly inflates token usage.

Suggestions

Consolidate the configuration-gate rationale into a single location; the gate-check box, the 'Why you should not explore the codebase' list, and Step 0.2 all repeat the same justification.

Trim inline parenthetical justifications (e.g., 'since hardcoded versions drift out of sync') that explain why rather than what to do; move them into the relevant reference file if needed.

Inline the most common short code patterns (e.g., the basic .content.xml component definition) instead of only pointing to references/aem-conventions.md, to reduce load hops for the common case.

DimensionReasoningScore

Conciseness

Mostly efficient and well-structured, but the configuration-gate rationale is restated in three places and a few inline justifications pad beyond the essential; not quite lean enough for a 5.

4 / 5

Actionability

Highly executable with concrete file paths, a complete Java delegation code block, Granite resource-type tables, and exact MCP call JSON; a few steps rely on "Load reference" pointers rather than inline code, keeping it just below 5.

4 / 5

Workflow Clarity

Clearly sequenced numbered steps with an overview table and explicit validation checkpoints and feedback loops (config gate stop/display/retry, dialog-spec confirmation gate, dependency verification).

5 / 5

Progressive Disclosure

Clear overview body pointing to 15 one-level-deep reference files via a dedicated Reference Files table and inline "Load:" signals; all referenced bundle files exist and content is appropriately split.

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 strong across all dimensions: it uses third person, lists concrete capabilities, provides explicit "Use when..." trigger guidance, and occupies a clearly distinct niche. No weaknesses surfaced.

DimensionReasoningScore

Specificity

Lists multiple concrete actions (dialog, HTL template, Sling Model, unit tests, clientlibs, extending Core Components, Figma-to-HTL/CSS/JS translation) with comprehensive coverage of the skill's capabilities.

5 / 5

Completeness

Explicitly answers both "what" (creates components with dialog/HTL/model/tests/clientlibs, extends Core Components, translates Figma designs) and "when" via an explicit "Use this skill whenever..." clause with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural user phrasings ("creating, building, generating, or scaffolding an AEM component") plus a broad list of concrete component-type synonyms (teaser, card, hero, banner, accordion, tabs, carousel) give comprehensive keyword coverage.

5 / 5

Distinctiveness Conflict Risk

AEM component creation is a clear niche with distinct triggers (specific component types, Figma conversion, Core Component extension), giving minimal conflict risk with other skills.

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.

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.