gh-otoshek-claude-code-toolkit/skills/apply-shadcn/README.md

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.