Qq Audit Frontend

Part of Claude Code operator skills: a collection of skills for running a real Claude Code setup.

Audit frontend with expert personas

Audit frontend by running 22 expert personas in serial, fixing critical issues per framework before verifying.

22 code quality frameworks, each loaded as a deep expert persona into its own agent context. Serial execution: one framework → fix critical issues → verify → next. Each agent thinks like a senior frontend engineer with 20 years of specialization in that specific domain.

Expert lens: Is the code well-built? Would a senior frontend engineer approve?

Modes

This skill responds to three modes based on the args passed. Interpret intent loosely, using fuzzy matching, not exact phrasing.

Mode 1: Full serial audit (no args or "run all")

Triggers: /qq-audit-frontend, "run all", "full audit", "everything", no args at all.

Mode 2: Single framework (framework name + optional scope)

Triggers: /qq-audit-frontend component architecture, "just run state management on the dashboard", "typescript strictness on the API layer", etc.

Match the framework name fuzzily: "components", "component arch" should match Component Architecture. "state", "state mgmt" should match State Management Patterns. "ts strict", "typescript" should match TypeScript Strictness. If ambiguous, show the 2-3 closest matches and ask.

Mode 3: List frameworks (help/list/discovery)

Triggers: "list", "what do you have", "what frameworks", "help", "which ones", "show me", etc.

Show the framework table from the Framework inventory section below, then ask which one(s) to run.

Smart interview (runs before any audit)

DO NOT ask dumb questions. Before asking anything, gather what you already know:

1. Check conversation context: what product are we working on? What files have been discussed? What has the user been complaining about?
2. Check project CLAUDE.md: product description, tech stack, target audience.
3. Check recent session state: what was just built or changed?

Pre-fill and present assumptions:

"Here's what I know going in:

• Product: [name], [description from context]
• Tech stack: [framework, language, build tool, inferred from project files]
• Quality bar: [from previous audits or conversation]
• Known pain points: [what the user has mentioned or what recent changes suggest]
• Scope: [full app / specific modules / specific component tree]

Anything wrong or missing?"

Use AskUserQuestion with multiple choice ONLY for genuine gaps. For example, if you truly can't tell whether it's a Next.js or Vite project, ask. If you can infer it, state the inference.

Interview output becomes the audit context: passed to every framework agent so they audit with purpose, not generically.

Execution flow (full audit)

Phase 1: Context gathering

1. Run smart interview (above)
2. Read the product's key modules/components to understand scope
3. Run npx next build or equivalent to establish baseline build state

Phase 2: Serial framework execution

For each framework (in order 1-22):

1. Spawn one agent with these instructions:

   • "Read the framework subskill file at ~/.agents/skills/qq-audit-frontend/frameworks/[NN-name].md"
   • "You ARE the expert described in that document. Think like them, not like a generalist."
   • "Audit [product name] focusing on [scope]. Context: [interview output]"
   • "Previous frameworks found these issues: [cumulative findings list]. Do NOT re-report duplicates."
   • "Score 1-10, list findings with file:line references, fix critical issues (score < 7), write report."

2. Collect the agent's output:

   • Score for this framework
   • Findings (new, not duplicates)
   • Fixes applied
   • Items flagged for downstream frameworks

3. Verify build if fixes were applied (npx next build or equivalent)

4. Update cumulative state:

   • Add findings to the dedup list
   • Update the running score card
   • Note cross-framework flags for upcoming frameworks

5. Move to next framework

Phase 3: Synthesis

1. Run framework #22 (Console/Runtime Error Hygiene) as the final cleanliness check
2. Compile consolidated report:
   • Per-framework scores (1-10 each)
   • Overall weighted average
   • All findings grouped by severity
   • Fixes applied (with file:line)
   • Remaining items for future rounds
3. Compare to previous audit rounds if they exist

Phase 4: Report

Save to project's data directory:

• data/audit-frontend-[date].md: full report
• data/audit-frontend-[date]-summary.md: scores + critical findings only

Framework inventory

Key principles

• Serial, not parallel: 70% of findings duplicate across frameworks. Serial means each round finds genuinely new issues after fixes.
• Fix before moving on: don't accumulate a findings list. Fix each framework's criticals before the next audit.
• Expert persona, not checklist: each agent IS the specialist. They reason from principles, not rules.
• Hold every fix to a real quality bar: is this real data? Does it prevent errors? Is the complexity earned?
• Code, not screenshots: this audit reads source code. Visual output is the UX audit's domain.
• Multi-round: after all 22 frameworks, run the full cycle again. Scores increase each round until plateau.
• Dedup across frameworks: each agent receives cumulative findings so they don't re-report known issues.