UI audit: layout, consistency, and 46 AI-slop patterns

[ncolesummers]

Summary

Audit the portal UI for layout integrity, cross-surface consistency, and absence
of the 46 "AI slop" patterns catalogued at https://impeccable.style/slop/, then
fix small findings inline and convert larger ones into prioritized follow-ups.
This is a pre-ship design-quality gate — the visual counterpart to the MVP
security review (#16) — covering the eight portal surfaces
(src/app/(portal)/{page,catalog,loops,approvals,runs,settings,deployments} and
src/app/github) and the shared component library (src/components/ui,
src/components/portal, plus their Storybook stories).

The output is a durable checklist and findings, not a one-time pass: the audit
extends docs/design-review-checklist.md so the slop scan and the layout /
consistency checks below become a repeatable pre-merge gate.

Focus areas

1. Layout (the user's first priority)

• No content overflow or clipped positioned children (slop [codex] Capture issue implementation guidance #29, [codex] Persist GitHub webhook intake fixtures #30); wide
  content (tables, logs, SHAs) scrolls inside its own container, page body never
  scrolls horizontally.
• Stable dimensions across loading / empty / error states — no layout shift
  (AGENTS.md design principle 6).
• Line length ≤ ~80ch on text surfaces ([codex] Persist GitHub SSO identity #28); deliberate spacing rhythm rather
  than one repeated value ([codex] Authenticated app shell and navigation #25); adequate padding, nothing touching the viewport
  edge ([codex] Add v1 loop manifest contract #39, Harden PGlite integration test harness and migration replay performance #40).
• Mobile / narrow-viewport overflow holds (reuse the Wire portal pages to seeded database records with fixture fallback parity #37/Add seeded Postgres Playwright coverage for DB-backed portal pages #82 Playwright overflow
  coverage as the pattern).

2. Consistency (second priority)

• All state uses the StatusBadge / STATUS_META vocabulary
  (src/components/ui/status-badge.tsx); no ad-hoc status styling (principle 3).
• Tokens and shared primitives over one-off styles; chrome stays monochrome,
  color only carries semantic status (principles 1–2).
• Consistent, non-flat type hierarchy across pages (Repo catalog MVP #8); consistent card /
  primitive usage, no nested-card depth creep (docs(adr): ratify foundational ADRs and document decision lifecycle #26), no endlessly identical card
  grids where a denser layout is warranted (Issue #23: M1 design-system component build-out #24).

3. The 46 slop patterns

• Run the full list against every surface. Note which our design system already
  precludes so effort concentrates on real exposure:
  • Already immunized by ADR 0009 tokens — AI palette / purple-cyan (Review foundational ADRs and decision lifecycle #18),
    dark-mode glow (Implement persona-derived MVP acceptance tests #19), gradient text (Seed data and fixture operating model #20), cream/beige base (feat(design-system): M1 direction — monochrome tokens, GitHub fonts, StatusBadge #22), and the
    over-exposed Geist typeface (PR creation path #15, we use Mona Sans / Monaspace Neon).
  • Already gated by axe/a11y tests — low contrast (feat: run timeline, artifacts, and approval gates #42), skipped heading
    levels (Research loop skeleton #43); confirm coverage actually spans every audited surface rather
    than assuming it.
  • Actual exposure to scan hard — layout/overflow ([codex] Persist GitHub SSO identity #28–30, [codex] Add v1 loop manifest contract #39, Harden PGlite integration test harness and migration replay performance #40),
    monotonous spacing ([codex] Authenticated app shell and navigation #25), flat hierarchy (Repo catalog MVP #8), nested/identical cards
    (Issue #23: M1 design-system component build-out #24, docs(adr): ratify foundational ADRs and document decision lifecycle #26), tight line-height / tiny body text / wide tracking (Research planner subagent #44, Researcher subagent #45,
    Research author subagent #46), motion tells ([Task]: Add pglite-backed GitHub webhook store integration tests #31–33 vs prefers-reduced-motion), and the copy tells
    in our UI strings and docs — em-dash overuse (test(github): add pglite-backed webhook store integration tests #34), marketing buzzwords
    (Implement repo catalog MVP #35), aphoristic/"theater" framing ([codex] Expose Vercel deployment visibility #36, Wire portal pages to seeded database records with fixture fallback parity #37).

Deliverables

• A findings report mapping each audited surface × each relevant slop pattern +
  layout/consistency check to pass / fail / N-A, with file references for
  failures. The impeccable:audit skill may be used to generate the first pass.
• Small, low-risk fixes applied inline (spacing, padding, line-length caps,
  overflow containers, status-vocabulary swaps, copy tells).
• Larger fixes (redesigns, new primitives, motion rework) converted into
  explicitly prioritized follow-up issues rather than done here.
• docs/design-review-checklist.md extended so the slop scan + layout /
  consistency checks are a standing pre-merge gate, cross-linking ADR 0009.
• Any new automated guardrail (e.g. a Storybook/Playwright/axe assertion or lint
  rule for tight line-height, tiny text, letter-spacing, or overflow) is written
  test-first (red before green), per AGENTS.md TDD.

Acceptance Criteria

• Every portal surface and shared UI primitive is assessed against the layout
  and consistency focus areas and all 46 slop patterns, with results recorded.
• Findings are either fixed or converted into prioritized follow-up issues; none
  are left implicit.
• No horizontal body scroll, content overflow, or clipped positioned child
  remains on any audited surface at desktop and narrow-mobile widths.
• Status rendering across all surfaces uses StatusBadge / STATUS_META; WCAG
  AA contrast holds in both themes (axe-enforced) on every audited surface.
• docs/design-review-checklist.md reflects the slop scan and layout /
  consistency checks as a repeatable gate.
• Any new guardrail demonstrates a red state before green; runtime changes
  include bun run build, broad changes finish with bun run validate.

Notes

Keep GitHub as the durable planning surface. This complements, and does not
replace, the existing per-PR design review checklist. Pairs with #16 (security
review) as the two pre-MVP quality gates.

Refs ADR 0009 (design system direction and tokens)
Refs docs/design-review-checklist.md
Refs https://impeccable.style/slop/