stitch-shadcn-ui

What problem does it solve?

This Skill solves the frustration of integrating shadcn/ui into a React codebase by guiding you through discovery, installation, configuration, and customization while keeping your app consistent and accessible.

Core Features & Use Cases

• Component discovery & planning: Identify the right components/blocks and understand props, dependencies, and intended usage via shadcn MCP tooling.
• Setup & configuration validation: Verify or initialize components.json, Tailwind configuration, and import alias/path expectations to prevent common “module not found” and styling issues.
• Installation & integration: Install components using the shadcn CLI (or support manual integration) and ensure required dependencies are handled correctly.
• Customization & best practices: Apply theme customization (CSS variables), extend components using recommended wrapper patterns, and maintain accessibility and responsive behavior.
• Quality assurance checks: Validate TypeScript types, verify accessibility expectations, and ensure responsive behavior using deterministic, repeatable steps.

Quick Start

Ask the Skill to help you set up shadcn/ui in your project and add a data table component with sorting and filtering.