OpenSkillIndex← back to search
claude-code

Claude-skill-registry figma-to-page

Generates React code for a full page based on pasted Figma 'Inspect' details. Uses the page scaffolder.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/figma-to-page" ~/.claude/skills/majiayu000-claude-skill-registry-figma-to-page && rm -rf "$T"
manifest: skills/data/figma-to-page/SKILL.md
source content

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.