Skip to content

frontend-cursor-rules-guide.md

Latest commit

 

History

History
295 lines (197 loc) · 11.8 KB

frontend-cursor-rules-guide.md

File metadata and controls

295 lines (197 loc) · 11.8 KB

Step-by-Step Guide: Using Editor Rules (Frontend)

Overview

This guide explains how to effectively use the editor rules for frontend development. The rules are designed to be selective and contextual, not comprehensive, to maintain performance and relevance when building modern, accessible, and performant web applications.

Rules are available for both Cursor (.cursor/rules) and Antigravity (.agent/rules) editors. Use the copy-editor-rules.sh script to copy them automatically.

Available Rules

General Frontend Rules

  • frontend-1-architecture-rules.mdc - Frontend architecture and design patterns
  • frontend-2-ui-patterns-rules.mdc - UI/UX patterns and user interactions
  • frontend-3-data-state-rules.mdc - State management and data flow
  • frontend-4-api-integration-service-layer.mdc - API integration and service layer
  • frontend-5-performance-rules.mdc - Performance optimization techniques
  • frontend-6-security-rules.mdc - Frontend security implementation
  • frontend-7-accessibility-rules.mdc - Accessibility and inclusive design
  • frontend-8-testing-rules.mdc - Frontend testing strategies

React Framework Rules

  • react-1-architecture-rules.mdc - React architecture patterns and SOLID principles
  • react-2-ui-patterns-rules.mdc - React UI patterns and component design
  • react-3-data-state-rules.mdc - React state management with hooks and context
  • react-4-api-integration-rules.mdc - React API integration with React Query/TanStack
  • react-5-performance-rules.mdc - React performance optimization
  • react-6-security-rules.mdc - React security best practices
  • react-7-accessibility-rules.mdc - React accessibility implementation
  • react-8-testing-rules.mdc - React testing with React Testing Library

Quick Start

Step 1: Identify Your Task Type

  • New Component → UI component, feature implementation
  • State Management → Data flow, hooks, context
  • API Integration → Data fetching, server communication
  • Performance → Optimization, code splitting, lazy loading
  • Accessibility → Screen reader support, keyboard navigation
  • Testing → Unit tests, integration tests, user behavior testing
  • Security → Input validation, XSS prevention, authentication

Step 2: Select Rules (2-5 rules)

Add Based on Task:

  • Component work → frontend-1-architecture-rules.mdc + react-1-architecture-rules.mdc
  • UI/UX → frontend-2-ui-patterns-rules.mdc + react-2-ui-patterns-rules.mdc
  • Data handling → frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc
  • API work → frontend-4-api-integration-service-layer.mdc + react-4-api-integration-rules.mdc
  • Performance → frontend-5-performance-rules.mdc + react-5-performance-rules.mdc
  • Security → frontend-6-security-rules.mdc + react-6-security-rules.mdc
  • Accessibility → frontend-7-accessibility-rules.mdc + react-7-accessibility-rules.mdc

Step 3: Configure & Use

Cursor:

  1. Open Cursor AI settings → Rules
  2. Rules are stored in .cursor/rules
  3. Add selected .mdc rule files
  4. Ask specific questions
  5. Review and iterate

Antigravity:

  1. Rules are stored in .agent/rules
  2. Antigravity picks them up automatically
  3. Ask specific questions
  4. Review and iterate

Rule Selection by Task Type

🚀 New Features

  • Basic Component (2-3 rules): frontend-1-architecture-rules.mdc + react-1-architecture-rules.mdc
  • Interactive UI (4-5 rules): Add frontend-2-ui-patterns-rules.mdc + react-2-ui-patterns-rules.mdc + frontend-7-accessibility-rules.mdc
  • Data-Driven Feature (5-6 rules): Add frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc + react-4-api-integration-rules.mdc

🎨 UI/UX Development

  • Responsive Design (3-4 rules): frontend-2-ui-patterns-rules.mdc + react-2-ui-patterns-rules.mdc + frontend-7-accessibility-rules.mdc
  • Interactive Components (4-5 rules): Add frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc
  • Animation/Motion (3-4 rules): frontend-2-ui-patterns-rules.mdc + react-2-ui-patterns-rules.mdc + frontend-5-performance-rules.mdc

🔄 State Management

  • Local State (3 rules): frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc
  • Global State (4 rules): Add frontend-1-architecture-rules.mdc + react-1-architecture-rules.mdc
  • Server State (4-5 rules): Add frontend-4-api-integration-service-layer.mdc + react-4-api-integration-rules.mdc

🌐 API Integration

  • Data Fetching (4 rules): frontend-4-api-integration-service-layer.mdc + react-4-api-integration-rules.mdc + frontend-5-performance-rules.mdc
  • Real-time Data (4-5 rules): Add frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc
  • Error Handling (3-4 rules): react-4-api-integration-rules.mdc + frontend-6-security-rules.mdc

⚡ Performance Optimization

  • Component Performance (4 rules): frontend-5-performance-rules.mdc + react-5-performance-rules.mdc + react-1-architecture-rules.mdc
  • Bundle Optimization (3-4 rules): frontend-5-performance-rules.mdc + react-5-performance-rules.mdc
  • Rendering Performance (4-5 rules): Add frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc

🔒 Security Implementation

  • Input Security (4 rules): frontend-6-security-rules.mdc + react-6-security-rules.mdc + frontend-4-api-integration-service-layer.mdc
  • Authentication (4-5 rules): Add frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc
  • Data Protection (3-4 rules): frontend-6-security-rules.mdc + react-6-security-rules.mdc

