aem-skill-create-block-from-figma-without-mcp

What problem does it solve? Manually translating a Figma design into an AEM Edge Delivery Services xwalk block requires writing three coordinated files (TypeScript decorator, scoped CSS, and component model JSON) plus registering the block and verifying the build, which is repetitive and error-prone. ## Core Features & Use Cases - Figma-to-block scaffolding: Parses a Figma URL (file key and node ID), infers structure type (simple model vs. container+filter), maps Figma elements to AEM field components, and generates all three block files under src/blocks/<block-name>/. - Multi-state handling: Detects state frames (hover, loading, step-N) from Figma, the developer brief, or multiple node IDs, then asks the developer to confirm the trigger type before generating CSS-only, JS-driven data-state, or multi-step data-step implementations. - Registration and verification: Updates src/models/_section.json, runs npm run build:json and npm run build, fixes compile errors, and produces a ready-to-paste content entry prompt for AEM Copilot. - Use Case: A developer pastes a Figma URL for a new hero banner; the skill generates hero.ts, hero.css, and _hero.json with mapped fields, registers the block in the Universal Editor, verifies the Vite build passes, and outputs demo content values. ## Quick Start Ask the agent to create an AEM block named hero-banner from your Figma design URL, optionally including a short description of interactions or states.