Agent-Skills.md

Agent Skills: figma-to-page

Generates React code for a full page based on pasted Figma 'Inspect'

[]
UncategorizedID: okgoogle13/careercopilot/figma-to-page

Repository

okgoogle13/careercopilot
okgoogle13
1

Install this agent skill to your local

pnpm dlx add-skill https://github.com/okgoogle13/careercopilot/tree/HEAD/.claude/skills/figma-to-page

Skill Files

Browse the full folder contents for figma-to-page.

Download Skill

Loading file tree…

.claude/skills/figma-to-page/SKILL.md

Skill Metadata

Name
figma-to-page
Description
Generates React code for a full page based on pasted Figma 'Inspect'

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

  1. Page Identification: Acquire the page name in PascalCase.
  2. Input Ingestion: Collect Figma 'Inspect' details for the entire page.
  3. Scaffolding: Run the .claude/skills/react-page-scaffolder/scripts/create-page.sh script.
  4. Code Generation: Transform Figma specs into TSX and CSS modules.
  5. Finalization: Write files, overwrite templates, and run yarn lint:fix.