figma-to-page
Installation
SKILL.md
Purpose
Generates React code (TSX/CSS) for a full page based on pasted Figma 'Inspect' details, utilizing the standard page scaffolder for structure.
When to Use
- When migrating high-fidelity designs from Figma to the React codebase.
- When needing to rapidly prototype pages from existing design specifications.
- When ensuring structural consistency between design and implementation.
Process
- Page Identification: Acquire the page name in
PascalCase. - Input Ingestion: Collect Figma 'Inspect' details for the entire page.
- Scaffolding: Run the
.claude/skills/react-page-scaffolder/scripts/create-page.shscript. - Code Generation: Transform Figma specs into TSX and CSS modules.
- Finalization: Write files, overwrite templates, and run
yarn lint:fix.