create-component

Name: create-component
Availability: InStock
Author: valithedge

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

Ready to run

npx skills add https://github.com/valithedge/etisalatedge --skill create-component-valithedge

💬 Prompt for ChatGPT / Claude Chat▼

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.