shadcn-ui
shadcn/ui Skill
When to use
- Creating or modifying UI components.
Checklist
- Prefer shadcn/ui primitives over bespoke components.
- Use cva variants for repeated styles.
- Keep focus states and aria attributes intact.
- Use Tailwind utilities first; avoid ad-hoc CSS.
Tooling
- Use shadcn MCP for component API/variant guidance.
More from huynhsang2005/blog-tanstack
framer-motion
Create smooth, performant animations with framer-motion. Use when building page transitions, component animations, or gesture-based interactions.
18tanstack-form
Use TanStack Form for complex forms with Zod validation. Use when building non-trivial forms or admin editors.
10zustand
Use Zustand for client state in this repo. Use when you need shared client state, derived selectors, or cross-component UI coordination.
4tanstack-query
Use TanStack Query with SSR/hydration in this repo. Use when creating queries/mutations, defining query keys, integrating loaders, or troubleshooting cache/hydration issues.
4zod-boundaries
Use Zod to validate and type inputs at boundaries (route params/search params, server functions, DB access). Use when adding validation or debugging input issues.
4supabase
Work with Supabase Postgres + RLS safely. Use when modifying schema/RLS, writing queries, building server-side data access, or debugging backend issues.
3