generalize presets into mosaic profiles with runtime overlays

profiles/tech-stacks/react-frontend.json

@@ -0,0 +1,161 @@
+{
+  "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"
+  ]
+}