StealIt
Google Labs OfficialClaude skill for frontend development

Shadcn UI

shadcn-ui

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

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

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Shadcn UI

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /shadcn-ui.

It includes scripts that Claude may run on your computer, so skim them on GitHub before you install.

What the instructions cover

  1. 1Core Principles
  2. 2Component Discovery and Installation
  3. 3Project Setup
  4. 4Component Architecture
  5. 5Customization Best Practices
  6. 6Blocks and Complex Components
  7. 7Accessibility
  8. 8Common Patterns
  9. 9Troubleshooting
  10. 10Validation and Quality
  11. 11Resources
  12. 12Examples

Section headings from the skill's SKILL.md file.

What's inside · 10 files

  • README.md
  • SKILL.md
  • examples/auth-layout.tsx
  • examples/data-table.tsx
  • examples/form-pattern.tsx
  • resources/component-catalog.md
  • resources/customization-guide.md
  • resources/migration-guide.md
  • resources/setup-guide.md
  • scripts/verify-setup.sh

More from Google Labs

See all →

Design MD

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Design & UIGoogle Labs8.7k

Enhance Prompt

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better…

AI & AgentsGoogle Labs8.7k

React Vite Dashboard

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

FrontendGoogle Labs8.7k

Remotion

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

Video & MotionGoogle Labs8.7k

More Claude skills for frontend development

See all →

Vercel React Best PracticesTop pick

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…

FrontendVercel34k

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…

FrontendAnthropic187k

Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…

FrontendVercel34k

Vercel React View Transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…

FrontendVercel34k