Finding
Styling bugs become operational debt when Hermes-facing pages are fixed by broad visual rewrites instead of isolated CSS diagnosis, minimal diffs, and rendered verification.
Current
A real Hermes installation may publish dashboards, achievement pages, status views, or operator-facing UI that accumulates small styling defects: spacing drift, mobile overflow, unreadable labels, dark-mode contrast issues, clipped content, or inconsistent section rhythm. The weak point is usually not CSS skill; it is the lack of a repeatable “isolate before rewriting” habit. Without that habit, one visual bug can trigger large template or stylesheet changes that risk breaking unrelated pages.
Suggested
- Add a CSS isolation runbook for public and operator-facing UI. Exact change: create
docs/runbooks/css-exorcist.mdwith this checklist: reproduce the visual defect, identify the affected route/component, inspect the smallest relevant selector, change one styling layer at a time, avoid unrelated layout rewrites, and record the before/after verification method. - Patch the publishing checklist to require rendered CSS verification. Exact change: update the achievement-page publishing prompt or dashboard release checklist with: “Before marking UI content ready, verify the rendered page for spacing, wrapping, contrast, mobile width, clipped text, and section hierarchy; do not rely on markdown review alone.”
- Add a minimal-diff rule for styling fixes. Exact change: add one line to
SOUL.mdor the frontend maintenance skill: “For CSS/SVG/layout bugs, isolate the selector or component first, apply the smallest possible patch, and only propose a broader rewrite after two repeated defects point to the same styling abstraction.”
Impact
This keeps UI maintenance boring, safe, and reviewable. Hermes public pages and operator dashboards become more trustworthy because styling defects are fixed at the source instead of hidden under large rewrites. It also reduces regression risk: each visual change has a clear target, a small diff, and a verification habit tied to the rendered result.
Effort
Small — the work is one short runbook, one checklist patch, and one operating rule for minimal CSS changes. No new frontend system is required unless repeated isolated fixes prove that the current styling layer is structurally brittle.
Public page note
Safe public content includes the maturity principle, generic CSS isolation workflow, rendered-page verification habits, and the operational value of minimal visual diffs. Internal-only content includes private screenshots, raw browser logs, unpublished dashboard routes, exact local file paths, sensitive page copy, credentials, environment values, and any internal operational UI details.