# Apply shadcn Skill

Style existing React components/pages using shadcn/ui while respecting the project’s custom Tailwind theme tokens.

## What This Skill Does
- Creates a todo list of target files to style (one task per component/page).
- Installs needed shadcn components (card, input, button, table, label, separator, navigation-menu, etc.).
- Pulls usage examples from the shadcn registry via MCP tools to match correct patterns/props.
- Replaces plain HTML with shadcn/ui components, keeping logic intact and using custom CSS variables (`--color-*`) from `src/index.css`.
- Verifies builds after styling changes.

## Prerequisites
- React + Vite project already set up with Tailwind and shadcn tokens (see `tailwind-setup` skill).
- Custom theme variables present in `frontend/src/index.css`.
- shadcn CLI available (`npx shadcn@latest`).

## Workflow (high level)
1) Make a todo list: one task per file that needs styling.
2) Install required shadcn components (`npx shadcn@latest add ...`) based on needs.
3) For each file: mark task in_progress → read file → fetch examples with MCP (`mcp__shadcn__get_item_examples_from_registries`) → apply shadcn components and theme vars → mark task completed.
4) Run `npm --prefix ./frontend run build` to ensure imports/JSX compile.

## Theme Integration Tips
- Use Tailwind arbitrary values with custom vars, e.g. `bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)]`.
- Keep functionality and routing intact; only swap UI primitives.
- Add `data-testid` if tests rely on stable selectors.

## Outputs/Artifacts
- Styled components/pages using shadcn/ui.
- Todo list reflecting completed styling tasks.
- Successful build verification.

## Notes & Gotchas
- Always check component availability via MCP search before `shadcn add`.
- Maintain alias usage (`@/components`, `@/lib/utils`, etc.) consistent with project.
- If existing CSS is important, migrate classes onto shadcn components rather than dropping them.