skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-16 16:16:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add undersized-ui-text rule for functional text below an 11px floor

Browse Source 
The existing `tiny-text` rule owns long body copy and deliberately exempts
the UI furniture layer (nav, footer, links, buttons, labels, uppercase
micro-labels). That left a real gap: a build shipped its entire furniture
layer (nav links, category names, timecodes, meta rows) at 8px because the
chosen pixel font only steps in 8px increments, and the design hook waved it
through as merely "not on the DESIGN.md ramp" -- which the model resolved by
adding 8px to the ramp. Being on the ramp launders the token, not the
legibility problem.

New `undersized-ui-text` quality rule closes that laundering path:

- Flags interactive and short content-bearing text (links, buttons, nav
  items, labels, table cells, meta rows, timecodes) below an 11px floor. The
  floor holds inside a footer; only non-interactive legal smallprint gets the
  softer 10px floor.
- Ignores the design system entirely, so a value ON the ramp is still
  flagged.
- Uppercase letterspaced micro-labels stay in scope (still functional).
- Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal
  contexts. em/rem/%-sized text that computes at or above the floor never
  fires.
- Complements tiny-text without double-flagging: long non-furniture body
  copy stays with tiny-text.

Implemented as a single check in checkQuality (rules/checks.mjs), so both the
static-html (jsdom) and browser adapters pick it up through the unified
per-element path -- no dual wiring. Registered in registry/antipatterns.mjs.

TDD: fixture tests/fixtures/antipatterns/undersized-ui-text.html (7 flag / 7
pass shapes), failing test first, then implement. Full fixtures suite 64/64.

Deferred (blocked by an active release-gate eval reading build/_data/dist):
regenerate the browser bundle (bun run build:browser ->
cli/engine/detect-antipatterns-browser.js) and the extension detector
(bun run build:extension -> extension/detector/detect.js + antipatterns.json)
so the standalone browser/extension artifacts carry the new rule.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-07-22 12:23:06 -07:00
co-authored by Claude Fable 5
parent 270f4d20aa
commit daec380cdb
4 changed files with 221 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cli/engine/registry/antipatterns.mjs
+8
View File
@@ -410,6 +410,14 @@ const ANTIPATTERNS = [
description:
'Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.',
},
{
id: 'undersized-ui-text',
category: 'quality',
scopes: ['type'],
name: 'Undersized functional text',
description:
'Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.',
},
{
id: 'all-caps-body',
category: 'quality',