frontend-quality-auditor

Files (3)

• SKILL.md
• openai.yaml · agents/
• audit-checklist.md · references/

SKILL.md (first lines)

# Frontend Quality Auditor

Use this skill to decide whether a frontend is ready to ship and what should be fixed first.

## Core Contract

Produce a concise, evidence-based quality report. Do not redesign the product unless the user explicitly asks for fixes. The default output is an audit, not a rebuild.

## Audit Workflow

1. Identify the project type, framework, entry routes, styling system, scripts, and available preview or deployment URL.
2. Inspect source structure first, then inspect rendered output when a browser or screenshot workflow is available.
3. Review desktop and mobile breakpoints before judging visual quality.
4. Check the launch-critical surfaces: hero or first screen, navigation, primary CTA, forms, media, interactive states, footer, error/loading/empty states, and any checkout, booking, pricing, or dashboard flows.
5. Classify issues by severity:
   - **Blocker**: likely broken, inaccessible, misleading, unusable, or launch-damaging.
   - **High**: visibly unprofessional, confusing, slow, fragile, or trust-reducing.
   - **Medium**: polish, consistency, or resilience issue worth fixing soon.
   - **Low**: minor refinement that should not block launch.
6. Recommend the smallest useful next action for each meaningful issue.
7. End with a clear **Ship**, **Ship after fixes**, or **Do not ship yet** judgment.

## Review Areas

- **Visual polish**: hierarchy, spacing, typography, alignment, density, color, contrast, icon use, media treatment, empty space, and generic AI-looking patterns.
- **Responsive behavior**: mobile composition, tablet layout, overflow, touch targets, nav behavior, media crops, and text wrapping.
- **Accessibility**: semantic structure, headings, labels, focus states, keyboard paths, alt text, contrast, reduced motion, ARIA misuse, and modal/menu behavior.
- **Performance**: image and video weight, layout shift risk, font loading, animation cost, bundle hints, third-party scripts, and Core Web Vitals concerns.
- **SEO and sharing basics**: title, description, canonical, Open Graph, heading order, crawlable content, image alt text, sitemap/robots signals when relevant.
- **Interaction quality**: hover, focus, active, disabled, loading, error, success, offline, retry, and empty states.
- **Content and trust**: vague claims, placeholder copy, weak CTAs, unsupported proof, unclear pricing or contact flows, missing legal or support signals where expected.

## Use Specialist Skills When Available

Route deep follow-up work to focused skills instead of bloating this audit:

- `browser-inspection-workflow` for rendered browser inspection and evidence capture.
- `visual-polish-qa` or `responsive-visual-polish-qa` for visual fixes.
- `mobile-responsive-qa` for phone and tablet layout issues.
- `accessibility-audit-websites` for detailed accessibility remediation.
- `performance-audit-websites` or `performance-budget-lab` for speed and Core Web Vitals.
- `seo-technical-qa` for launch SEO checks.
- `cross-browser-qa` for browser compatibility.
- `anti-generic-website-review` for generic AI output and weak design patterns.
- `content-pruning-review`, `non-generic-web-copy`, or `cta-language-systems` for copy and conversion clarity.

## Output Format

Use this structure unless the user asks for something else:

1. **Verdict**: Ship, ship after fixes, or do not ship yet.
2. **Top Risks**: The material issues most likely to affect users or trust, if any; do not invent a minimum count.
3. **Findings**: Severity, location, evidence, impact, and recommended fix.
4. **Quick Wins**: Small improvements with high visible payoff.
5. **Specialist Follow-Ups**: Which focused skills or checks should be run next.
6. **Verification Notes**: Commands, URLs, viewports, screenshots, and checks actually performed.

Read `references/audit-checklist.md` for the full checklist when performing a complete launch-readiness review.

## Scope and evidence

Add `insufficient evidence / not assessed` when source-only or sampled evidence cannot support readiness. Qualify every verdict by surface and claimed stage. Recommendations remain recommendations in an analysis-only audit.

From TheGoat395/Codex-Skills, MIT.

More from TheGoat395/Codex-Skills