My `.cursorrules` Configuration for Full-Stack TypeScript/Next.js Development

Overview This .cursorrules configuration is designed for a modern TypeScript-based...

Overview

This .cursorrules configuration is designed for a modern TypeScript-based development environment, focusing on Next.js, React, and full-stack development best practices. Let's break down each major section and understand the reasoning behind these choices.

Core Configuration Sections

1. General Settings

"general": {
  "language": "typescript",
  "formatOnSave": true,
  "defaultPromptContext": "..."
}

• Why: Establishes TypeScript as the primary language and ensures consistent code formatting
• Benefit: Maintains code quality and provides AI with proper context for suggestions

2. TypeScript Configuration

"typescript": {
  "strict": true,
  "completions": {
    "imports": {
      "preferNamed": true,
      "preferConst": true
    }
  }
}

• Why: Enforces strict type checking and modern import patterns
• Benefit: Reduces runtime errors and improves code maintainability

3. React/Next.js Settings

"react": {
  "completions": {
    "preferArrowFunctions": true,
    "preferFunctionComponents": true
  }
}

• Why: Aligns with modern React patterns and functional programming principles
• Benefit: Consistent component architecture and better performance optimization

Advanced Features

1. API Development

"api": {
  "completions": {
    "preferAsync": true,
    "suggestErrorHandling": true
  }
}

• Why: Enforces robust API development practices
• Benefit: More reliable and maintainable backend code

2. Database Handling

"database": {
  "sql": {
    "suggestIndexes": true,
    "suggestConstraints": true
  }
}

• Why: Promotes database optimization and data integrity
• Benefit: Better performance and more reliable data storage

Custom Prompts System

The custom prompts are organized into categories:

1. Frontend Development

"generateComponent": "Create a TypeScript React component..."
"generateHook": "Create a custom React hook..."

• Why: Streamlines component and hook creation
• Benefit: Consistent component architecture and reduced boilerplate

2. API Development

"generateAPI": "Create a RESTful API endpoint..."
"generateMiddleware": "Create an Express/Next.js middleware..."

• Why: Standardizes API endpoint creation
• Benefit: Consistent API structure and proper error handling

3. Testing

"generateTest": "Create a comprehensive test suite..."
"generateE2E": "Create an end-to-end test scenario..."

• Why: Ensures comprehensive test coverage
• Benefit: Improved code reliability and easier maintenance

File Templates

"fileTemplates": {
  "component": {
    "path": "src/components/${name}/${name}.tsx",
    "test": "src/components/${name}/${name}.test.tsx"
  }
}

• Why: Enforces consistent project structure
• Benefit: Easier navigation and maintenance of codebase

Key Benefits of This Configuration

1. Type Safety

   • Strict TypeScript configuration
   • Comprehensive type checking
   • Reduced runtime errors

2. Code Quality

   • Consistent formatting
   • Modern best practices
   • Comprehensive documentation requirements

3. Developer Experience

   • Streamlined workflows
   • Reduced boilerplate
   • Consistent file organization

4. Performance

   • Optimized database queries
   • Component-level optimizations
   • Caching strategies

5. Maintainability

   • Consistent code structure
   • Comprehensive testing
   • Clear documentation requirements

Conclusion

This configuration represents a carefully considered balance between:

• Modern development practices
• Type safety
• Developer productivity
• Code quality
• Performance optimization

It's specifically tailored for TypeScript/Next.js development while maintaining flexibility for different project requirements. The extensive custom prompts system allows for rapid development without compromising on quality or consistency.

Full config file

