Cursor

Build a complete dark mode system for this React app. Requirements: toggle persisted in localStorage, applied via CSS custom properties, smooth 200ms transition, sun/moon icon in navbar, respects system preference on first load, works across all existing components. @src/styles/theme.css for current variables.

@codebase Explain the overall architecture. What are the main modules, how do data and events flow between them, what design patterns are in use, what would cause the most pain to refactor, and what should a new engineer read first?

@file This component re-renders excessively and causes the UI to lag when the user types in the search box. Profile the render cycle, identify every unnecessary re-render, fix them using useMemo/useCallback/React.memo where appropriate, and explain each change.

@file Write Playwright integration tests for all user flows in this page. Cover: happy path, validation errors, network failure states, loading states, and accessibility. Use the Page Object Model pattern. Mock all API calls.

@codebase I need to migrate all API calls from Axios to the native Fetch API with our custom wrapper. Identify every Axios usage, show me a migration plan, then migrate them file by file. Preserve all existing error handling and type safety.

@file Generate complete TypeScript interfaces for all data structures used in this file. Infer types from usage if not explicitly defined, use discriminated unions for state machines, and export everything needed by consuming components.

@codebase Audit this React application for missing error boundaries. Add them at appropriate levels: route level, feature level, and component level. Each boundary should log the error with context and render a useful fallback UI.

@codebase Analyze our webpack/Vite bundle and identify the top 10 contributors to bundle size. For each, suggest: code splitting strategy, lazy loading opportunities, tree-shakeable alternatives, or whether the dependency can be removed entirely.

Add offline support to this web app using a Service Worker. Requirements: cache the app shell on install, serve cached assets when offline, queue form submissions when offline and sync when reconnected, show a banner when the user is offline. @src/sw.ts if it exists.

@file Perform a comprehensive accessibility audit. Check for: missing ARIA labels, keyboard navigation gaps, focus management issues, color contrast problems, missing alt text, improper heading hierarchy, and form label associations. Fix every issue you find.