37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
# 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.
|