learn-skills

Use when creating API requests, data fetching hooks, or mutations. Defines the single API client pattern, react-query query/mutation structures, Zod validation, and data prefetching.

Use when building any UI component. Defines component organization, composition patterns, Tailwind CSS styling, ShadCN UI patterns, form abstractions, and Storybook conventions.

Use when building, deploying, or setting up CI/CD pipelines. Covers platform recommendations, environment variables, build configuration, CDN caching, and preview deployments.

Use when implementing error boundaries, API error handling, or production error tracking. Covers centralized API error interceptors, multi-level error boundaries, React Query error states, and Sentry integration.

Use when optimizing application performance. Covers route-level code splitting, component/state render optimizations, lazy loading, data prefetching, image optimization, and Web Vitals monitoring.

Use when configuring linting, formatting, naming conventions, or project tooling. Covers ESLint rules, Prettier config, TypeScript strict mode, Husky pre-commit hooks, absolute imports, and file naming conventions.

Use when creating new features, files, or folders. Defines the feature-driven directory layout, unidirectional import rules, and file placement decisions.

Use when implementing auth flows, route protection, role-based access control, or XSS prevention. Covers JWT auth, react-query-auth, RBAC/PBAC, and input sanitization.

Use when managing any kind of state. Defines the 5 state categories (component, application, server cache, form, URL), their tools, and a decision tree for choosing the right approach.

Use when writing any type of test. Defines the integration-first testing strategy, Vitest/Testing Library/Playwright/MSW tooling, test organization, and mock patterns.