Generate prototype React components + Storybook stories from Figma URLs. 6-phase pipeline: figmatoreact → UntitledUI matching → prototype synthesis → verify → storybook integration → present. Input: Figma URL(s). Output: prototypes auto-copied to Storybook with full-screen preview opened in browser. Generates both individual components AND a full-page composition for complete screen preview. Use when you want to preview design implementation before coding. Trigger keywords: prototype, figma prototype, storybook from figma, design preview, generate components from figma, preview design.
EnglishResearch the repository before coding. Use after PM readiness and before technical design to find relevant files, existing patterns, tests, APIs, migrations, constraints, prior implementations, and validation commands.
English
AGENT SKILLS ATLASIncludes Design Prototype and Dev Repo Context.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Design Prototype
Generate prototype React components + Storybook stories from Figma URLs. 6-phase pipeline: figmatoreact → UntitledUI matching → prototype synthesis → verify → storybook integration → present. Input: Figma URL(s). Output: prototypes auto-copied to Storybook with full-screen preview opened in browser. Generates both individual components AND a full-page composition for complete screen preview. Use when you want to preview design implementation before coding. Trigger keywords: prototype, figma prototype, storybook from figma, design preview, generate components from figma, preview design.
Dev Repo Context
Research the repository before coding. Use after PM readiness and before technical design to find relevant files, existing patterns, tests, APIs, migrations, constraints, prior implementations, and validation commands.
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Design Prototype skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- License details are not provided in these listings. Check the author’s terms before using the skills.