161 lines
6.1 KiB
JSON
161 lines
6.1 KiB
JSON
{
|
|
"name": "React Frontend",
|
|
"description": "React 18+ with TypeScript, Tailwind CSS, and modern development practices",
|
|
"filePatterns": ["*.tsx", "*.ts", "*.jsx", "*.js"],
|
|
"excludePatterns": ["*.test.tsx", "*.test.ts", "*.spec.tsx", "*.spec.ts", "*.d.ts"],
|
|
"techStack": {
|
|
"framework": "React 18+",
|
|
"language": "TypeScript",
|
|
"styling": "Tailwind CSS",
|
|
"stateManagement": "React Query + Context API",
|
|
"routing": "React Router",
|
|
"testing": "React Testing Library + Jest",
|
|
"bundler": "Create React App / Vite",
|
|
"icons": "Heroicons + Lucide React",
|
|
"charts": "Chart.js + react-chartjs-2"
|
|
},
|
|
"conventions": {
|
|
"naming": {
|
|
"components": "PascalCase (UserProfile.tsx)",
|
|
"hooks": "camelCase with use prefix (useAuth.ts)",
|
|
"utilities": "camelCase (formatDate.ts)",
|
|
"constants": "UPPER_SNAKE_CASE",
|
|
"types": "PascalCase with T prefix",
|
|
"interfaces": "PascalCase with I prefix"
|
|
},
|
|
"fileStructure": {
|
|
"components": "src/components/{feature}/{ComponentName}.tsx",
|
|
"hooks": "src/hooks/use{HookName}.ts",
|
|
"services": "src/services/{feature}.service.ts",
|
|
"types": "src/types/{feature}.types.ts",
|
|
"contexts": "src/contexts/{Feature}Context.tsx",
|
|
"pages": "src/pages/{PageName}.tsx",
|
|
"tests": "src/components/{feature}/__tests__/{ComponentName}.test.tsx"
|
|
},
|
|
"imports": {
|
|
"style": "Absolute imports with @ prefix when available",
|
|
"grouping": "React, third-party, internal, relative",
|
|
"sorting": "Alphabetical within groups"
|
|
}
|
|
},
|
|
"qualityChecks": {
|
|
"lint": {
|
|
"command": "npx eslint --fix",
|
|
"config": "ESLint React + TypeScript + a11y",
|
|
"autoFix": true
|
|
},
|
|
"format": {
|
|
"command": "npx prettier --write",
|
|
"config": "80 character line limit, single quotes",
|
|
"autoFix": true
|
|
},
|
|
"build": {
|
|
"command": "npm run build",
|
|
"checkTypes": true,
|
|
"failOnError": true
|
|
},
|
|
"test": {
|
|
"unit": "npm test",
|
|
"coverage": "npm run test:coverage",
|
|
"minimumCoverage": 70
|
|
}
|
|
},
|
|
"codePatterns": {
|
|
"component": {
|
|
"structure": "Functional components with TypeScript interfaces",
|
|
"props": "Define interface for component props",
|
|
"state": "Use useState, useReducer for local state",
|
|
"effects": "Use useEffect with proper cleanup",
|
|
"memo": "Use React.memo for performance optimization when needed",
|
|
"forwardRef": "Use forwardRef for components that need ref access"
|
|
},
|
|
"hooks": {
|
|
"custom": "Extract reusable logic into custom hooks",
|
|
"naming": "Always start with 'use' prefix",
|
|
"dependencies": "Properly declare useEffect dependencies",
|
|
"cleanup": "Return cleanup functions from useEffect when needed"
|
|
},
|
|
"styling": {
|
|
"tailwind": "Use Tailwind utility classes",
|
|
"responsive": "Mobile-first responsive design",
|
|
"darkMode": "Support dark mode with Tailwind dark: prefix",
|
|
"accessibility": "Include proper ARIA labels and keyboard navigation"
|
|
},
|
|
"stateManagement": {
|
|
"local": "useState for component-local state",
|
|
"global": "Context API for app-wide state",
|
|
"server": "React Query for server state management",
|
|
"forms": "Controlled components with validation"
|
|
},
|
|
"testing": {
|
|
"render": "Use @testing-library/react render method",
|
|
"queries": "Use semantic queries (getByRole, getByLabelText)",
|
|
"userEvents": "Use @testing-library/user-event for interactions",
|
|
"mocking": "Mock external dependencies and API calls",
|
|
"accessibility": "Test with screen reader and keyboard navigation"
|
|
}
|
|
},
|
|
"context7Libraries": [
|
|
"react",
|
|
"react-dom",
|
|
"react-router-dom",
|
|
"@tanstack/react-query",
|
|
"tailwindcss",
|
|
"@testing-library/react",
|
|
"@testing-library/user-event",
|
|
"@heroicons/react",
|
|
"lucide-react",
|
|
"chart.js"
|
|
],
|
|
"commonImports": {
|
|
"component": [
|
|
"import React, { useState, useEffect, useCallback, useMemo } from 'react';",
|
|
"import { useNavigate, useParams } from 'react-router-dom';"
|
|
],
|
|
"hook": [
|
|
"import { useState, useEffect, useCallback, useContext } from 'react';",
|
|
"import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';"
|
|
],
|
|
"test": [
|
|
"import { render, screen, fireEvent, waitFor } from '@testing-library/react';",
|
|
"import userEvent from '@testing-library/user-event';",
|
|
"import { BrowserRouter } from 'react-router-dom';"
|
|
]
|
|
},
|
|
"bestPractices": [
|
|
"Use functional components with hooks instead of class components",
|
|
"Extract custom hooks for reusable stateful logic",
|
|
"Use React.memo for performance optimization when appropriate",
|
|
"Implement proper error boundaries for error handling",
|
|
"Use React Query for server state management",
|
|
"Follow accessibility guidelines (WCAG 2.1)",
|
|
"Implement responsive design with mobile-first approach",
|
|
"Use TypeScript for type safety",
|
|
"Write comprehensive tests for components and hooks",
|
|
"Optimize bundle size with code splitting and lazy loading"
|
|
],
|
|
"accessibilityRequirements": [
|
|
"Provide meaningful alt text for images",
|
|
"Use semantic HTML elements",
|
|
"Ensure proper heading hierarchy (h1, h2, h3)",
|
|
"Include ARIA labels for interactive elements",
|
|
"Support keyboard navigation for all interactive elements",
|
|
"Maintain sufficient color contrast ratios",
|
|
"Provide focus indicators for keyboard users",
|
|
"Use role attributes when semantic HTML is insufficient",
|
|
"Test with screen readers",
|
|
"Ensure form fields have associated labels"
|
|
],
|
|
"performanceOptimizations": [
|
|
"Use React.lazy for code splitting",
|
|
"Implement virtualization for long lists",
|
|
"Use useMemo and useCallback to prevent unnecessary re-renders",
|
|
"Optimize images with proper formats and sizes",
|
|
"Use React.memo for components that receive stable props",
|
|
"Implement proper error boundaries",
|
|
"Use React Query for efficient data fetching and caching",
|
|
"Minimize bundle size by importing only needed modules",
|
|
"Use web workers for heavy computations",
|
|
"Implement proper loading states and skeleton screens"
|
|
]
|
|
} |