SkillHub ClubDesign ProductFull StackDesigner

figma-to-page

Imported from https://github.com/okgoogle13/careercopilot.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars

Hot score

Updated

March 20, 2026

Overall rating

C2.6

Composite score

2.6

Best-practice grade

B80.4

Install command

npx @skill-hub/cli install okgoogle13-careercopilot-figma-to-page

Repository

okgoogle13/careercopilot

Skill path: .claude/skills/figma-to-page

Imported from https://github.com/okgoogle13/careercopilot.

Open repository

Best for

Primary workflow: Design Product.

Technical facets: Full Stack, Designer.

Target audience: everyone.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: okgoogle13.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

Install figma-to-page into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
Review https://github.com/okgoogle13/careercopilot before adding figma-to-page to shared team environments
Use figma-to-page for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw 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.