Community-Driven Rules for Cursor

Next.js 14 App Router Best Practices Ultimate guide for building production-ready applications with Next.js 14 App Router, React Server Components, and modern web development patterns. Data Fetching Patterns Server Component Data Fetching Fetch data directly in server components using async/await No need for useState or useEffect for initial data loading Example: Parallel Data Fetching Use Promise.all() to fetch multiple data sources simultaneously Prevents waterfall requests and improves performance Example: Client-Side Data Fetching Use SWR or React Query for client-side data fetching when needed Implement proper loading and error states Only use for user-triggered actions or real-time updates Special Files and Conventions Loading UI Create files for instant loading states Use loading boundaries to show progressive loading Implement skeleton components for better perceived performance Error Handling Use files for error boundaries at route level Implement for custom 404 pages Add proper error recovery mechanisms Route Handlers (API Routes) Create API endpoints using files in app directory Support multiple HTTP methods in a single file Example: State Management Server State vs Client State Keep server state on the server (in server components) Use client state only for UI-specific state (modals, form inputs) Consider React Context or Zustand for complex client state Form Handling Use Server Actions for form submissions when possible Implement proper form validation and error handling Example: Testing Component Testing Test server components by testing their data fetching logic Use React Testing Library for client component testing Mock external API calls appropriately E2E Testing Use Playwright or Cypress for end-to-end testing Test critical user journeys and form submissions Implement visual regression testing for UI consistency Follow these patterns to build scalable, performant, and maintainable Next.js 14 applications.

Next.js 14 App Router Best Practices Ultimate guide for building production-ready applications with Next.js 14 App Router, React Server Components, and modern web development patterns. Data Fetching Patterns Server Component Data Fetching Fetch data directly in server components using async/await No need for useState or useEffect for initial data loading Example: Parallel Data Fetching Use Promise.all() to fetch multiple data sources simultaneously Prevents waterfall requests and improves performance Example: Client-Side Data Fetching Use SWR or React Query for client-side data fetching when needed Implement proper loading and error states Only use for user-triggered actions or real-time updates Special Files and Conventions Loading UI Create files for instant loading states Use loading boundaries to show progressive loading Implement skeleton components for better perceived performance Error Handling Use files for error boundaries at route level Implement for custom 404 pages Add proper error recovery mechanisms Route Handlers (API Routes) Create API endpoints using files in app directory Support multiple HTTP methods in a single file Example: State Management Server State vs Client State Keep server state on the server (in server components) Use client state only for UI-specific state (modals, form inputs) Consider React Context or Zustand for complex client state Form Handling Use Server Actions for form submissions when possible Implement proper form validation and error handling Example: Testing Component Testing Test server components by testing their data fetching logic Use React Testing Library for client component testing Mock external API calls appropriately E2E Testing Use Playwright or Cypress for end-to-end testing Test critical user journeys and form submissions Implement visual regression testing for UI consistency Follow these patterns to build scalable, performant, and maintainable Next.js 14 applications.

React Hooks Expert Master React Hooks patterns, custom hooks, and state management with these comprehensive guidelines. Essential Hook Patterns State Management useState for Local Component State useReducer for Complex State Logic Side Effects useEffect with Proper Cleanup useContext for Consuming Context Values Custom Hooks Create Reusable Logic Extract complex logic into custom hooks Prefix custom hooks with 'use' Return consistent data structures Handle Loading, Error, and Data States Best Practices Checklist [ ] Hooks called at top level only [ ] Proper dependency arrays in useEffect/useMemo/useCallback [ ] Custom hooks for reusable logic [ ] Cleanup effects to prevent memory leaks [ ] Memoization for performance optimization [ ] Consistent return patterns from custom hooks

