What does this skill do, and when should you use it?
This Agent Skill is the shadcn/ui-focused skill in the `stitch-build` plugin of google-labs-code/stitch-skills. It covers component discovery through shadcn MCP tools, CLI-based or manual installation, project initialization, theming, variants, composed components, UI blocks, accessibility, and troubleshooting. The repository as a whole requires a configured Stitch MCP server, while this skill also references shadcn MCP tools. It is best suited to frontend developers working with React and Tailwind CSS who want source-level control over their components.
Uses shadcn MCP tools to list components, retrieve metadata and demos, and inspect registry content; guides npx shadcn@latest create and npx shadcn@latest init; guides direct installation with npx shadcn@latest add [component-name] or manual retrieval and placement of source files in components/ui/; queries project registries and registry items; retrieves and installs UI blocks; provides patterns for themes, CSS variables, component variants, wrapper components, forms, dialogs, and data tables; and recommends type checking, linting, accessibility, visual, and responsive validation.
- A frontend developer starting a React and Tailwind project needs to initialize shadcn/ui and choose project configuration options.
- A developer building a form, dialog, data table, or similar interface wants to inspect component metadata and demos before integrating it.
- A team wants component source code in its own repository so it can customize behavior and styling without library bundle lock-in.
- A developer needs to search the standard shadcn catalog or a custom registry for suitable components.
- A frontend engineer is implementing themes, dark mode, component variants, or reusable wrapper components.
How do you install this skill?
- Because Bash, Write, and web_fetch are allowed, the agent should disclose and obtain confirmation before running npx or modifying project files, especially when downloading and executing external packages.
- verify-setup.sh is not a complete test: it may select the wrong CSS file and uses simple text matching for dependencies, so it cannot establish that a project runs correctly.
- There is no Chinese-language guidance or qualification of npm, npx, MCP, and overseas documentation reachability in mainland-China networks; users may need mirrors or alternative sources.
- Add skill-specific CI, a compatibility matrix, changelog, named maintenance responsibility, and rollback guidance for failed changes.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
React 18+Tailwind CSS 3.0+Radix UI or Base UIclass-variance-authorityclsxtailwind-merge
The skill is located at plugins/stitch-build/skills/shadcn-ui/SKILL.md. The repository README provides this marketplace command: codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities, followed by installation of the stitch-build plugin; it does not document a plugin command that installs only the shadcn-ui skill. The README also provides npx skills add google-labs-code/stitch-skills for selective skill installation. Configure and run Stitch MCP before use; the SKILL.md also declares shadcn MCP tools.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-build/skills/shadcn-ui" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
In a coding agent with the referenced MCP tools configured, use a concrete request such as Set up shadcn/ui and build a data table with sorting and filtering. For a new project, run npx shadcn@latest create; for an existing project, run npx shadcn@latest init; then add components with npx shadcn@latest add [component-name].
What are this skill's strengths and limitations?
- Keeps component source in the application codebase, giving developers full ownership.
- Supports choosing Radix UI or Base UI primitives and freely changing styling, behavior, and structure.
- Covers discovery, installation, registries, blocks, theming, customization, accessibility, and troubleshooting.
- Includes concrete quality-check recommendations for TypeScript, linting, accessibility, visual QA, and responsive behavior.
- Requires MCP setup, including Stitch MCP at the repository level and shadcn MCP for the documented discovery workflows.
- The source references shell, filesystem, and network tools but provides no test suite or evidence of platform-specific testing.
- Examples emphasize React, Tailwind CSS, and some Next.js configurations; broader framework coverage is not documented.
- The README does not document an exact command for installing only this individual skill.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| shadcn/ui Component Integration Guide this page | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Artifacts Builder — Multi-Component Frontend Artifact Suite | 53 · Use with care | ★ 3.1k | 8mo ago | MIT |
| Design Motion Principles | 62 · Recommended | ★ 1.3k | 4mo ago | MIT |
| OpenChamber Drag-to-Reorder Skill | 59 · Recommended | ★ 12k | 12d ago | MIT |
| Dark Theme React UI System ✓ Microsoft · Official | 52 · Use with care | ★ 2.7k | 3mo ago | MIT |
How did FollowSkills review this skill?
The skill requests Read, Write, Bash, web_fetch, and shadcn/MCP tools, and instructs use of npx installation that writes to the project. It lacks user confirmation, data-flow disclosure, rollback guidance, and sensitive-data handling, so only baseline trust credit is justified and least-privilege, confirmation, and recovery points are deducted.
Installation, configuration, troubleshooting, and a static verification script make the happy path reasonably clear. However, there are no skill-specific tests; the script has fragile behavior such as nondeterministic CSS_FILE selection and text-based dependency checks, while some version and Radix/Base UI statements may conflict. The score is therefore capped and reduced under static calibration.
The audience, scenarios, prerequisites, examples, and workflow are fairly clear across React, Next.js, Vite, and migration use cases. Non-fit boundaries, exclusion triggers, and Chinese-language guidance are missing; npm, npx, overseas documentation, and MCP reachability are also not qualified for mainland-China environments, so adaptability is reduced.
The SKILL.md, README, resource guides, examples described by the README, and verification script provide useful information architecture, installation notes, troubleshooting, examples, an Apache-2.0 license, and a security policy. Clear maintenance ownership, update path, changelog, and stable versioning are absent, and the listed examples/resources are not all present in the supplied evidence, so points are deducted.
The material provides directly reusable commands and code for discovery, installation, customization, migration, and quality checks, covering the core task. No actual skill output or end-to-end execution evidence is supplied, and users must adapt some guidance to project and dependency versions, so effectiveness remains below the static ceiling.
The evidence includes revision-pinned source material, a script, and repository CI, but the CI validates react-components rather than shadcn-ui. Official documentation links are listed, yet no execution results or independent reproduction evidence are supplied, warranting only limited static verifiability credit.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →