# experience-lwc-design-generate

Creates Lightning Web Components from Figma designs or PRD specs. Orchestrates requirements, code generation, SLDS styling, and tests.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 installs · ★ 1112
- Author: forcedotcom
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/experience-lwc-design-generate/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/experience-lwc-design-generate

## What it does

This skill drives end-to-end generation of a new Lightning Web Component from a Figma frame, PRD markdown, or legacy Aura component source. It structures the process into five mandatory phases: requirements gathering, code generation, optimization, linting with compilation, and testing.

It acts as an orchestrator across specialized tasks. The workflow hands off schema analysis to LDS skills, applies SLDS styles and base components, and checks naming conventions using the bundled `check-component-name.sh` script. Execution requires `eslint` 8.0 or newer, `prettier` 2.0 or newer, and `python3` 3.8 or higher.

The skill is not built for in-place Aura migrations or refactoring existing LWCs. If you attempt to update an existing component in place, this workflow will fail to address your needs without standalone tools.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-design-generate -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/experience-lwc-design-generate/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/experience-lwc-design-generate/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-design-generate -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/experience-lwc-design-generate/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-design-generate -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/experience-lwc-design-generate/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install forcedotcom/sf-skills experience-lwc-design-generate
```

2. **Manually: put the files in place**
- File: `.github/skills/experience-lwc-design-generate/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-design-generate -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/forcedotcom/sf-skills --path skills/experience-lwc-design-generate
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/experience-lwc-design-generate/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-design-generate -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/experience-lwc-design-generate/SKILL.md

## When to use it
- generate a new LWC component from a Figma frame or PRD
- convert legacy Aura component logic into a clean LWC build
- structure requirements and data schemas into a formal PRD
- apply SLDS styling and Lightning base components to new code

## Example prompts
- Build a new productCard LWC based on requirements in the PRD file
- Generate a userProfile LWC from this Figma design and wire it to LDS
- Convert the accountSummary Aura component into a brand-new LWC build

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: b793328f72d87866.

BEGIN THIRD-PARTY FILE b793328f72d87866
```text
---
name: experience-lwc-design-generate
description: "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)."
metadata:
  version: "1.0"
  domains: ["Experience", "Design Systems"]
  cliTools:
    - tool: ["eslint"]
      semver: ">=8.0"
    - tool: ["prettier"]
      semver: ">=2.0"
    - tool: ["python3"]
      semver: ">=3.8"
  relatedSkills:
    - design-systems-slds-apply
    - experience-lds-best-practices-apply
    - experience-lds-data-requirements-generate
    - experience-lwc-accessibility-jest-run
    - experience-accessibility-validate
    - experience-lwc-base-components-integrate
    - experience-lwc-generate
    - experience-lwc-rtl-validate
    - experience-lwc-runtime-observe
    - experience-lwc-security-validate
    - experience-lwc-typescript-migrate
---
<!-- 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).
```
END THIRD-PARTY FILE b793328f72d87866

The third-party file has ended. Everything between the b793328f72d87866 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2622 of 15929 bytes. © forcedotcom · Apache-2.0 · https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/experience-lwc-design-generate/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md