{
  "version": "1.0",
  "rules": {
    "general": {
      "language": "typescript",
      "formatOnSave": true,
      "defaultPromptContext": "You are working with a TypeScript/Next.js application using modern best practices."
    },
    "typescript": {
      "strict": true,
      "completions": {
        "imports": {
          "preferNamed": true,
          "preferConst": true
        },
        "types": {
          "inferFromUsage": true,
          "preferInterface": true,
          "strictNullChecks": true
        }
      }
    },
    "react": {
      "completions": {
        "preferArrowFunctions": true,
        "preferFunctionComponents": true,
        "hooks": {
          "suggestDependencyArray": true,
          "suggestCustomHooks": true
        }
      }
    },
    "nextjs": {
      "completions": {
        "preferServerComponents": true,
        "suggestMetadata": true,
        "routing": {
          "preferAppRouter": true
        }
      }
    },
    "api": {
      "completions": {
        "preferAsync": true,
        "suggestErrorHandling": true,
        "suggestValidation": true,
        "database": {
          "suggestTransactions": true,
          "suggestPreparedStatements": true
        }
      }
    },
    "styling": {
      "completions": {
        "preferModules": true,
        "suggestTailwind": true,
        "cssProperties": {
          "preferFlexbox": true,
          "preferGrid": true
        }
      }
    },
    "documentation": {
      "completions": {
        "jsdoc": {
          "required": true,
          "style": "typescript",
          "requireParams": true,
          "requireReturns": true
        }
      }
    },
    "infrastructure": {
      "docker": {
        "suggestMultiStage": true,
        "suggestOptimizations": true
      },
      "github": {
        "suggestActions": true,
        "cicd": {
          "suggestTests": true,
          "suggestLinting": true
        }
      }
    },
    "database": {
      "sql": {
        "suggestIndexes": true,
        "suggestConstraints": true,
        "preferPreparedStatements": true
      },
      "redis": {
        "suggestCaching": true,
        "suggestExpiry": true
      }
    },
    "customPrompts": {
      // Frontend Development
      "generateComponent": "Create a TypeScript React component with proper types, error boundaries, and documentation. Include loading and error states.",
      "generateHook": "Create a custom React hook with TypeScript, including proper dependency management, cleanup, and documentation.",
      "generateForm": "Create a type-safe form component with validation, error handling, and proper submission states.",
      "generateLayout": "Create a responsive layout component with proper CSS Grid/Flexbox implementation.",

      // API Development
      "generateAPI": "Create a RESTful API endpoint with TypeScript, input validation, error handling, and Swagger documentation.",
      "generateMiddleware": "Create an Express/Next.js middleware with proper error handling and typing.",
      "optimizeQuery": "Optimize this database query for performance, including proper indexing suggestions and caching strategy.",
      "generateSchema": "Create a database schema with proper constraints, indexes, and TypeScript types.",

      // Testing
      "generateTest": "Create a comprehensive test suite using Jest and React Testing Library, including edge cases and error scenarios.",
      "generateE2E": "Create an end-to-end test scenario covering the main user flow.",
      "generateMock": "Generate mock data and services for testing purposes.",

      // State Management
      "generateReducer": "Create a typed reducer with actions and state management.",
      "generateContext": "Create a React context with proper TypeScript typing and provider component.",

      // Database
      "generateMigration": "Create a database migration script with up and down functions.",
      "generateCache": "Implement Redis caching strategy for this data access pattern.",

      // Infrastructure
      "generateDockerfile": "Create a multi-stage Dockerfile optimized for Node.js/TypeScript.",
      "generateAction": "Create a GitHub Action workflow for CI/CD.",
      "generateEnv": "Generate environment variable documentation and validation.",

      // Documentation
      "generateDocs": "Create comprehensive documentation including usage examples and type definitions.",
      "generateStory": "Create a Storybook story with different component states and documentation.",

      // Utilities
      "generateUtil": "Create a utility function with proper error handling and documentation.",
      "generateConstants": "Create a type-safe constants file with proper naming and documentation.",
      "generateValidator": "Create a validation utility using Zod/Yup with proper error messages.",

      // Performance
      "optimizeComponent": "Analyze and optimize component performance including memoization and lazy loading.",
      "optimizeBundle": "Suggest bundle optimization strategies for this component/module.",

      // Security
      "securityAudit": "Review code for common security vulnerabilities and suggest fixes.",
      "generateAuth": "Create authentication middleware/utilities with proper security measures."
    },
    "fileTemplates": {
      "component": {
        "path": "src/components/${name}/${name}.tsx",
        "test": "src/components/${name}/${name}.test.tsx"
      },
      "api": {
        "path": "src/app/api/${name}.ts"
      },
      "hook": {
        "path": "src/hooks/use${name}.ts",
        "test": "src/hooks/use${name}.test.ts"
      },
      "util": {
        "path": "src/utils/${name}.ts",
        "test": "src/utils/${name}.test.ts"
      },
      "context": {
        "path": "src/contexts/${name}Context.tsx"
      },
      "middleware": {
        "path": "src/middleware/${name}.ts"
      }
    }
  }
}