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:

# 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 were modified?
• What possible regressions could occur?

Step 3: Build UI Map

Create a map of the touched areas:

Step 4: Execute Audit Checklist

Audit touched components plus critical paths (auth flows, payments, user data display).

See CHECKLIST.md for the complete audit checklist covering:

• Security (XSS, token storage, secrets leakage)
• Correctness & UX (loading states, validation, edge cases)
• Performance (bundle size, re-renders, network)
• Accessibility (keyboard nav, ARIA, contrast)
• Maintainability (types, tests, component design)

Output Format

Structure your audit report as follows:

A) Scope Scanned

Framework: [detected stack]
Routes reviewed: [list routes/pages]
Components analyzed: [count]
Commits analyzed: [range]

B) UI Map

Routes: [list affected routes]
Components: [key components modified]
Data flows: [API integrations touched]
State: [state management affected]

C) Findings by Category

Use severity levels:

For each finding:

### [SEVERITY] Title

**Location:** `components/Form.tsx:45`
**Category:** Security > XSS

**Issue:** [Describe the problem]

**Evidence:**
[Code snippet]

**Risk:** [What could go wrong]

**Fix:**
[Code showing the fix]

D) Summary Table

E) Suggested Patches

Step-by-step fixes for critical and high-severity issues:

1. [First fix with code]
2. [Second fix with code]
3. ...

Quick Commands

# Check for vulnerable dependencies
npm audit
pnpm audit

# Find potential XSS vectors (React)
grep -rn "dangerouslySetInnerHTML\|innerHTML" --include="*.tsx" --include="*.jsx"

# Find hardcoded secrets
grep -rn "API_KEY\|SECRET\|password" --include="*.ts" --include="*.tsx"

# Check bundle size
npx vite-bundle-visualizer
npx @next/bundle-analyzer

# Lighthouse audit
npx lighthouse http://localhost:3000 --view

Resources

• CHECKLIST.md - Complete audit checklist
• PATTERNS.md - Framework-specific vulnerability patterns