Cross-target design principles (tokens, component model, a11y outcomes, docs surface). Use for any Storybook target before stack-specific styling skills.
EnglishReact + Tailwind + CSS-variable conventions for app/ — variant props, shared icons, tokens, demos, a11y. Use when implementing or reviewing generated UI with Tailwind and design tokens.
EnglishSupport designers without code — explain sync in plain language, Figma vs rule fixes, draft proposed-rules entries. Use with designer-partner or when users avoid source files.
EnglishEvaluate Figma components before code generation (Auto Layout, names, variables, text styles, variants). Use when starting figma-sync or explaining BLOCKED vs READY.
EnglishFramework-agnostic sync after readiness — diffing, generation rules, story goals, validation, learnings, MCP. Use after figma-readiness; stack skills follow from the Active target section in agents/figma-sync/.agent.md.
EnglishEmit and validate React + Storybook artifacts under app/ — paths, TSX, CSF3 stories, npm scripts, optional Code Connect. Bundler (e.g. Vite) is an app detail. Use when README / figma-sync agent Active target applies or when editing those components.
English
AGENT SKILLS ATLASIncludes Design Foundations, Design React Tailwind, Designer Explainer, and other workflows.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Design Foundations
Cross-target design principles (tokens, component model, a11y outcomes, docs surface). Use for any Storybook target before stack-specific styling skills.
Design React Tailwind
React + Tailwind + CSS-variable conventions for app/ — variant props, shared icons, tokens, demos, a11y. Use when implementing or reviewing generated UI with Tailwind and design tokens.
Designer Explainer
Support designers without code — explain sync in plain language, Figma vs rule fixes, draft proposed-rules entries. Use with designer-partner or when users avoid source files.
Figma Readiness
Evaluate Figma components before code generation (Auto Layout, names, variables, text styles, variants). Use when starting figma-sync or explaining BLOCKED vs READY.
Figma Sync Universal
Framework-agnostic sync after readiness — diffing, generation rules, story goals, validation, learnings, MCP. Use after figma-readiness; stack skills follow from the Active target section in agents/figma-sync/.agent.md.
Storybook React
Emit and validate React + Storybook artifacts under app/ — paths, TSX, CSF3 stories, npm scripts, optional Code Connect. Bundler (e.g. Vite) is an app detail. Use when README / figma-sync agent Active target applies or when editing those components.
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 Foundations 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.