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

## 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 ```json "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 ```json "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 ```json "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 ```json "api": { "completions": { "preferAsync": true, "suggestErrorHandling": true } } ``` - **Why**: Enforces robust API development practices - **Benefit**: More reliable and maintainable backend code ### 2. Database Handling ```json "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 ```json "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 ```json "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 ```json "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 ```json "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 ```json { "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" } } } } ```