React Query Rules This document outlines the ultimate set of rules and best practices for using React Query effectively in production environments. Organizing Queries Normalize Query Keys Create a helper to avoid duplication. Example: Encapsulate Queries in Custom Hooks Define reusable hooks like or . Keeps components clean and ensures consistent query usage across the app. Set and Wisely : How long data is considered "fresh". Set based on data volatility. : How long unused data stays cached before garbage collection. Avoid Over-Fetching Use for conditional queries. Example: wait until is available. Data Synchronization Invalidate Queries Intentionally Use after mutations that affect cached data. Narrow scope: invalidate only related queries instead of all queries. Background Refetching Use and sparingly. Enable only when data must stay real-time fresh. Error & Loading States Centralize Error Handling Use React Query's global handler. Provide user-friendly error boundaries in the UI. Never Block UI Avoid full-page global spinners. Use skeletons, placeholders, or incremental loading instead. Security & Reliability Never Expose Sensitive Data in Query Keys Query keys should be serializable and safe to log. Use Retry Strategically Default retries may harm UX on destructive operations. Configure retries per-query to fit the use case. Follow these rules to keep your React Query setup clean, scalable, and production-ready.

React Testing Library Best Practices Comprehensive guide for testing React applications with React Testing Library, focusing on user-centric testing patterns and best practices. Component Testing Patterns Form Testing Test form validation, submission, and error handling Use userEvent for realistic user interactions Test accessibility of form elements Example form testing: Testing Custom Hooks Use renderHook for testing custom hooks in isolation Test hook state changes and side effects Mock dependencies and external APIs Example hook testing: Advanced Testing Patterns Testing Error Boundaries Test error boundary behavior Verify error reporting and fallback UI Test error recovery mechanisms Example error boundary testing: Performance Testing Test component rendering performance Verify memoization and optimization Test for unnecessary re-renders Example performance testing: Summary Checklist [ ] Test user behavior, not implementation details [ ] Use semantic queries that mirror user interactions [ ] Write tests that promote accessible markup [ ] Handle async operations with waitFor and findBy queries [ ] Test form validation, submission, and error handling [ ] Use MSW for realistic API mocking [ ] Test custom hooks in isolation with renderHook [ ] Write integration tests for user workflows [ ] Test error boundaries and error recovery [ ] Verify performance optimizations work correctly [ ] Set up proper test environment and utilities [ ] Organize tests logically with clear descriptions [ ] Keep tests focused, independent, and maintainable [ ] Mock external dependencies appropriately [ ] Test loading states, error states, and edge cases Follow these practices to write comprehensive, maintainable tests that give confidence in your React applications and promote better accessibility and user experience.

