shadcn-ui
nexu-io/open-design
Build accessible UI components with shadcn/ui integrated into the Stitch design loop.
What is shadcn-ui?
shadcn-ui enables rapid construction of structured, accessible UI components using the shadcn/ui library. It pairs with the Stitch design loop to streamline component development and shipping.
- Build accessible UI components with shadcn/ui
- Integrate with the Stitch design loop for structured workflows
- Ship components quickly with curated, production-ready patterns
- Access Google Labs design system expertise
How to install shadcn-ui
npx skills add https://github.com/nexu-io/open-design --skill shadcn-ui- Access to the upstream Google Labs skills repository
- Agent with skills directory support
How to use shadcn-ui
- 1.Inspect the upstream README at https://github.com/google-labs-code/skills for exact installation paths
- 2.Install the upstream bundle into your agent's skills directory
- 3.Invoke the skill by name (shadcn-ui) or use trigger phrases like 'shadcn', 'shadcn ui', or 'accessible components'
- 4.Follow the Stitch design loop workflow to build and ship components
Use cases
- Creating accessible component libraries for design systems
- Rapidly prototyping UI components within a design workflow
- Building consistent, structured components across projects
- Implementing design tokens and component patterns from Stitch
- UI/UX developers
- Design system maintainers
- Frontend engineers building accessible interfaces
- Teams using the Stitch design workflow
shadcn-ui FAQ
shadcn/ui is a collection of accessible, customizable UI components built with React and Tailwind CSS that can be copied into your project.
This skill integrates shadcn/ui with the Stitch design loop, providing a structured workflow for planning, building, and shipping accessible components.
The upstream repository at https://github.com/google-labs-code/skills contains the full workflow, assets, scripts, and references.
You can trigger it with 'shadcn', 'shadcn ui', 'shadcn components', or 'accessible components'.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: shadcn-ui description: | Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly. triggers:
- "shadcn"
- "shadcn ui"
- "shadcn components"
- "accessible components" od: mode: design-system category: design-systems upstream: "https://github.com/google-labs-code/skills"
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:
# 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.
Related skills
More from nexu-io/open-design and the wider catalog.
shader-dev
GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation.
slack-gif-creator
|
slides
Create and edit .pptx presentation decks with PptxGenJS for sales, kickoff, and design showcases.
social-reddit-card
Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
social-x-post-card
Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.