---
name: site-visual-critical-qa
description: Use when a site, page, screenshot, or interface needs a critical visual and usability review before it is called ready.
status: active
change_watch:
  - site visual QA rules
  - browser proof expectations
  - public-readiness copy standards
---

# Site Visual Critical QA

This skill is for finding visible problems before a site or page is called
ready.

The default posture is issue discovery. A review is useful when it names what
could make the page feel unfinished, confusing, cramped, muddy, generic,
inconsistent, or not ready for public visitors.

## When To Use It

Use this skill for:

- visual design audits;
- CSS or design-system changes;
- public-readiness page reviews;
- markdown-test or element-buffet pages;
- responsive screenshot review;
- preview QA before publishing.

## Review Order

1. Identify the site, page, route, and owner surface.
2. Check the relevant design or site rules before judging the page.
3. Inspect the homepage and a representative component test page when
   available.
4. Capture or inspect desktop and mobile views.
5. Review the actual pixels, not only status codes or automated metrics.
6. Spot-check distinct page types when the change affects shared styling or
   layout.
7. Report issues before summaries.

## What To Look For

- Text that is clipped, cramped, too small, too large, or fighting its
  container.
- Buttons, cards, tags, tables, or callouts that break across desktop or
  mobile.
- Weak hierarchy, muddy color separation, awkward spacing, or visual imbalance.
- Components that look fine in one section but fail on another background.
- Navigation labels, links, and cards that promise more than the page delivers.
- Screenshots that were captured but not actually inspected.

## Output Shape

Use this shape:

```text
Findings
- [severity] [page/component]: what is visibly wrong, why it matters, evidence.

Checks Run
- pages, viewports, screenshots, and tools used.

Fix Direction
- smallest design, CSS, or content-routing change likely to fix the issue.
```

If no issues are found, say that directly, then name what was not checked.

## Done Standard

A visual QA pass is complete when the reviewer has looked at the rendered
surface, named visible risks, and connected each fix direction to the smallest
reasonable change.

Automated checks help, but they are not judgment. Passing metrics do not prove
the page looks good.