---
name: valec3/frontend-ui-shadcn
source: https://app.decimal.ai/s/valec3-frontend-ui-shadcn@1/SKILL.md
source_sha256: 230523083201
---

# Frontend Ui Shadcn

## When to use this skill
- Using shadcn/ui components
- Customizing shadcn components
- Building with shadcn design system

## Workflow
- [ ] Install shadcn/ui
- [ ] Add components via CLI
- [ ] Customize in components/ui
- [ ] Apply design tokens
- [ ] Compose reusable patterns

## Instructions

### Installation
```bash
npx shadcn-ui@latest init
npx shadcn-ui@latest add button
```

### Usage
```typescript
import { Button } from '@/components/ui/button';

<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
```

### Customization
Components are in `components/ui/` - modify directly.

## Resources
- Components are yours to own
- Built on Radix UI primitives
- Fully customizable with Tailwind