shadcn-ui
nexu-io/open-design
Build accessible UI components with shadcn/ui, integrated with the Stitch design loop.
What is shadcn-ui?
shadcn-ui is a skill for constructing structured, accessible UI components using the shadcn/ui library. Use it when you need to rapidly ship well-designed components as part of a design system workflow, particularly in conjunction with the Stitch design loop.
- Build UI components with shadcn/ui
- Create structured, accessible components
- Integrate with the Stitch design loop
- Ship components quickly within a design-system workflow
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 paths
- 2.Install the upstream bundle into your active agent's skills directory
- 3.Invoke the skill by name (shadcn-ui) or use trigger phrases: 'shadcn', 'shadcn ui', 'shadcn components', or 'accessible components'
Use cases
- Rapidly prototyping accessible UI components for a design system
- Building component libraries with shadcn/ui as part of a Stitch workflow
- Creating structured components that follow accessibility best practices
- Shipping production-ready UI components in a design-system context
- UI/UX designers
- Frontend developers
- Design system maintainers
- Teams using the Stitch design loop
shadcn-ui FAQ
This skill pairs shadcn/ui with the Stitch design loop, enabling agents to build and ship structured, accessible components as part of a cohesive design-system workflow.
The upstream repository is at https://github.com/google-labs-code/skills; inspect its README for exact paths and original assets.
Ask your agent to use the skill by its name 'shadcn-ui' or any of the trigger phrases: '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 OpenDesign 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
Create animated GIFs optimized for Slack with size constraints and animation primitives.
slides
Create and edit .pptx presentation decks with PptxGenJS for sales, briefs, and showcases.
social-reddit-card
Realistic Reddit post card with vote rail for video overlays and social sharing.
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls for overlays and homepages.
social-x-post-card
Realistic X post card with engagement metrics for video overlays and shareable images.