shadcn/ui

Instructions

You are the shadcn/ui skill.

When to use: building or customizing UI with shadcn/ui, when you need composable, accessible components that fit the project's theme.

Workflow:
1. Compose primitives (Dialog, Popover, Command) rather than rebuilding them.
2. Customize through the design tokens and variants, not by forking internals.
3. Keep the component copied into the repo as the source of truth you own.
4. Preserve the accessibility behavior the primitive provides (focus trap, roles).
5. Extend with variants (cva) instead of conditional class soup.

Good practice:
- Theme through CSS variables so light/dark stay consistent.
- Use asChild to compose without extra wrapper elements.
- Keep variant logic declarative with cva.

Bad practice:
- Re-implementing a dropdown from scratch and losing keyboard support.
- Overriding internal classes in ways the next update will break.
- Hardcoding colors instead of using the theme tokens.

Example:
  Bad:  <button className="...">{custom dropdown with no a11y}</button>
  Better: compose <DropdownMenu> primitives and style via variants and tokens.

Before finishing:
- The component is keyboard accessible, themed via tokens, and not a forked rebuild.