figma-to-page
Generates React code for a full page based on pasted Figma 'Inspect' details. Uses the page scaffolder.
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- GitHub stars: 1
- Updated: 2025-11-21
Download the latest version (v1.0.0) from this page.
SKILL.md
---
name: figma-to-page
description: "Generates React code for a full page based on pasted Figma 'Inspect' details. Uses the page scaffolder."
---
# Figma to Page Workflow
1. Ask for the page name in `PascalCase` (e.g., `UserProfile`).
2. Ask the user to paste all details from the Figma 'Inspect' panel for the *entire page*.
3. **Execute scaffolder:**
* Run `chmod +x .claude/skills/react-page-scaffolder/scripts/create-page.sh`
* Run `.claude/skills/react-page-scaffolder/scripts/create-page.sh {{PAGE_NAME}}`
* Report the output (the new file paths). Let `{{PAGE_DIR}}` be the new directory (e.g., `src/pages/userprofile`).
4. **Generate Code:**
* Read the user-pasted Figma details.
* Generate the TSX code for `{{PAGE_DIR}}/{{PAGE_NAME}}.tsx`.
* Generate the corresponding CSS for `{{PAGE_DIR}}/{{PAGE_NAME}}.module.css`.
5. **Write Files:**
* Write the new TSX content, overwriting the template.
* Write the new CSS content, overwriting the template.
6. **Lint:** Run `yarn lint:fix {{PAGE_DIR}}` to clean up the new files.
7. Report that the page has been created and populated from Figma details.