Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLIAbout this skill
Use this skill to create or refactor React + TypeScript + Tailwind CSS + CVA components following design system conventions. It provides the canonical file structure, per-component styles pattern, types, context, store, barrel exports, and Storybook story templates that are specific to this codebase. Invoke whenever the user wants to build a new UI component, add CVA variants or sub-components, set up component context or store, create barrel exports, write component stories, or restructure an existing component directory — even for tasks that seem straightforward like "create a Button" or "add a variant", because the skill ensures correct file placement and naming conventions.
Quick start
- Copy the install prompt. Use the green button above this README.
- Send it to your agent. Paste it into your coding agent’s chat and send.
- Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Review, license & listing details
This is an imported listing. We haven’t certified its safety, license, or compatibility. Skills may include executable scripts.
HTTP 404
About scan coverage and limitationsAbout this listing
- Category
- Product & design
- Reported license
- Not specified
- Listing language (estimated)
- English
- Review status
- Not individually reviewed
- Agent compatibility
- Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.