ENFORCE design-system in CI: enforcing gate-ds-conformance + typography/spacing/layout coverage + visual-regression/frames Playwright gate

[izzywdev]

@claude — The design-system is NOT being enforced; prod UI is visually inconsistent (fonts, alignment, layouts). The gate-ds-conformance gate shipped report-only (|| true) and only greps for raw hex/px/font — it never blocks, and it can't catch visual inconsistency. Harden the ADLC so design-system-first is actually ENFORCED. Author canonically in FuzeSDLC (L0) + propagate to FuzeFront. Land via PR.

Make it enforcing + catch real inconsistency

1. Flip gate-ds-conformance to ENFORCING (remove the || true / report-only) so a PR with non-token UI FAILS. Keep the per-component @claude extraction-issue behavior.
2. Broaden the conformance check beyond raw hex/px: also FAIL on
   • hard-coded font-family / font-size / font-weight / line-height not from the typography tokens,
   • hard-coded spacing/margins/padding not on the spacing scale,
   • ad-hoc layout (raw fl/grid values, magic widths) outside the layout primitives,
   • inline style={{…}} with literal visual values, and
   • re-declared components that duplicate an existing DS primitive.
     Exclude the design-system package itself. Make the messages actionable (file:line + the token to use).
3. Add a VISUAL verification gate (this is the missing piece — grep can't see misalignment): wire the ui-frame-contract Playwright-against-approved-frames as a REQUIRED pre-merge gate, and add visual-regression / screenshot-diff of the key screens (shell, billing, security/org, app menu) against approved baselines so font/alignment/layout drift FAILS CI. frontend-test-engineer owns the Playwright/visual side.
4. Wire both as required status checks in the harden-gate stack + the branch ruleset (devops-engineer applies the ruleset once the repo is clean).
5. Update the baseline + frontend-engineer/frontend-test-engineer agent defs: every UI PR must pass the enforcing DS gate + the visual gate; design-system-first is a hard merge gate, not advisory.

STATE

done = report-only token-grep gate exists (#108); remaining = enforcing + typography/spacing/layout/inline-style coverage + visual-regression/frames-Playwright required gate + ruleset wiring + agent-def updates. decisions = design-system-first is a BLOCKING gate.

End with DONE: <PR links FuzeSDLC + FuzeFront>. @izzywdev BLOCKED: <q> + STATE if blocked.

[claude]

Claude finished @izzywdev's task in 5m 2s —— View job

---

Enforcing the design-system gate + visual-regression gate

Working through this now.

• Read the existing harden-gate / adherence config / DS manifest / agent defs
• Author the enforcing ds-conformance checker (hex/rgba + font/size/weight/line-height + spacing + layout + inline-style + duplicate-primitive, actionable file:line + token, excludes the DS package, exits non-zero)
• Broaden the _adherence.oxlintrc.json lint rules (warn → error, typography/spacing/inline-style)
• Wire an npm run ds:conformance script
• Author the visual-regression / ui-frame-contract Playwright gate (shell, billing, security/org, app menu) against approved baselines
• Update frontend-engineer + frontend-test-engineer agent defs (DS gate + visual gate = hard merge gates)
• Update the CLAUDE.md overlay (design-system-first = blocking)
• Document the exact harden-gate.yml jobs + branch-ruleset required-checks wiring (I cannot edit .github/workflows/* myself — App permission limit)
• Commit + push + PR link
• Note the FuzeSDLC (L0) canonical change as a cross-repo delegation