audit-ai-frontend

name

audit-ai-frontend

description

Audit AI-generated, AI-shaped, or AI-looking frontend code, UI screenshots, and design diffs. Use for prompts like "audit AI frontend", "de-slop UI", "componentize this screen", "parameterize this React/Tailwind/shadcn UI", "make it responsive/accessible", or "review design-system drift"; check component APIs, reusable props/data models, modular composition, shared primitives/tokens, responsive resilience, accessibility, copy quality, hard-coded fixture screens, one-off CSS piles, and generic cards/gradients/fonts.

AI Frontend Audit

Use

Audit or repair frontend UI/code that looks generically AI-generated, while preserving existing product structure unless the user asks for a redesign.

Review in this order:

1. Establish the local contract.

   • Read components, routes/pages, CSS/theme tokens, existing primitives, design-system conventions, copy style, and data/state patterns.
   • If runnable, inspect the UI in a real browser with whatever browser tooling is available; this skill decides what to inspect, not browser mechanics.
   • If screenshot-only, review visuals but label implementation risks as Inferred.

2. Inspect data flow and component shape before styling.

   • Check whether repeated UI is parameterized through props/data or hard-coded as a fixture screen.
   • Look for reusable primitives, narrow component APIs, stable variants, shared state/data models, and realistic loading/empty/error/long-content cases.
   • Flag duplicated JSX, one-off CSS piles, brittle utility strings, boolean-mode soup, over-broad components, and visual constants that should be tokens.

3. Load only the reference you need.

   • references/patterns.md for concrete AI-tell and code-smell fixes.
   • references/rubric.md for broad UX/a11y/component/design audits.
   • references/workflows.md for code-structure, browser QA, reference-packet, and brief-lock loops.