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.
Install
npx skills add forcedotcom/sf-skills --skill experience-lwc-design-generatenpx skills add forcedotcom/sf-skills --skill experience-lwc-design-generate -a claude-code -gnpx skills add forcedotcom/sf-skills --skill experience-lwc-design-generate -a codex -ggemini skills install https://github.com/forcedotcom/sf-skills.git --path skills/experience-lwc-design-generategh skill install forcedotcom/sf-skills experience-lwc-design-generategit clone --depth 1 https://github.com/forcedotcom/sf-skills /tmp/forcedotcom__sf-skills
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/forcedotcom__sf-skills/skills/experience-lwc-design-generate ~/.claude/skills/experience-lwc-design-generate # Claude Code
cp -R /tmp/forcedotcom__sf-skills/skills/experience-lwc-design-generate ~/.agents/skills/experience-lwc-design-generate # Codex, Cursor, Gemini CLI, Copilot, OpenCode