skills.rest
valithedge
valithedgeCOMMUNITY
Explore all skills by this author →
GitHub

create-component

Scaffold AEM components with dialog, HTL, Sling Model, tests, and clientlibs.

1|Updated Oct 7, 2024
Search Tags:#aem#dialog#component-scaffolding#core-components#htl#sling-model#multifield
One-click install
npx skills add https://github.com/valithedge/etisalatedge --skill create-component-valithedge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/valithedge/etisalatedge/tree/main/.agents/skills/create-component
Command: npx skills add https://github.com/valithedge/etisalatedge --skill create-component-valithedge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly scaffolds complete, production-ready AEM components, eliminating manual boilerplate and ensuring consistent structure across projects.

Core Features & Use Cases

  • Generates Dialog, HTL template, Sling Model, unit tests, and clientlibs following Adobe best practices.
  • Supports extending Core Components and project components, including multifield and conditional logic patterns.
  • Integrates with Figma-based designs via the Figma MCP server when a design URL is provided.

Quick Start

Create a new AEM component by providing its name and required dialog fields to scaffold a complete AEM component.

Frequently Asked Questions about create-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold an AEM component end-to-end?▼

To scaffold an AEM component end-to-end, provide a component name and dialog specification. The tool generates the dialog, HTL template, Sling Model, unit tests, and clientlibs automatically following Adobe best practices.

Can I extend Core Components when generating AEM component scaffolding?▼

Yes, you can extend AEM Core Components and project components. The scaffolding supports multifield and conditional logic patterns to customize the generated dialog and Sling Model behaviors.

Does AEM component scaffolding support Figma design URLs?▼

Yes, AEM component scaffolding integrates with Figma-based designs via the MCP server. When a design URL is provided, it incorporates the design into the generated HTL template and clientlibs.

Do I need a configuration file to generate AEM components?▼

You need a .aem-skills-config.yaml file to define project conventions. The scaffolding reads this configuration to ensure the generated dialogs, Sling Models, and HTL templates match your project structure.

What is the best way to automate AEM component boilerplate creation?▼

Automating AEM component boilerplate is best handled by validating inputs like component name and dialog specification upfront, then generating all required files including unit tests and clientlibs in one pass.

Why are my generated AEM component files inconsistent across projects?▼

AEM component files become inconsistent without automated scaffolding. Using a centralized configuration file and generating dialogs, Sling Models, and HTL templates together ensures consistent structure across projects.

Related Skills

Explore More Software Engineering Skills→
easingthemeseasingthemes
6

aem-component

Locate source files, AEM pages, and dialog fields for a component across repositories.

Community
Advanced
adobeadobe

create-component

Scaffold AEM components with dialogs, HTL, Sling Models, tests, and clientlibs.

Official
Advanced
muskie9muskie9

Figma MCP Desktop Server

Extract design tokens and component details from Figma via SSE.

Community
Intermediate
easingthemeseasingthemes
6

aem-verify

Verify deployed AEM components by walking dialog fields and saving verification docs.

Community
Advanced