# HeyAda Design Nitpick

A demanding, pre-ship design-QA pass for a website — the kind a perfectionist art director
does before anything goes live. It does not just "check"; it nitpicks. It MEASURES the things
the eye can't judge reliably (headline line-counts at every width, image upscaling and
aspect-consistency, tap-target sizes, outer-margin equality, oversized blank gaps, heading
order, CSS slop tells) and JUDGES the things a measurement can't (alignment feel, hierarchy,
crop quality, polish, anything that reads generic or templated). Built for portfolio and
agency sites where visual precision is the product.

Fuses two open skills into HeyAda's own gate: the deterministic AI-slop/quality detectors from
`impeccable` (Paul Bakaus) and the width-aware house rules from `taste-skill` (Leonxlnx),
pinned to HeyAda's brand standards — never a generic look-generator.

## When to use
- Before shipping ANY client build or our own page. This is the gate, run it every time.
- Reviewing a competitor or a prospect's site to show them exactly what's off (sales).
- Auditing a portfolio/agency site where crop, grid and alignment carry the brand.

## How it runs
Two layers, both required:

### 1. The measured pass (objective, repeatable)
`scratchpad/design-nitpick.cjs <url>` loads the live page at **three widths (390 / 768 / 1440)**
and measures:
- **Headlines** wrap to >2 lines at any width (keep H1/H2 to <=2 lines; ~32 chars safe).
- **Images** displayed larger than their source (soft/blurry), inconsistent aspect ratios
  across the page, and missing `alt`.
- **Tap targets** under ~44px on mobile.
- **Outer margins** unequal left vs right (page sits off-centre).
- **Oversized blank gaps** between sections (> ~0.6 of a screen).
- **Heading order** skips (h1 -> h3), which hurt SEO + screen readers.
- **CSS slop tells**: purple/violet gradients, bounce/overshoot easing, heavy dark glows,
  pure `#000` text (use a near-black).

### 2. The vision pass (judgement)
A reviewer reads full-page desktop + mobile screenshots and nitpicks what measurement can't,
naming WHERE each issue is (section, desktop/mobile):
- Alignment: nearly-but-not-aligned edges, off-centre blocks, grid breaks.
- Spacing & rhythm: uneven gaps, cramped or ballooned padding.
- Typography: hierarchy, awkward breaks/orphans, headline stacks that look broken vs intentional.
- Images: crop quality, consistency of treatment, letterboxing, mixed shapes in a grid.
- Hierarchy & polish: what the eye hits first, weak CTAs, anything that reads templated.
- Mobile: anything broken, cramped or overflowing vs desktop.

## Output
A single prioritized list (high / med / low), each with: area, WHERE, the specific issue, and a
concrete fix. Plus 2-3 things that are genuinely good (be fair). Flag any finding that could be
a screenshot/capture artifact as "verify live" before acting on it.

## Rules
- Be demanding but fair. Name the location and give a concrete fix for every point.
- Measurement first, then judgement. Numbers settle arguments; "looks premium" does not.
- Pin every rule to the brand's own tokens and type scale, never a generic house style.
- Never invent an issue to pad the list. If the site is strong, say so.
- A full-page screenshot can produce false "duplicate section" or "white void" findings;
  verify those in a live browser before reporting them as bugs.