Skip to content

feat(mint): add layout health check to CSS audit prompt - #109

Draft
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-layout-health-check
Draft

feat(mint): add layout health check to CSS audit prompt#109
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-layout-health-check

Conversation

@nujovich

@nujovich nujovich commented Aug 17, 2026

Copy link
Copy Markdown
Owner

Card: https://github.com/nujovich/mint-radar/issues/14

What: Adds a new "LAYOUT HEALTH" step (STEP 14) to the CSS audit prompt in lib/prompts.mjs. The step detects two layout anti-patterns: nested grid containers that re-declare their own tracks instead of using subgrid, and flex items with a fixed flex-basis that risks overflowing a nowrap container. Results are emitted as a new layoutWarnings array with pattern, element, severity, and suggestion fields.

Why: Mint already audits colors, fonts, spacing, motion, accessibility, and overflow safety, but has no detection of grid-subgrid misuse or flex-basis overflow risk. These anti-patterns are statically detectable and produce misaligned gutters and clipped content. Surfacing them closes the gap between Mint's semantic audit and the CSS layout pain points catalogued by Patrick Brosset.

Milestones

  • Milestone 1 — Extend audit prompt in lib/prompts.mjs with STEP 14 (LAYOUT HEALTH): nested grid without subgrid + flex overflow risk, plus the layoutWarnings field in the output example
  • Milestone 2 — Add layoutWarnings field to AuditReport type in lib/types.ts
  • Milestone 3 — Wire layout warnings in playground UI as layout health alerts
  • Milestone 4 — Add test fixture with problematic layout patterns and tests in lib/__tests__/

Milestone 3 detail

Wired layoutWarnings into the playground UI as a "Layout health" lint group:

  • lib/audit-summary.mjs — added a layoutWarnings entry to LINT_CATEGORIES (shortLabel layout health, label Layout health), so collectLintGroups surfaces layout warnings in the "Layout linting" section and formatLintSummary includes the count in the CLI summary line.
  • components/AuditView.tsx — extended the LintIssue interface with element and suggestion (both optional) and updated the renderer to fall back to issue.element for the code line and issue.reason || issue.suggestion for the description, matching the LayoutWarning shape (pattern/element/severity/suggestion).
  • lib/__tests__/audit-summary.test.mjs — added tests for the layout health count in formatLintSummary and the layoutWarnings group in collectLintGroups (label + raw element/suggestion preservation).

How to test:

npm test

@nujovich

Copy link
Copy Markdown
Owner Author

BUILD 2026-08-20: All milestones complete. Ready for review when you are.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant