mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Paul Bakaus
e49a4b4a02
Add the anti-patterns browser. Single page, same docs-browser shell as
the skills section, but the sidebar is a table of contents instead of
a navigation list.
- scripts/build-sub-pages.js
- groupRulesBySection(): bucket the 25 detection rules by skill
section (Visual Details, Typography, Color & Contrast, Layout &
Space, Motion) plus a 'General quality' bucket for the 7 rules
without a skillSection cross-reference. Each bucket sorts slop
rules first, then quality rules alphabetically.
- renderAntiPatternsSidebar(): TOC with anchor links to each
section, per-section rule count on the right, reusing the
.skills-sidebar styles with anti-patterns-specific tweaks for
the two-column item layout.
- renderRuleCard(): rule id + category badge + name + description
+ optional 'See in /impeccable' link that jumps to the right
anchor on the skill detail page.
- renderAntiPatternsMain(): editorial header ('25 detection rules')
+ 'How to read this' legend callout + six sections each with a
grid of rule cards.
- Wire the new page into the main generator loop.
- public/css/sub-pages.css
- .rule-card grid (auto-fill minmax 320px) with header row, mono
rule id, pill category badge, bold name, body description,
arrow skill link at the bottom.
- .rule-card-category variants: slop uses accent-dim background
with accent text, quality uses mist background with charcoal text.
- Section headers with baseline-aligned title and right-aligned
rule count, matching the rhythm of the /skills overview.
- Anti-patterns sidebar count styling (tabular-nums, ash).
Verified: /anti-patterns returns 200 with 25 rule cards rendered across
all six section anchors.