Remix Fullstack This document provides comprehensive guidelines for remix fullstack development and best practices. Data Loading Loader Loader functions for data fetching Implement proper loader functions for data fetching Follow best practices for optimal results Parallel Parallel route loading Implement proper parallel route loading Follow best practices for optimal results Error Error boundaries for data errors Implement proper error boundaries for data errors Follow best practices for optimal results Deferred Deferred data with React Suspense Implement proper deferred data with react suspense Follow best practices for optimal results Cache Cache headers and optimization Implement proper cache headers and optimization Follow best practices for optimal results Routing & Navigation Nested Nested routing architecture Implement proper nested routing architecture Follow best practices for optimal results Dynamic Dynamic route parameters Implement proper dynamic route parameters Follow best practices for optimal results Route Route conventions and organization Implement proper route conventions and organization Follow best practices for optimal results Programmatic Programmatic navigation Implement proper programmatic navigation Follow best practices for optimal results Route-based Route-based code splitting Implement proper route-based code splitting Follow best practices for optimal results Styling Approaches CSS CSS imports and processing Implement proper css imports and processing Follow best practices for optimal results Tailwind Tailwind CSS integration Implement proper tailwind css integration Follow best practices for optimal results CSS CSS Modules support Implement proper css modules support Follow best practices for optimal results Styled Styled components patterns Implement proper styled components patterns Follow best practices for optimal results Theme Theme management Implement proper theme management Follow best practices for optimal results Database Integration Prisma Prisma ORM integration Implement proper prisma orm integration Follow best practices for optimal results Database Database connection management Implement proper database connection management Follow best practices for optimal results Query Query optimization Implement proper query optimization Follow best practices for optimal results Migration Migration strategies Implement proper migration strategies Follow best practices for optimal results Data Data modeling patterns Implement proper data modeling patterns Follow best practices for optimal results Performance Optimization Asset Asset optimization and bundling Implement proper asset optimization and bundling Follow best practices for optimal results Prefetching Prefetching strategies Implement proper prefetching strategies Follow best practices for optimal results Cache Cache optimization Implement proper cache optimization Follow best practices for optimal results Image Image optimization Implement proper image optimization Follow best practices for optimal results Core Core Web Vitals improvement Implement proper core web vitals improvement Follow best practices for optimal results Testing Strategies Unit Unit testing components and utilities Implement proper unit testing components and utilities Follow best practices for optimal results Integration Integration testing routes Implement proper integration testing routes Follow best practices for optimal results End-to-end End-to-end testing with Playwright Implement proper end-to-end testing with playwright Follow best practices for optimal results Performance Performance testing Implement proper performance testing Follow best practices for optimal results Accessibility Accessibility testing Implement proper accessibility testing Follow best practices for optimal results Progressive Enhancement JavaScript-optional JavaScript-optional functionality Implement proper javascript-optional functionality Follow best practices for optimal results Graceful Graceful degradation Implement proper graceful degradation Follow best practices for optimal results Accessibility-first Accessibility-first development Implement proper accessibility-first development Follow best practices for optimal results Mobile-first Mobile-first responsive design Implement proper mobile-first responsive design Follow best practices for optimal results Performance Performance on slow networks Implement proper performance on slow networks Follow best practices for optimal results Developer Experience TypeScript TypeScript integration Implement proper typescript integration Follow best practices for optimal results Hot Hot module replacement Implement proper hot module replacement Follow best practices for optimal results Development Development server features Implement proper development server features Follow best practices for optimal results Debugging Debugging techniques Implement proper debugging techniques Follow best practices for optimal results Code Code organization patterns Implement proper code organization patterns Follow best practices for optimal results Summary Checklist [ ] Core principles implemented [ ] Best practices followed [ ] Performance optimized [ ] Security measures in place [ ] Testing strategy implemented [ ] Documentation completed [ ] Monitoring configured [ ] Production deployment ready Follow these comprehensive guidelines for successful remix fullstack implementation.

Angular Modern This document provides comprehensive guidelines for angular modern development and best practices. Component Development OnPush OnPush change detection strategy Implement proper onpush change detection strategy Follow best practices for optimal results Input/Output Input/Output decorators for communication Implement proper input/output decorators for communication Follow best practices for optimal results ViewChild ViewChild and ContentChild for DOM access Implement proper viewchild and contentchild for dom access Follow best practices for optimal results Lifecycle Lifecycle hooks implementation Implement proper lifecycle hooks implementation Follow best practices for optimal results Reactive Reactive forms with FormBuilder Implement proper reactive forms with formbuilder Follow best practices for optimal results Routing & Navigation Angular Angular Router with lazy loading Implement proper angular router with lazy loading Follow best practices for optimal results Route Route guards for authentication Implement proper route guards for authentication Follow best practices for optimal results Resolver Resolver for data preloading Implement proper resolver for data preloading Follow best practices for optimal results Nested Nested routes and child components Implement proper nested routes and child components Follow best practices for optimal results Route Route parameters and query strings Implement proper route parameters and query strings Follow best practices for optimal results Forms & Validation Reactive Reactive forms with FormGroup/FormControl Implement proper reactive forms with formgroup/formcontrol Follow best practices for optimal results Custom Custom validators Implement proper custom validators Follow best practices for optimal results Cross-field Cross-field validation Implement proper cross-field validation Follow best practices for optimal results Dynamic Dynamic form generation Implement proper dynamic form generation Follow best practices for optimal results Async Async validation Implement proper async validation Follow best practices for optimal results Performance Optimization OnPush OnPush change detection Implement proper onpush change detection Follow best practices for optimal results Lazy Lazy loading modules and components Implement proper lazy loading modules and components Follow best practices for optimal results Tree Tree shaking and bundle optimization Implement proper tree shaking and bundle optimization Follow best practices for optimal results Image Image optimization with NgOptimizedImage Implement proper image optimization with ngoptimizedimage Follow best practices for optimal results Virtual Virtual scrolling for large lists Implement proper virtual scrolling for large lists Follow best practices for optimal results Build & Deployment Angular Angular CLI for project management Implement proper angular cli for project management Follow best practices for optimal results Environment Environment configurations Implement proper environment configurations Follow best practices for optimal results Bundle Bundle analysis and optimization Implement proper bundle analysis and optimization Follow best practices for optimal results PWA PWA features with service workers Implement proper pwa features with service workers Follow best practices for optimal results Docker Docker containerization Implement proper docker containerization Follow best practices for optimal results Summary Checklist [ ] Core principles implemented [ ] Best practices followed [ ] Performance optimized [ ] Security measures in place [ ] Testing strategy implemented [ ] Documentation completed [ ] Monitoring configured [ ] Production deployment ready Follow these comprehensive guidelines for successful angular modern implementation.

