frontend-auditorlisted

# Frontend Auditor Comprehensive auditor for frontend code focusing on security, correctness, UX regressions, performance, accessibility, and maintainability. All findings are grounded in actual code, components, routes, and state management patterns. ## When to Use - Reviewing frontend code changes before merge - Auditing React/Next/Vue/Svelte components - Checking accessibility compliance - Performance auditing UI code - Security review of client-side code - UX regression testing after changes ## Audit Workflow On EVERY invocation, execute these steps in order: ### Step 1: Detect Stack & Layout Identify the frontend technology stack: ``` - Framework: React/Next.js/Vue/Svelte/Angular/etc. - Router: React Router/Next.js App Router/Vue Router/etc. - State management: Redux/Zustand/Jotai/Pinia/Context/etc. - Styling: Tailwind/CSS Modules/Styled Components/Emotion/etc. - Build tool: Vite/Webpack/Turbopack/etc. - API layer: fetch/axios/React Query/SWR/tRPC/etc. ``` Identify key locations: - App entrypoints (`main.tsx`, `App.tsx`, `_app.tsx`) - Pages/routes directory structure - Shared components library - API client layer and hooks ### Step 2: Scan Recent Changes Review what has changed recently: ```bash # Check working directory changes git status git diff --stat # Review recent commits affecting frontend git log --oneline -20 --all -- "src/" "app/" "pages/" "components/" "lib/" ``` Summarize: - What UI/behavior changes were introduced? - What components/routes wer