mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 07:06:45 +03:00
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:
co-authored by
Claude Opus 4.6
parent
83330a66cb
commit
e1032b7285
@@ -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 65–75ch so the eye can track easily
|
||||
|
||||
### Visual Details
|
||||
**DO**: Use intentional, purposeful decorative elements that reinforce brand
|
||||
|
||||
Reference in New Issue
Block a user