Angular Standalone Components Best Practices Comprehensive guide for building modern Angular applications with standalone components, signals, and the latest Angular patterns. Modern Template Syntax Control Flow with @if, @for, @switch Use new control flow syntax instead of structural directives Implement proper track functions for @for loops Handle empty states and loading conditions Example control flow patterns: Reactive Forms with Signals Integrate reactive forms with signal-based state Implement form validation with signals Handle form submission and errors Example form integration: Routing and Navigation Functional Route Guards Use functional guards instead of class-based guards Implement route protection with signals Handle navigation state reactively Example functional guards: Lazy Loading with Standalone Components Implement route-level code splitting Load components and features on demand Optimize bundle size with lazy loading Example lazy loading setup: Summary Checklist [ ] Use standalone components to eliminate NgModule boilerplate [ ] Leverage inject() function for dependency injection [ ] Implement signals for reactive state management [ ] Use new control flow syntax (@if, @for, @switch) [ ] Create computed signals for derived state [ ] Implement functional route guards and resolvers [ ] Use lazy loading for optimal bundle size [ ] Write comprehensive tests for components and services [ ] Handle form state with reactive forms and signals [ ] Implement proper error handling and loading states [ ] Use signal inputs and function outputs for component communication [ ] Create reactive services with signal-based state Follow these patterns to build modern, performant Angular applications using standalone components and the latest Angular features.

