Shadcn Ui
Ship accessible React UI with shadcn/ui components during build, aligned with a Stitch-style design loop from Open Design.
Overview
shadcn-ui is an agent skill most often used in Build (also Validate for prototype UI) that guides accessible shadcn/ui component implementation paired with a Stitch design loop.
Install
npx skills add https://github.com/nexu-io/open-design --skill shadcn-uiWhat is this skill?
- Builds UI with shadcn/ui and pairs with the Stitch design loop for faster structured components
- Open Design catalogue entry with explicit triggers: shadcn, shadcn ui, accessible components
- Upstream curated from Google Labs skills (design-systems category)
- Documents install path: pull upstream bundle into the agent skills directory for full assets
- Mode metadata: design-system for planning-time discovery by the agent
- Upstream source: Google Labs code skills repository (design-systems category)
Adoption & trust: 819 installs on skills.sh; 61.4k GitHub stars.
What problem does it solve?
You need production-grade accessible components quickly but lack a repeatable design-system path from idea to coded UI.
Who is it for?
Solo builders on React/Next stacks who want shadcn/ui plus a documented design-loop handoff from Open Design or Stitch workflows.
Skip if: Teams standardized on Material UI only, non-React stacks without adaptation, or jobs that need only backend APIs with no UI.
When should I use this skill?
Agent hears triggers shadcn, shadcn ui, shadcn components, or accessible components during UI planning or implementation.
What do I get? / Deliverables
After invocation, the agent follows shadcn/ui patterns and Open Design triggers so structured components ship faster; install the upstream Google Labs bundle when full assets are required.
- shadcn/ui component implementations
- Accessible UI patterns aligned with design-system mode
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Component implementation is canonical on the build shelf; the skill is discovered during planning but executes when UI is assembled. shadcn/ui is front-end component work—forms, dialogs, and accessible primitives—so the primary subphase is frontend.
Where it fits
Sketch a landing or app shell with shadcn primitives before committing to full build scope.
Add accessible forms, dialogs, and tables using shadcn/ui patterns in a Next.js SaaS.
Align component variants and tokens before UI review for launch consistency.
How it compares
Skill package and catalogue pointer for shadcn workflows—not an MCP server and not a hosted component CDN by itself.
Common Questions / FAQ
Who is shadcn-ui for?
Indie SaaS and product builders using Claude Code, Cursor, or similar agents who standardize on shadcn/ui for accessible React UI.
When should I use shadcn-ui?
In Validate when prototyping landing or app shells; in Build when adding forms, dialogs, and design-system components; say trigger phrases like shadcn ui or accessible components during planning.
Is shadcn-ui safe to install?
Check Prism Security Audits on this page; review the upstream Google Labs repo before copying scripts into your agent skills directory.
SKILL.md
READMESKILL.md - Shadcn Ui
# shadcn-ui > Curated from Google Labs (Stitch). ## What it does Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly. ## Source - Upstream: https://github.com/google-labs-code/skills - Category: `design-systems` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/google-labs-code/skills ``` Then ask the agent to invoke this skill by name (`shadcn-ui`) or with one of the trigger phrases listed in this skill's frontmatter.