Use when opening or updating a pull request — produces a bug-fix or feature description reviewers from junior to CTO can follow end to end.
Use when committing work or writing a commit message — produces a subject and body any developer from junior to CTO can read and act on.
Use when managing the document head of a frontend SPA — per-route title, meta, Open Graph, and canonical tags via TanStack Router's head option (React) or Unhead (@unhead/vue / @unhead/react), plus a correct html lang. Improves accessibility (titles announced on navigation) and SEO/social previews.
Use when building or restructuring a landing page, marketing page, or any public conversion page — audits the page against a section grammar (hero, social proof, features-as-benefits, pricing, FAQ, final CTA), enforces one conversion goal per page, a semantic HTML skeleton, and a hero LCP/CLS budget. Framework-agnostic — works on built HTML from any stack.
Use when tuning frontend performance — enables the React Compiler, splits code by route and lazy-loads heavy chunks, adds bundle analysis with a size budget, measures Core Web Vitals (LCP/INP/CLS) with web-vitals, and applies image/CLS best practices. Measure first, then optimize.
Use when adding forms and validation to a frontend project — wires React Hook Form (React) or VeeValidate (Vue) with Zod schema-first validation, where one schema is the single source of truth for shape, rules, and inferred types, with accessible fields and submit wired to a TanStack Query mutation.
Use when page copy must pass brand, legal, or regulatory rules before going live — checks the visible copy of a public page against a rules file (the project's .claude/rubrics/copy-compliance.md if present, else the bundled template covering prohibited claims, required disclaimers, tone and address, terminology, locale formatting, substantiation) and reports every violation with the quoted text, the rule it breaks, and a compliant rewrite. A cheap pre-publish gate.
Use when reviewing a content page, article, guide, or landing page for quality before publishing or republishing — scores the page against a rubric (the project's .claude/rubrics/content-quality.md if present, else the bundled default covering intent match, direct answers, E-E-A-T trust signals, schema, internal linking, freshness) and fixes only the failed criteria. Audit-first and idempotent; supports knockout criteria.