Ocd

OCD

A zero-tolerance audit-and-fix pass over the whole project: first visual, then code. The user notices half-cell misalignments and one-frame layout shifts; assume anything you would shrug off, they will not. Do not report a list of suggestions - fix everything you find, then report what changed.

Method

1. Inventory - enumerate the surfaces: every screen/state the UI can render, every file in the diff or project scope.
2. Verify empirically - never judge alignment from source code. Render it: browser screenshot, TUI char-frame dump, test render. Measure columns and rows; count cells.
3. Simulate the states - each invariant must hold across all dynamic states, not just the one on screen: empty vs full lists, 0% vs 100%, shortest vs longest string, idle vs active, first vs last selection. Layout bugs live in the transitions.
4. Fix the root cause - a guard in the shared function, not a patch at the call site that surfaced it.
5. Re-verify - render again, measure again. A fix is not done until re-measured.
6. Report - terse table: file:line - violation - fix. No essays.

Visual invariants

Check each of these against rendered output, in every state:

• Alignment: elements that read as related must share an exact row or column. Headers of sibling panels top-align; baselines of adjacent blocks bottom-align when designed to; an element anchored to another (e.g. a control under a stats row) aligns to a specific glyph column, computed from the same data that renders the anchor - never hardcoded, or it drifts when the data changes width.
• No layout shift: static elements never move when dynamic content changes. The usual culprits and their fixes:
  • variable-width labels (0% vs 100%) → pad to fixed width;
  • centering against content whose width varies → center inside a fixed-width box;
  • rows/sections that appear and disappear → reserve the space, or size windows so row counts stay constant (at list edges, extend the window the other way instead of shrinking it);
  • conditional gaps → make the gap unconditional or remove it.
• Centering parity: cells and pixels quantize. A 1-unit glyph cannot truly center over an even-width element - it lands half a unit off, every time. Match parity (odd over odd, even over even) or pad strings manually to a fixed odd width. Do not trust flexbox/yoga auto-centering when exactness matters; it rounds.
• Spacing hierarchy: crowded means no hierarchy. Use blank lines, indentation, and dimming (bright for the focal element, muted for secondary, faint for chrome) so each block reads at a glance. Dead space is the opposite bug: a gap wider than intended is usually a container sized wider than its content - measure the content and size to it.
• Consistency: one separator glyph everywhere (not — here and - there), one prefix style per row class, uniform truncation lengths, color roles held constant (accent means active/link, nothing else). A single inconsistent cell reads as a typo.
• Animation: motion must be fluid and use its full range - crests reach the maximum, troughs thin out, no clipped flats, wavelength proportioned to the element. Live-data-driven animation (audio, metrics) needs normalization with a moving floor and ceiling; peak-only normalization saturates and pins everything at max.

Code invariants

• Root cause over symptom: before editing, trace every caller of the thing you are about to change. If the fix belongs in a shared function, one guard there beats a patch in each caller - and patching only the reported path leaves the siblings broken.
• Reuse before writing: existing helpers, palette constants, components, test harnesses. Re-implementing what lives three files away is the most common form of slop. Match the surrounding idiom and comment density.
• Smallest correct diff: no unrequested abstractions, no scaffolding for later, no config for values that never change.
• Checks stay green and meaningful: typecheck and tests pass; behavior changes come with updated assertions; non-trivial new logic leaves one runnable check behind (the smallest thing that fails if it breaks). Fix lint errors, test failures, and flakiness wherever encountered, even if unrelated to the current task.
• No residue: dead code, stale comments describing removed behavior, debug leftovers, inconsistent naming - all removed on sight.
• Prose rules: plain dash, never em dash. In long Markdown, each sentence on its own line.

Verification discipline

The difference between this skill and a normal review: measurements, not impressions.

• For terminal UIs: dump the char frame (test renderer) or read the terminal buffer; compare column indices between the anchor glyph and the element that must align to it. Render every reachable state and diff the frames - any static cell that changes position between states is a layout shift.
• For web UIs: screenshot and compare bounding rects across states; check computed styles for the centering basis.
• For animations: sample several frames of the driving function offline (the math is pure - simulate it in a script) and confirm range, fluidity, and absence of flats before shipping.

Report format

End with exactly this, nothing more:

FIXED
path:line - violation - fix
...
CLEAN
surfaces/invariants checked that had no violations (one line)