Initial commit

skills/apply-shadcn/README.md

@@ -0,0 +1,36 @@
+# 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.