shadcn-ui
shadcn/ui Expert
Comprehensive guide to building UIs with shadcn/ui -- the copy-paste component library built on Radix UI primitives and Tailwind CSS. Components are not installed as a dependency; they are copied into your project for full ownership and customization.
When to Apply
Use this skill when:
- Adding shadcn/ui components to a React or Next.js project
- Customizing component styles, variants, or behavior
- Setting up Tailwind CSS v4 theming with CSS variables
- Implementing dark mode with shadcn/ui
- Building accessible forms, dialogs, or data tables
- Choosing between shadcn/ui components and custom implementations
Core Concepts
shadcn/ui is NOT a Component Library
More from oimiragieo/agent-studio
gcloud-cli
Google Cloud CLI operations and resource management
966pyqt6-ui-development-rules
PyQt6 desktop GUI development rules -- signal/slot architecture, QSS theming, QThread concurrency, layout management, and cross-platform rendering. Enforces MVC separation and responsive UI patterns.
575filesystem
File system operations guidance - read, write, search, and manage files using Claude Code's built-in tools.
361chrome-browser
Browser automation with two integrations - Chrome DevTools MCP (always available, performance tracing) and Claude-in-Chrome extension (authenticated sessions, GIF recording). Use DevTools for testing/debugging, Claude-in-Chrome for authenticated workflows.
304slack-notifications
Slack messaging, channels, and notifications - send messages, manage channels, interact with users, upload files, and add reactions. Use for team communication, incident notifications, and workflow alerts.
252context-compressor
Compress large context before reasoning to reduce token usage while preserving evidence. Use this whenever the user mentions huge files, long prompts, RAG payloads, prompt caching, expensive sessions, codebase context, chat history compaction, or wants the same answer quality with fewer tokens.
147