{
  "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"
  ]
}