♿ Accessibility & Inclusion

  • Basic A11y (3 rules): frontend-7-accessibility-rules.mdc + react-7-accessibility-rules.mdc
  • Complex Interactions (4-5 rules): Add frontend-2-ui-patterns-rules.mdc + react-2-ui-patterns-rules.mdc
  • Forms & Navigation (4 rules): Add frontend-3-data-state-rules.mdc + react-3-data-state-rules.mdc

🧪 Testing & Quality

  • Component Testing (3-4 rules): frontend-8-testing-rules.mdc + react-8-testing-rules.mdc + react-1-architecture-rules.mdc
  • Integration Testing (4-5 rules): Add frontend-4-api-integration-service-layer.mdc + react-4-api-integration-rules.mdc
  • User Behavior Testing (4-5 rules): Add frontend-7-accessibility-rules.mdc + react-7-accessibility-rules.mdc

Practical Examples

Example 1: User Dashboard Component

Rules: react-1-architecture-rules.mdc + react-3-data-state-rules.mdc + react-4-api-integration-rules.mdc + react-7-accessibility-rules.mdc + frontend-5-performance-rules.mdc

Why: Component architecture + state management + API data + accessibility + performance

Example 2: Authentication Form

Rules: react-2-ui-patterns-rules.mdc + frontend-6-security-rules.mdc + react-6-security-rules.mdc + react-7-accessibility-rules.mdc

Why: Form patterns + frontend security + React security + accessibility

Example 3: Real-time Chat Component

Rules: react-4-api-integration-rules.mdc + react-3-data-state-rules.mdc + frontend-5-performance-rules.mdc + react-7-accessibility-rules.mdc

Why: WebSocket integration + state management + performance + accessibility

Example 4: Data Table with Sorting/Filtering

Rules: react-5-performance-rules.mdc + react-3-data-state-rules.mdc + react-7-accessibility-rules.mdc + frontend-2-ui-patterns-rules.mdc

Why: Virtual scrolling + state management + screen reader support + UI patterns

Example 5: Mobile-First Responsive Layout

Rules: frontend-2-ui-patterns-rules.mdc + react-2-ui-patterns-rules.mdc + frontend-5-performance-rules.mdc + frontend-7-accessibility-rules.mdc

Why: Responsive design + React patterns + performance + touch accessibility

Performance Tips

  1. Start Minimal - Begin with 2-3 essential rules, add as needed
  2. Match Framework - Use React-specific rules for React projects
  3. Task-Specific - Choose rules that directly relate to your current task
  4. Avoid Overlap - Don't load both general and React rules for the same concern unless needed

Common Combinations

Quick Component Development

frontend-1-architecture-rules.mdc + react-1-architecture-rules.mdc

Interactive UI with State

react-2-ui-patterns-rules.mdc + react-3-data-state-rules.mdc

API-Connected Components

react-4-api-integration-rules.mdc + react-3-data-state-rules.mdc

Performance-Critical Features

frontend-5-performance-rules.mdc + react-5-performance-rules.mdc

Accessible Components

frontend-7-accessibility-rules.mdc + react-7-accessibility-rules.mdc

Secure Data Handling

frontend-6-security-rules.mdc + react-6-security-rules.mdc

Comprehensive Testing

frontend-8-testing-rules.mdc + react-8-testing-rules.mdc

Technology-Specific Guidance

React Projects

  • Always include react-1-architecture-rules.mdc for component architecture
  • Add specific React rules that match your task (state, UI, API, etc.)
  • Use React Testing Library patterns from react-8-testing-rules.mdc

TypeScript Projects

  • All React rules include TypeScript examples and patterns
  • Focus on type safety in component interfaces and state management

Modern Build Tools (Vite, Next.js)

  • Performance rules include modern bundling and optimization strategies
  • Code splitting patterns for dynamic imports

CSS Frameworks (Tailwind, Styled Components)

  • UI pattern rules include examples for popular CSS approaches
  • Responsive design patterns work with any CSS framework

Troubleshooting

AI Response Too Generic

  • Add React-specific rules for detailed component patterns
  • Include task-specific rules (performance, accessibility, etc.)
  • Be more specific about your component requirements

AI Response Too Slow

  • Reduce the number of active rules (start with 2-3)
  • Remove rules not relevant to current task
  • Focus on framework-specific rules rather than general ones

AI Not Following React Best Practices

  • Ensure react-1-architecture-rules.mdc is included
  • Add React-specific rules for your particular concern area
  • Update rules with your team's React conventions

Performance Issues in Generated Code

  • Include frontend-5-performance-rules.mdc and react-5-performance-rules.mdc
  • Be specific about performance requirements in your prompts

Accessibility Compliance Issues

  • Always include react-7-accessibility-rules.mdc for interactive components
  • Add frontend-7-accessibility-rules.mdc for comprehensive coverage
  • Test generated components with screen readers

Best Practices

  1. Match rules to your specific development task
  2. Start minimal (2-3 rules) and add as needed
  3. Include accessibility rules for all user-facing components
  4. Use React-specific rules for React projects
  5. Be specific in your prompts about requirements
  6. Consider performance implications from the start
  7. Include security rules when handling user data

Rule Maintenance

When to Update Rules

  • New React patterns are adopted by the team
  • UI design system changes
  • Performance requirements evolve
  • Accessibility standards are updated
  • New development tools are integrated
  • Security requirements change

How to Update Rules

  • Update rule descriptions for clarity
  • Add new examples for emerging patterns
  • Remove outdated patterns (class components, etc.)
  • Include new hooks and React features
  • Update TypeScript patterns as needed

Team Synchronization

  • Ensure all team members use consistent rule combinations
  • Document team-specific rule preferences
  • Regular review of rule effectiveness
  • Share successful rule combinations for common tasks