skills.rest
campfirein
campfireinOFFICIAL
Explore all skills by this author →
GitHub

shadcn

Manage shadcn/ui component lifecycle and enforce composition rules in React projects.

1|Updated Mar 13, 2026
Search Tags:#accessibility#tailwind css#shadcn#component management#react ui#preset switching
One-click install
npx skills add https://github.com/campfirein/byterover-packages --skill shadcn-campfirein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/campfirein/byterover-packages/tree/main/ui/.agents/skills/shadcn
Command: npx skills add https://github.com/campfirein/byterover-packages --skill shadcn-campfirein

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the guesswork and inconsistencies of manually managing shadcn/ui components in React projects, ensuring all UI code follows project-specific configurations, accessibility standards, and composition best practices without requiring users to memorize complex API rules or fix common import and styling errors.

Core Features & Use Cases

  • Component Lifecycle Management: Add, search, update, and debug shadcn/ui components from official and community registries, with automatic handling of project-specific import aliases, icon libraries, and Tailwind configurations.
  • Best Practice Enforcement: Enforces strict rules for component composition, semantic Tailwind styling, form layout, and overlay accessibility to prevent common UI bugs and maintain code consistency across the project.
  • Use Case Example: When building a settings page for a Next.js app, use this skill to quickly add pre-built Form, ToggleGroup, and Card components that match your project's base-nova preset and lucide icon library, without writing custom markup or fixing invalid component structure.

Quick Start

Use the shadcn skill to add a Button and Card component to your current project that matches your existing theme and component import aliases.

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn/ui components to a React project without breaking import paths?▼

To add shadcn/ui components without import errors, the system automatically applies project-specific import aliases and Tailwind configurations during component generation. This ensures new components integrate seamlessly with existing React project structures without manual path corrections.

How do I enforce accessibility standards when composing shadcn/ui components?▼

To enforce accessibility standards with shadcn/ui components, the system applies strict rules for component composition, semantic Tailwind styling, and overlay accessibility. This prevents common UI bugs and maintains code consistency across your React project automatically.

Can I use shadcn/ui components from community registries with my existing Tailwind CSS preset?▼

Yes, you can use community registry components with your Tailwind CSS preset. The system handles preset switching and registry searches while automatically aligning third-party components with your project-specific base-nova preset, icon libraries, and Tailwind versions.

What is the best way to manage shadcn/ui component updates and debugging in Next.js?▼

The best way to manage shadcn/ui component updates and debugging in Next.js is through automated lifecycle management. The system handles searching, updating, and debugging components while enforcing project-specific configurations and composition best practices.

Why does my shadcn/ui form layout generate invalid component structure?▼

Invalid shadcn/ui form component structure occurs when composition rules are not enforced. The system eliminates this by applying strict rules for form layout, semantic Tailwind styling, and component composition to prevent invalid markup and maintain consistency.

Do I need to manually configure shadcn/ui components to match my project's icon library?▼

No, manual configuration is not needed. The system automatically handles project-specific import aliases, icon libraries like lucide, and Tailwind configurations when adding or updating shadcn/ui components, ensuring everything matches your existing setup.

Related Skills

Explore More Software Engineering Skills→
neozenithneozenith
2

vite-adk-stack

Integrate Google ADK with Vite, React, TypeScript, Tailwind CSS, and Shadcn UI.

Community
Advanced
santanapolsantanapol

shadcn

Manage shadcn/ui component implementation and project configuration in React design systems.

Community
Advanced
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic
braswelljrbraswelljr
8

shadcn

Manage shadcn/ui components via CLI with styling and accessibility validation.

Community
Advanced