majiayu000 shadcn/ui Skill
Expert assistance for building UIs with shadcn/ui components.
Capabilities
- Install and configure components
- Customize component styles
- Implement theming
- Extend components
- Integrate with forms
Usage Pattern
npx shadcn-ui@latest add button dialog form
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
</DialogHeader>
{/* Content */}
</DialogContent>
</Dialog>
Theming
:root {
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
}
Target Processes
- react-application-development
- nextjs-full-stack
- rapid-prototyping