anti-slop-redesign

Most UI work changes a surface that already ships. Misclassifying the mode is
the biggest source of bad redesign output: a "refresh" that renames routes,
breaks e2e selectors and drops keyboard shortcuts is a regression, however
good it looks. This skill makes the mode, the audit and the protected list
explicit before anything is touched.

Authority: advisory. Findings feed the frontend-mockup-loop FIX step and
never override a WCAG-AA or severity gate. When a recommendation conflicts
with a gate result, the gate result stands and the recommendation is recorded
as overridden. The tell catalog itself lives in anti-slop-frontend; this
skill decides what may change and in which order.

When to Use

• A request to redesign, modernise, refresh or de-template an existing surface.
• Before frontend-mockup-loop MOCKUP on any surface that already ships.
• Not for a site with no shipped design: that is new-site → greenfield.

Procedure

1. Declare the mode (before any edit)

State the anti-slop-frontend Design Read, then one of three modes:

Mode	Means
greenfield	no existing design, or a full rebuild was explicitly approved
preserve	modernise without breaking brand, IA, copy voice or hooks
overhaul	new visual language on the existing content and IA

Defaults per surface profile:

Profile	Default mode
product-ui	preserve
marketing	preserve
new-site	greenfield

• overhaul requires explicit user confirmation before proceeding. Ask once
  (ask_user when available); without a yes, stay in preserve.
• Pick overhaul only when the visual debt is structural (no design system,
  broken mobile, broken IA). Sound IA and content → preserve.

2. Audit before edit

Produce the audit before touching any file. A redesign whose first artifact is
a diff fails Verification.

• Screenshot of the current surface (both modes if the project ships both).
• Brand tokens in use: colour tokens, type stack, radius scale, logo.
• Tells found: run the anti-slop-frontend checklist for the declared
  profile; list each hit with its rule id (A3, B2, ...).
• Missing states: loading / empty / error that do not exist yet.
• Protected inventory: list the items from "Never change silently" that
  the surface contains (routes, nav labels, field names, shortcuts,
  data-testid values).
• Dial reading of the existing surface. That is the starting point, not a
  baseline.

3. Levers in priority order

Apply in order; stop as soon as the brief is satisfied. Each lever is a
separate, reviewable step.

1. Typography - family, scale, weight hierarchy. Biggest lift per risk.
2. Colour - unify neutrals, one accent, tokens only (anti-slop-frontend A1, T1).
3. Spacing and rhythm - consistent scale, section padding, max-width.
4. States - hover / active / focus, then loading / empty / error.
5. Motion - only motivated motion at the declared MOTION dial (A7).
6. Layout - recompose a section only when levers 1-5 cannot fix it; full
   block replacement only for an unsalvageable block.

In preserve, levers 1-4 are the default scope; 5-6 need a reason in the
audit.

4. Verify the protected list

Diff the result against the protected inventory from step 2. Every changed
protected item must be listed and confirmed (see below), or reverted.

Never change silently

In preserve and overhaul, these do not change unless the change is listed
explicitly and the user confirms it:

• routes / URLs and anchor ids
• nav labels
• form field names (and their order)
• brand wordmark and logo
• legal copy (consent, cookie, terms)
• keyboard shortcuts
• data-testid attributes (e2e suites select on them)

Also preserve, unless asked: copy voice, existing accessibility wins (focus
states, alt text, keyboard nav, contrast), and analytics event names.

Rules

• Work with the existing stack. No framework or styling-library migration.
• Check the dependency file before importing anything new.
• Do not break existing behaviour; run the project's tests after each lever.
• Small, reviewable changes over one big rewrite.

Pitfalls

• Do NOT start editing before the mode and audit exist.
• Do NOT treat "make it modern" as approval for overhaul.
• Do NOT rename a data-testid to match a new component name; the e2e suite
  breaks silently in CI, not locally.
• Do NOT use a tell from the audit to justify violating a WCAG-AA gate.

Verification

• A mode was declared before the first edit; overhaul has a recorded
  confirmation.
• The audit (screenshot, tokens, tells, missing states, protected inventory)
  predates the first diff.
• Levers were applied in priority order; skipped levers are named.
• Every protected item that changed is listed with its confirmation; all
  others are byte-identical.