🎯

shadcn-ui

🎯Skill

from google-labs-code/stitch-skills

What it does

Provides expert guidance for discovering, installing, and customizing shadcn/ui components with full code ownership and zero runtime overhead.

Overview

Shadcn-UI is a skill from google-labs-code/stitch-skills that provides expert guidance for discovering, installing, and customizing shadcn/ui components. shadcn/ui is a collection of beautifully designed, accessible components built with Radix UI or Base UI and Tailwind CSS that you copy into your project.

Key Features

Component discovery with list_components, get_component_metadata, and get_component_demo MCP tools
Direct installation via npx shadcn@latest add [component-name] with automatic dependency management
Support for custom registries and the Registry Directory
Full component customization since code lives in your project, not in node_modules
Support for multiple visual styles: Vega, Nova, Maia, Lyra, Mira, and classic themes

Who is this for?

Frontend developers building React applications who want to use shadcn/ui components with AI-assisted discovery, installation, and customization guidance.

📦

Same repository

google-labs-code/stitch-skills(8 items)

shadcn-ui

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add google-labs-code/stitch-skills --skill shadcn-ui

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add google-labs-code/stitch-skills --skill shadcn-ui

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/shadcn-ui/SKILL.md

SKILL.md

32,289Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

More from this repository7

🎯

react:components🎯Skill

A skill from Google Labs that converts Stitch-generated screens into React component systems with automated validation and design token consistency, compatible with Claude Code, Gemini CLI, and other coding agents.

🎯

design-md🎯Skill

A skill from Google Labs that analyzes Stitch projects and generates DESIGN.md files documenting design systems in semantic, natural language. Extracts color palettes, typography, geometry, and visual patterns from existing screens.

🎯

stitch-loop🎯Skill

A skill for Google Labs Stitch that enables autonomous, iterative website building through a baton-passing loop with Stitch MCP page generation and optional Chrome DevTools verification.

🎯

enhance-prompt🎯Skill

Optimizes and refines AI prompts by analyzing structure, clarity, context, and potential response quality to improve interaction effectiveness.

🎯

remotion🎯Skill

Generate walkthrough videos from Stitch app designs using Remotion with smooth transitions, zoom effects, and text overlays

🎯

stitch-design🎯Skill

A Google Labs skill that serves as the unified entry point for Stitch design work, handling UI/UX prompt enhancement, design system synthesis, and high-fidelity screen generation via the Stitch MCP server.

🎯

taste-design🎯Skill

Semantic design system skill that generates DESIGN.md files for Google Stitch screen generation, encoding visual atmosphere, a banned-color list (no AI purple/neon), typographic architecture (no generic Inter/Times), asymmetric layout rules, and perpetual micro-motion — so Stitch outputs premium, non-generic UI instead of the default AI-slop look.