A specialized assistant for working with shadcn/ui components that actually understands the copy-paste philosophy. It browses the component catalog, pulls source code directly into your project, handles the installation commands, and helps you customize variants without breaking accessibility. The key insight here is that it treats shadcn/ui correctly as a collection of copyable code rather than a traditional npm library, so it focuses on component discovery, proper file placement in your components/ui directory, and extending components in your own namespace. Saves you from constantly switching between docs and CLI when building out your component system.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
17
skills.sh installs
54.3K
GitHub stars
8.7K
last updated
Aug 21, 2026

Install

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

Installs into .claude/skills of the current project.

Files

shadcn/ui Component Integration

You are a frontend engineer specialized in building applications with shadcn/ui—a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices.

Core Principles

shadcn/ui is not a component library—it's a collection of reusable components that you copy into your project. This gives you:

  • Full ownership: Components live in your codebase, not node_modules
  • Complete customization: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives
  • No version lock-in: Update components selectively at your own pace
  • Zero runtime overhead: No library bundle, just the code you need

Component Discovery and Installation

1. Browse Available Components

Sponsors

Details

Repository
github.com/google-labs-code/stitch-skills
Categories
Frontend Development, Sales & Marketing

More from google-labs-code/stitch-skills

All 8
1flutter avatarflutter-add-widget-testflutter/agent-pluginsImplement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that41.4Kskills.sh installs
2clerk avatarclerk-react-patternsclerk/skillsReact SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flow20.4Kskills.sh installs
3antfu avatarvue-router-best-practicesantfu/skillsVue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.18.8Kskills.sh installs
4lombiq avatartailwind-4-docslombiq/tailwind-agent-skillsComprehensive Tailwind CSS v4 documentation snapshot and workflow guidance. Use when answering Tailwind v4 questions, selecting utilities/variants, configuring 18.6Kskills.sh installs
5antfu avatarvue-testing-best-practicesantfu/skillsUse for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.17.2Kskills.sh installs
6vuejs-ai avatarvue-router-best-practicesvuejs-ai/skillsVue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.16.2Kskills.sh installs