Use this when building a net-new React component for the design system. Works with full specs (Figma + Design Rules) or Shadcn-first when specs aren't ready yet. Triggers on: "Build [ComponentName]", "Create a new component for [X]", "Implement [ComponentName] from Figma", "Scaffold [ComponentName] from Shadcn".
EnglishUse when generating React data-visualization components (charts, dashboards). Pairs with the design-kit core data-visualization skill which handles chart selection reasoning. Uses Recharts by default; adapt to the project's viz library.
EnglishUse this skill to polish a rendered prototype against the design-qa rubric. Scores the prototype, makes one targeted fix per round, keeps or reverts based on score. Based on the autoresearch method, applied to prototypes instead of skills. Loaded by /design-kit:design-iterate.
English
AGENT SKILLS ATLASIncludes Component Builder, Data Viz React, and Design Iterate.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Component Builder
Use this when building a net-new React component for the design system. Works with full specs (Figma + Design Rules) or Shadcn-first when specs aren't ready yet. Triggers on: "Build [ComponentName]", "Create a new component for [X]", "Implement [ComponentName] from Figma", "Scaffold [ComponentName] from Shadcn".
Data Viz React
Use when generating React data-visualization components (charts, dashboards). Pairs with the design-kit core data-visualization skill which handles chart selection reasoning. Uses Recharts by default; adapt to the project's viz library.
Design Iterate
Use this skill to polish a rendered prototype against the design-qa rubric. Scores the prototype, makes one targeted fix per round, keeps or reverts based on score. Based on the autoresearch method, applied to prototypes instead of skills. Loaded by /design-kit:design-iterate.
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 Component Builder 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.