shadcn-ui-best-practices
shadcn/ui Best Practices
Use this skill for shadcn/ui authoring, review, architecture decisions, UI cleanup, and modernization. Center the answer on the fact that shadcn/ui ships source code you own: prefer composition, semantic tokens, and maintainable project conventions over one-off styling hacks.
Use This Skill When
- Building or reviewing shadcn/ui interfaces, pages, forms, overlays, or feature UIs
- Deciding between existing shadcn primitives and custom markup
- Setting up or auditing
components.json, aliases, Tailwind v4 wiring, or theme tokens - Debugging broken composition, invalid states, trigger APIs, or over-customized styling
- Modernizing older shadcn patterns such as deprecated
toastusage or brittle color overrides - Organizing feature code around
components/ui, app-level feature components, and local state boundaries
Out Of Scope
- Registry publishing or MCP workflows unless the user's main problem is specifically about registry authoring
- Framework-specific deployment or routing details that are not materially affecting shadcn usage
- Replacing shadcn/ui with a different component system
More from mkgp-dev/codex-skills
tanstack-query-best-practices
Best-practice guidance for designing, reviewing, debugging, and modernizing TanStack Query v5 usage across React, Preact, Solid, Vue, Svelte, and Angular. Use this skill whenever the user is working with TanStack Query or React Query, `QueryClient` setup, `useQuery`, `useMutation`, `useInfiniteQuery`, query keys, invalidation, optimistic updates, prefetching, hydration, cache tuning, stale UI, or server-state boundaries and needs current guidance instead of stale v4-era patterns.
9zod-best-practices
Core Zod schema design, validation, migration, and review guidance for TypeScript applications. Use this skill whenever the user is writing Zod schemas, reviewing Zod code, modernizing deprecated Zod patterns, choosing parsing or error-handling APIs, reasoning about type inference, composing advanced schemas, or asking for current best practices that should avoid stale Zod guidance.
8tanstack-router-best-practices
Best-practice guidance for designing, reviewing, debugging, and modernizing TanStack Router routing in React apps, especially file-based route trees, `Link` and `useNavigate`, `validateSearch`, `beforeLoad`, loaders, `notFoundComponent`, auth guards, code splitting, and TanStack Query integration. Use this whenever the user is working with `@tanstack/react-router`, TanStack Start routing, route organization, URL state, or navigation behavior and needs current v1 guidance instead of stale class-based or React Router patterns.
8zustand-state-management
Best-practice guidance for designing, reviewing, and modernizing Zustand state in modern TypeScript React apps. Use this skill whenever the user is writing or reviewing `create`, `createStore`, `useStore`, `useShallow`, `persist`, `devtools`, `subscribeWithSelector`, `createWithEqualityFn`, slices, Next.js store setup, hydration behavior, or selector-related rerender problems in Zustand v5 code.
7changelog-maintenance
Best-practice guidance for creating, reviewing, and maintaining high-signal `CHANGELOG.md` entries for versioned software projects. Use this skill whenever the user wants to add or rewrite changelog entries, organize release history, turn completed work into structured version notes, decide what belongs in `Added`/`Changed`/`Fixed`/`Deprecated`/`Removed`/`Security`, or improve noisy release notes into maintainable repository changelogs.
7react-hook-form-with-zod
Best-practice guidance for building forms with React Hook Form in modern TypeScript React apps, with Zod integration when schema validation is useful. Use this skill whenever the user is writing or reviewing `useForm`, `register`, `useController`, `Controller`, `useFieldArray`, `useWatch`, `useFormState`, `FormProvider`, `useFormContext`, `defaultValues`, `setValue`, `reset`, `trigger`, `setError`, or accessible React Hook Form validation flows, including cases where Zod and `zodResolver` should be added or modernized.
1