Nuxtjs Vue This document provides comprehensive guidelines for nuxtjs vue development and best practices. Vue.js Integration Composition Composition API with Nuxt Implement proper composition api with nuxt Follow best practices for optimal results Reactive Reactive data with ref() and reactive() Implement proper reactive data with ref() and reactive() Follow best practices for optimal results Computed Computed properties and watchers Implement proper computed properties and watchers Follow best practices for optimal results Component Component communication patterns Implement proper component communication patterns Follow best practices for optimal results Vue Vue 3 features and optimizations Implement proper vue 3 features and optimizations Follow best practices for optimal results Layouts & Pages Default Default and custom layouts Implement proper default and custom layouts Follow best practices for optimal results Page-specific Page-specific layouts Implement proper page-specific layouts Follow best practices for optimal results Error Error pages and 404 handling Implement proper error pages and 404 handling Follow best practices for optimal results Layout Layout transitions Implement proper layout transitions Follow best practices for optimal results Responsive Responsive layout strategies Implement proper responsive layout strategies Follow best practices for optimal results State Management Pinia Pinia for state management Implement proper pinia for state management Follow best practices for optimal results Store Store composition and modules Implement proper store composition and modules Follow best practices for optimal results Server-side Server-side state hydration Implement proper server-side state hydration Follow best practices for optimal results Persistent Persistent state with cookies Implement proper persistent state with cookies Follow best practices for optimal results Real-time Real-time state synchronization Implement proper real-time state synchronization Follow best practices for optimal results Nuxt Modules Official Official modules (@nuxtjs/) Implement proper official modules (@nuxtjs/) Follow best practices for optimal results Community Community module ecosystem Implement proper community module ecosystem Follow best practices for optimal results Custom Custom module development Implement proper custom module development Follow best practices for optimal results Module Module configuration and options Implement proper module configuration and options Follow best practices for optimal results PWA PWA module for offline functionality Implement proper pwa module for offline functionality Follow best practices for optimal results Performance Optimization Code Code splitting and lazy loading Implement proper code splitting and lazy loading Follow best practices for optimal results Image Image optimization Implement proper image optimization Follow best practices for optimal results Bundle Bundle analysis and optimization Implement proper bundle analysis and optimization Follow best practices for optimal results Critical Critical CSS generation Implement proper critical css generation Follow best practices for optimal results Service Service worker integration Implement proper service worker integration Follow best practices for optimal results API Development Server Server API routes Implement proper server api routes Follow best practices for optimal results Middleware Middleware for API requests Implement proper middleware for api requests Follow best practices for optimal results Database Database integration Implement proper database integration Follow best practices for optimal results RESTful RESTful API patterns Implement proper restful api patterns Follow best practices for optimal results GraphQL GraphQL integration Implement proper graphql integration Follow best practices for optimal results Development Tools TypeScript TypeScript integration Implement proper typescript integration Follow best practices for optimal results ESLint ESLint and Prettier setup Implement proper eslint and prettier setup Follow best practices for optimal results Testing Testing with Jest and Vue Test Utils Implement proper testing with jest and vue test utils Follow best practices for optimal results Storybook Storybook for component development Implement proper storybook for component development Follow best practices for optimal results Hot Hot module replacement Implement proper hot module replacement Follow best practices for optimal results Production Considerations Performance Performance monitoring Implement proper performance monitoring Follow best practices for optimal results Error Error tracking and logging Implement proper error tracking and logging Follow best practices for optimal results Analytics Analytics integration Implement proper analytics integration Follow best practices for optimal results Security Security best practices Implement proper security best practices Follow best practices for optimal results Scalability Scalability planning Implement proper scalability planning Follow best practices for optimal results Follow these comprehensive guidelines for successful nuxtjs vue implementation.

Vue 3 Composition API Best Practices Comprehensive guide for mastering Vue 3's Composition API, reactivity system, and building scalable Vue applications. Advanced Reactivity Patterns Computed Properties and Watchers Use computed for derived state that depends on reactive data Implement watchers for side effects and complex reactions Understand when to use watch vs watchEffect Example advanced reactivity: Custom Composables Design Create reusable logic with custom composables Follow naming conventions (use prefix) Implement proper cleanup and lifecycle management Example composable patterns: Performance Optimization Techniques Use shallow reactive when deep reactivity isn't needed Implement proper component lazy loading Optimize large list rendering with virtual scrolling Example performance patterns: State Management and Routing Pinia State Management Use Pinia for global state management Implement proper store composition patterns Handle async operations in stores Example Pinia store: Vue Router 4 Integration Use the composition API with Vue Router Implement proper route guards and navigation Handle route parameters and query strings Example router integration: Summary Checklist [ ] Use script setup syntax for cleaner component code [ ] Implement proper reactivity with ref() and reactive() [ ] Create reusable logic with custom composables [ ] Use TypeScript for type safety throughout [ ] Implement proper computed and watcher patterns [ ] Design clear prop and emit interfaces [ ] Use provide/inject for dependency injection [ ] Integrate Pinia for global state management [ ] Handle routing with Vue Router 4 composition API [ ] Optimize performance with shallow reactivity when appropriate [ ] Write comprehensive tests for composables and components [ ] Follow Vue 3 best practices and conventions Follow these patterns to build scalable, maintainable, and performant Vue 3 applications using the Composition API effectively.

