Agent skill · forcedotcom
experience-lwc-design-generate
Use when you need to create a brand new Lightning Web Component from a Figma design, a Product Requirements Document, or another design artifact — orchestrating the five-phase workflow (gather requirements → generate code → optimize → lint/format/compile → test) and stitching together the specialized skills for SLDS, LDS, base components, optimization, and testing. Use this skill whenever the user mentions building a new LWC from Figma, building an LWC from a PRD, generating an LWC from a design or screenshot, or migrating an Aura component as a fresh LWC build. DO NOT TRIGGER when refactoring an existing LWC (use experience-lwc-generate), for Aura → LWC in-place migration (out of scope for this skill), for standalone SLDS token or styling work (use design-systems-slds-apply), or for standalone data-layer work (use experience-lds-best-practices-apply or experience-lds-data-requirements-generate).
What it needs
About 8k tokens when loaded.
What this skill does
<!-- adk-managed-skill --> Creating LWC Components from Design Orchestrate the end-to-end creation of a new Lightning Web Component from a design input (Figma, PRD, Aura source, or user description). This is the top-level workflow skill — it sequences the specialized sibling skills that own each stage. Org-aware data (LDS schema introspection, design-frame inspection) is resolved by handing off to experience-lds-data-requirements-generate or via design-tool URLs the user provides. When to Use Building a brand-new LWC from a Figma frame, PRD, or written spec. Migrating an Aura component to LWC as a fresh build (in-place Aura → LWC porting is out of scope for this skill). Creating a component whose requirements are still partly implicit and need distillation into a PRD before coding. Do NOT use this skill for: Refactoring an existing LWC (use experience-lwc-generate). Aura → LWC in-place migration (out of scope for this skill). Pure styling or data-layer work (use the specialized skills directly). Prerequisites At least one design input: Figma URL, PRD markdown, Aura component source, or a textual spec. Target path (module folder) for the new LWC. For data-backed components: access to the org so experience-lds-data-requirements-generate and experience-lds-best-practices-apply can resolve the schema and adapter shapes. Knowledge Bases references/prd-analysis-template.md — PRD section skeleton (copy it verbatim when producing a PRD). references/figma-to-prd-blueprint.md — Figma-specific guidance for translating a frame into PRD sections (componentName/tagName, contentRequirements, dataRequirements, interactions, componentCommunication, states, accessibility/responsiveness/styling/localization/security). Read this before Phase 1.2 when the input is a Figma design. Workflow (mandatory five phases) Phase 1 — Gather PRD & requirements Goal: produce a consolidated PRD that every later phase consumes. 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills forcedotcom/experience-lwc-design-generate--d0ae02