Stitch shadcn/ui Integration

This skill is a catalog-normalized import from https://github.com/google-labs-code/stitch-skills at commit 3f64079d75d025bc5890c73669f27c26a2d80b31, source path plugins/stitch-build/skills/shadcn-ui. The upstream control file was corrected for this workspace: the verified Stitch MCP surface here is design-system oriented, so screen lookup, screen generation, and screen editing tools must be used only when the current host explicitly exposes them.

When to Use This Skill

• Use when a Stitch design should be implemented with shadcn/ui components.
• The task involves Google Stitch project IDs, .stitch/ artifacts, DESIGN.md files, Stitch exports, or Stitch-specific validation.
• The broader stitch-design router points here as the narrowest workflow.

Workflow

1. Inspect for components.json, Tailwind config, path aliases, and existing components/ui patterns.
2. Use npx shadcn@latest init or npx shadcn@latest add <component> unless a verified shadcn MCP tool exists.
3. Map Stitch components to shadcn primitives such as Button, Card, Dialog, Sheet, Tabs, Table, Command, Form, and Select.
4. Keep components/ui close to generated source; build project-specific wrappers elsewhere.
5. Update CSS variables and Tailwind tokens to match DESIGN.md.
6. Verify light/dark themes, keyboard behavior, ARIA attributes, and responsive layouts.

Local Assets