SvelteKit Best Practices Comprehensive guide for building full-stack web applications with SvelteKit, including routing, stores, SSR, and modern development patterns. State Management with Stores Svelte Stores for Global State Use writable stores for mutable state Implement derived stores for computed values Create custom stores for complex logic Example store implementations: Custom Stores for Complex State Create domain-specific stores Implement store composition patterns Handle async operations in stores Example custom store: Store Persistence and Synchronization Persist store state across sessions Sync stores with server state Handle offline scenarios Example persistence patterns: API Routes and Server-Side Logic API Route Implementation Create RESTful API endpoints Handle different HTTP methods Implement proper error handling and validation Example API routes: Authentication and Authorization Hooks Implement server-side authentication Create authorization middleware Handle session management Example authentication setup: Summary Checklist [ ] Use file-based routing for automatic route generation [ ] Implement load functions for server-side data fetching [ ] Create reactive stores for global state management [ ] Use derived stores for computed values [ ] Build reusable components with proper event handling [ ] Implement form validation with reactive statements [ ] Create RESTful API routes with proper error handling [ ] Set up authentication and authorization hooks [ ] Use proper TypeScript types throughout the application [ ] Implement lazy loading and code splitting [ ] Write comprehensive tests for components and stores [ ] Handle loading states and errors gracefully [ ] Use SSR and prerendering for performance [ ] Implement proper SEO and meta tag management Follow these practices to build fast, scalable, and maintainable full-stack web applications with SvelteKit.

Svelte Sveltekit This document provides comprehensive guidelines for svelte sveltekit development and best practices. Component Development Single-file Single-file components (.svelte) Implement proper single-file components (.svelte) Follow best practices for optimal results Props Props for parent-child communication Implement proper props for parent-child communication Follow best practices for optimal results Event Event dispatching with createEventDispatcher Implement proper event dispatching with createeventdispatcher Follow best practices for optimal results Slots Slots for content projection Implement proper slots for content projection Follow best practices for optimal results Context Context API for data sharing Implement proper context api for data sharing Follow best practices for optimal results SvelteKit Features File-based File-based routing system Implement proper file-based routing system Follow best practices for optimal results Server-side Server-side rendering (SSR) Implement proper server-side rendering (ssr) Follow best practices for optimal results Static Static site generation (SSG) Implement proper static site generation (ssg) Follow best practices for optimal results API API routes with +page.server.js Implement proper api routes with +page.server.js Follow best practices for optimal results Load Load functions for data fetching Implement proper load functions for data fetching Follow best practices for optimal results Forms & Data Form Form actions with +page.server.js Implement proper form actions with +page.server.js Follow best practices for optimal results Progressive Progressive enhancement Implement proper progressive enhancement Follow best practices for optimal results Form Form validation Implement proper form validation Follow best practices for optimal results File File uploads Implement proper file uploads Follow best practices for optimal results Real-time Real-time form updates Implement proper real-time form updates Follow best practices for optimal results Performance Automatic Automatic code splitting Implement proper automatic code splitting Follow best practices for optimal results Preloading Preloading for faster navigation Implement proper preloading for faster navigation Follow best practices for optimal results Image Image optimization Implement proper image optimization Follow best practices for optimal results Bundle Bundle analysis Implement proper bundle analysis Follow best practices for optimal results Service Service workers for caching Implement proper service workers for caching Follow best practices for optimal results Advanced Features Server-side Server-side components Implement proper server-side components Follow best practices for optimal results Streaming Streaming with async iterables Implement proper streaming with async iterables Follow best practices for optimal results WebSocket WebSocket integration Implement proper websocket integration Follow best practices for optimal results Real-time Real-time features Implement proper real-time features Follow best practices for optimal results Progressive Progressive web app capabilities Implement proper progressive web app capabilities Follow best practices for optimal results TypeScript Integration Full Full TypeScript support Implement proper full typescript support Follow best practices for optimal results Type-safe Type-safe stores Implement proper type-safe stores Follow best practices for optimal results Component Component prop types Implement proper component prop types Follow best practices for optimal results API API route typing Implement proper api route typing Follow best practices for optimal results Generic Generic components Implement proper generic components Follow best practices for optimal results Follow these comprehensive guidelines for successful svelte sveltekit implementation.