This is the skill you want when working with shadcn/ui projects. It knows the entire component system, handles CLI operations (init, add, search), and enforces the framework's opinionated patterns like using FieldGroup for forms, data-icon for button icons, and gap instead of space-y. It catches common mistakes before they happen: raw divs where Alert should be used, manual dark mode classes instead of semantic tokens, InputGroup composition errors. The skill auto-triggers when it detects a components.json file or preset codes, and it can decode those cryptic preset URLs without you touching the documentation. Think of it as pair programming with someone who has the entire shadcn rule book memorized.
- GitHub stars
- 298
- last updated
- Jun 11, 2026
Install
$ npx -y skills add syahiidkamil/software-engineer-ai-agent-atlas --skill shadcn --agent claude-codeInstalls into .claude/skills of the current project.
Files
shadcn/ui
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
IMPORTANT: Run all CLI commands using the project's package runner:
npx shadcn@latest,pnpm dlx shadcn@latest, orbunx --bun shadcn@latest— based on the project'spackageManager. Examples below usenpx shadcn@latestbut substitute the correct runner for the project.
Current Project Context
!`npx shadcn@latest info --json`
The JSON above contains the project config and installed components. Use npx shadcn@latest docs <component> to get documentation and example URLs for any component.
Principles
- Use existing components first. Use
npx shadcn@latest searchto check registries before writing custom UI. Check community registries too. - Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
- Use built-in variants before custom styles.
variant="outline",size="sm", etc. - Use semantic colors.
bg-primary,text-muted-foreground— never raw values likebg-blue-500.
Critical Rules
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/syahiidkamil/software-engineer-ai-agent-atlas
- Categories
- Frontend Development, Documentation, AI & Agent Building, Debugging
- First seen
- Jun 11, 2026
More from syahiidkamil/software-engineer-ai-agent-atlas
All 17Recommended
More Frontend Development
vercel-react-best-practicesvercel-labs/agent-skillsReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c0skills.sh installs
frontend-designanthropics/skillsGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making ch1.1Mskills.sh installs
design-taste-frontendleonxlnx/taste-skillAnti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that d754.5Kskills.sh installs
vueantfu/skillsVue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers36.5Kskills.sh installs
use-domexpo/skillsUse Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.30.3Kskills.sh installs