Add icon-tile-stack rule and cross-validate engine against skill

A new icon-tile-stack detection (the canonical AI feature-card with a
small rounded-square icon container above a heading), backed by a
two-column TDD fixture, plus a single-source-of-truth design that ties
the engine to the impeccable skill so they can no longer drift silently.

Detection
- New icon-tile-stack rule (slop): heading's previousElementSibling is
  a 32–128px rounded-square element with a non-transparent background
  or border, contains an svg/icon-i child, and sits above (not next to)
  the heading. Excludes round avatars, wide thumbnails, side-by-side
  layouts, tiny icons, and hero images.
- Two-column fixture convention: a single icon-tile-stack.html with a
  flag column (4 cases) and pass column (6 cases), with snippet-text
  matching used by the fixture test.

Single source of truth
- Each ANTIPATTERNS entry can now declare skillSection + skillGuideline.
  18 of 25 rules carry these fields; the build's new
  validateAntipatternRules() in scripts/build.js fails if any declared
  skillGuideline isn't found verbatim in the right SKILL.md section.
- scripts/build-extension.js now includes the description field in
  extension/detector/antipatterns.json (it was previously dropped).
- The existing count validator was promoted from warn to error so
  command count drift fails the build the same way detection drift does.

Impeccable skill DON'Ts
- Added 4 new top-level DON'Ts that target real default AI behavior:
  single-font, flat-type-hierarchy, all-caps-body, line-length.
- Cut 7 new DON'Ts I had drafted (tight-leading, tiny-text, wide-tracking,
  justified-text, low-contrast, cramped-padding, skipped-heading) because
  they teach things every model already knows from CSS/a11y basics. The
  detector still catches all of them.

Stale count cleanup
- 22 commands → 21 across 17 references in HTML, README, NOTICE, AGENTS,
  plugin.json, marketplace.json (left over from the validate skill removal).
- Dropped the hand-coded "212 design guidelines" marketing copy on the
  homepage, which never mapped to any real count.

Sub-agent
- New private .claude/agents/anti-patterns.md captures the full TDD
  recipe, schema, plug-in points, jsdom constraints, and pre-commit
  checklist so future sessions can add rules end-to-end without
  re-investigating the wiring.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-06 22:58:13 -07:00
co-authored by Claude Opus 4.6
parent 83330a66cb
commit e1032b7285
27 changed files with 1026 additions and 30 deletions
+4
View File
@@ -56,6 +56,9 @@ Choose fonts that are beautiful, unique, and interesting. Pair a distinctive dis
**DON'T**: Use overused fonts like Inter, Roboto, Arial, Open Sans, or system defaults
**DON'T**: Use monospace typography as lazy shorthand for "technical/developer" vibes
**DON'T**: Put large icons with rounded corners above every heading. They rarely add value and make sites look templated
**DON'T**: Use only one font family for the entire page. Pair a distinctive display font with a refined body font
**DON'T**: Use a flat type hierarchy where sizes are too close together. Aim for at least a 1.25 ratio between steps
**DON'T**: Set long body passages in uppercase. Reserve all-caps for short labels and headings
### Color & Theme
*Consult [color reference](reference/color-and-contrast.md) for OKLCH, palettes, and dark mode.*
@@ -84,6 +87,7 @@ Create visual rhythm through varied spacing, not the same padding everywhere. Em
**DON'T**: Use the hero metric layout template (big number, small label, supporting stats, gradient accent)
**DON'T**: Center everything. Left-aligned text with asymmetric layouts feels more designed
**DON'T**: Use the same spacing everywhere. Without rhythm, layouts feel monotonous
**DON'T**: Let body text wrap beyond ~80 characters per line. Add a max-width like 6575ch so the eye can track easily
### Visual Details
**DO**: Use intentional, purposeful decorative elements that reinforce brand