shadcn-ui
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
Use the shadcn MCP tools to explore the component catalog and Registry Directory:
- List all components: Use
list_componentsto see the complete catalog - Get component metadata: Use
get_component_metadatato understand props, dependencies, and usage
More from diegosouzapw/awesome-omni-skill
music-assistant
Control Home Assistant Music Assistant - browse library, search, play, manage preferences and moods.
12agent-code-generator
Generates Agent definitions (.md files) based on user intent and standard templates.
6terragrunt-generator
Comprehensive toolkit for generating best practice Terragrunt configurations (HCL files) following current standards and conventions. Use this skill when creating new Terragrunt resources (root configs, child modules, stacks, environment setups), or building multi-environment Terragrunt projects.
6_backend-mastery
Master backend architectures, REST API design, microservices, and server-side development across multiple languages. Use this as a central index to access specialized sub-skills.
6api contract sync manager
Validate OpenAPI, Swagger, and GraphQL schemas match backend implementation. Detect breaking changes, generate TypeScript clients, and ensure API documentation stays synchronized. Use when working with API spec files (.yaml, .json, .graphql), reviewing API changes, generating frontend types, or validating endpoint implementations.
5upstash/workflow typescript sdk skill
Lightweight guidance for using the Upstash Workflow SDK to define, trigger, and manage workflows. Use this Skill whenever a user wants to create workflow endpoints, run steps, or interact with the Upstash Workflow client.
5