About figma-catalogue
figma-catalogue is a domain navigator that lists skills for Figma, design-to-code workflows, design tokens, and official platform suites. It helps identify a relevant skill for design-tool and code workflows.
Key features
- 01Catalogue Figma and design-to-code skills
- 02List skills for design token management
- 03Cover official platform skill suites
- 04Point to design-catalogue for the full catalogue
Use cases
- 01Find a skill for Figma-to-code workflows
- 02Locate skills for extracting or managing design tokens
- 03Browse official platform skill suites
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/figma-cataloguein Claude Code to confirm it loaded.
Bundled filesstub.yaml
Details
From the project READMEfigma-catalogue
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 |
Comments
Markdown supported