Domain navigator for Figma, design-to-code workflows, design tokens, and official platform suites. Activate when the user asks for a skill that bridges design tools and code.
→ For the full catalogue across all domains: use design-catalogue.
When to use
Activate when the user:
- Asks about Figma-to-code or code-to-Figma workflows
- Needs design token management or extraction
- Wants to work with design systems
- Asks about official skill suites (Anthropic, Vercel, Expo, Figma)
Figma & Design-to-Code
| Skill | Best for |
|---|---|
figma-official-skills |
7 official Figma skills: implement, generate, library, code-connect |
openai-skills |
OpenAI's 9 skills: Figma + frontend + slides + imagegen |
google-stitch-skills |
6 Stitch skills: design-md, react-components, shadcn, loop |
extract-design-md |
Extract Stitch output into DESIGN.md format |
claude2figma |
4 skills enforcing token compliance: colors/fonts/spacing → Figma variables |
work-with-design-systems |
Inspect (WCAG audit) + Build (6-phase with variable bindings) dual-mode |
figma-variables-tokens-generator |
Questionnaire → W3C token ZIP + Figma plugin for import |
figma-skill |
Figma API + Community resources → design tokens → 7 frameworks |
extract-design-system |
Reverse-engineers tokens from any live website → tokens.json + tokens.css |
design-tokens-skill |
W3C DTCG token spec: OKLCH, references/aliasing, Terrazzo, Figma exports |
Official Platform Suites
| Skill | Best for |
|---|---|
anthropics-skills |
6 Anthropic skills: frontend-design, artifacts, canvas, theme, brand, pptx |
vercel-skills |
4 Vercel skills: web-design-guidelines, components, React best practices |
microsoft-skills |
2 Microsoft skills: design review, dark-theme React |
software-mansion-skills |
Official Software Mansion: RN animations, gestures, SVG, on-device AI |
callstack-agent-skills |
Official Callstack: RN best practices, profiling, Turbo Modules, upgrade |
expo-skills |
Official Expo: Expo SDK, EAS Build/Submit, Expo Router |