Modern Web Development

Modern Web Development

Brandon Fernandez's comprehensive cursor rules for modern web development with TypeScript, Node.js, Next.js 14, React, Supabase, GraphQL, Tailwind CSS, Radix UI, and Shadcn UI.

Key Development Principles

Code Style and Architecture

• Write concise, technical responses with accurate TypeScript examples
• Employ functional, declarative programming while avoiding class-based approaches
• Prioritize iteration and modularization over code duplication
• Use descriptive variable names with auxiliary verbs (isLoading, hasError)
• Implement the RORO pattern (Receive an Object, Return an Object)

JavaScript/TypeScript Standards

• Use function keyword for pure functions
• Omit semicolons
• Leverage TypeScript exclusively, preferring interfaces over types
• Structure files as: exported component, subcomponents, helpers, static content, types
• Minimize unnecessary curly braces in conditionals

Error Handling

• Address errors and edge cases at function entry points
• Apply early returns for error conditions avoiding deep nesting
• Position the success path last for improved readability
• Use guard clauses for precondition validation
• Implement user-friendly error messaging

React and Next.js Guidelines

• Use functional components with TypeScript interfaces
• Write declarative JSX using function declarations
• Style with Shadcn UI, Radix, and Tailwind CSS
• Implement mobile-first responsive design
• Minimize use client, useEffect, and setState - favor React Server Components
• Employ Zod for form validation
• Wrap client components in Suspense with fallbacks
• Use dynamic loading for non-critical components
• Optimize images (WebP format, size data, lazy loading)

Data and State Management

• Leverage React Server Components for data fetching
• Implement the preload pattern to prevent waterfalls
• Use Supabase for real-time synchronization and state management
• Consider Vercel KV for chat history, rate limiting, and sessions

Supabase and GraphQL

• Use Supabase client for database interactions and subscriptions
• Implement Row Level Security (RLS) policies
• Leverage Supabase Auth, Storage, and Edge Functions
• Use Genql for type-safe GraphQL API interactions
• Optimize GraphQL queries to fetch only necessary data

Styling and Testing

Styling

• Apply Tailwind CSS utility-first approach
• Use Class Variance Authority (CVA) for component variants

Testing

• Implement unit tests for utilities and hooks
• Create integration tests for complex components
• Develop end-to-end tests for critical user flows

Accessibility and Documentation

Accessibility

• Ensure keyboard navigation throughout interfaces
• Implement proper ARIA labels and semantic roles
• Maintain WCAG-compliant color contrast ratios

Documentation

• Provide clear JSDoc comments for IDE intellisense
• Document Supabase schemas, RLS policies, and Edge Functions