bulletproof-react-patterns
Bulletproof React Patterns
Architecture patterns for building scalable, maintainable React applications. Based on bulletproof-react.
Core References
| Topic | Description | Reference |
|---|---|---|
| Project Structure | Feature-based organization, unidirectional architecture, ESLint enforcement | project-structure |
| Components & Styling | Component hierarchy, wrapping 3rd party libs, headless vs styled libraries | components-and-styling |
| API Layer | API client, request declarations, query/mutation hook patterns | api-layer |
| State Management | Component, application, server cache, form, and URL state categories | state-management |
| Error Handling | Error boundaries, API errors, error tracking with Sentry | error-handling |
| Testing | Unit, integration, e2e strategies with Vitest, Testing Library, Playwright, MSW | testing |
| Project Standards | ESLint, Prettier, TypeScript, Husky, absolute imports, file naming | project-standards |
| Security | Authentication, token storage, XSS prevention, RBAC/PBAC authorization | security |
| Performance | Code splitting, data prefetching, state optimization, children pattern | performance |
Project Structure
More from grahamcrackers/skills
react-aria-components
React Aria Components patterns for building accessible, unstyled UI with composition-based architecture. Covers component structure, styling with Tailwind and CSS, render props, collections, forms, selections, overlays, and drag-and-drop. Use when building accessible components, using react-aria-components, creating design systems, or when the user asks about React Aria, accessible UI primitives, or headless component libraries.
17clean-code-principles
Clean code principles for readable, maintainable TypeScript and React codebases. Covers naming, functions, abstraction, composition, error handling, comments, and code smells. Use when writing new code, refactoring, reviewing code quality, or when the user asks about clean code, readability, or maintainability.
10typescript-best-practices
Core TypeScript conventions for type safety, inference, and clean code. Use when writing TypeScript, reviewing TypeScript code, creating interfaces/types, or when the user asks about TypeScript patterns, conventions, or best practices.
9tanstack-query
TanStack Query v5 patterns for server state management, caching, mutations, optimistic updates, and query organization. Use when working with TanStack Query, React Query, server state, data fetching hooks, or when the user asks about caching strategies, query invalidation, or mutation patterns.
8zustand
Zustand state management patterns for React including store design, selectors, slices, middleware (immer, persist, devtools), and async actions. Use when managing client-side state, creating stores, working with Zustand, or when the user asks about global state management, store patterns, or state persistence.
7react-best-practices
Modern React 19 patterns for components, hooks, state management, performance, and project structure. Use when writing React components, reviewing React code, designing component APIs, or when the user asks about React conventions, architecture, or best practices.
7