Second batch. Covers the seven skills that improve existing interfaces
along a single dimension at a time.
- typeset: fix generic typography (fonts, hierarchy, scale, readability)
- arrange: fix layout, spacing, and visual rhythm
- colorize: add strategic color to monochrome interfaces without slop
- animate: purposeful motion that conveys state, never decoration
- delight: small personality moments that turn functional into memorable
- bolder: push safe designs toward impact without sliding into loud
- quieter: tone down overstimulating designs while keeping their intent
Each wrapper keeps the four-section template (When to use it / How it
works / Try it / Pitfalls), stays concrete, flags the neighboring skill
when the user is reaching for the wrong tool, and calls out the explicit
anti-patterns each skill refuses to produce (bounces for animate, extra
colors for colorize, decoration for the rest).
First batch of hand-written editorial wrappers. Each wrapper lives at
content/site/skills/{id}.md and renders above the auto-generated SKILL.md
body on the skill detail page.
Shape follows the standard four-section template: When to use it / How
it works / Try it / Pitfalls. Plus a tagline in frontmatter that the
page template uses in place of the bare frontmatter description.
Shipped:
- impeccable: the foundation skill, why it exists, and when to call teach
- critique: the two-assessment design review with heuristic scoring
- audit: five-dimension technical quality check with P0-P3 severities
- polish: the meticulous final pass, what it covers, when not to run it
- shape: discovery interview that produces a design brief
- distill: ruthless subtraction, when it helps vs when to reach for arrange
- harden: edge cases, i18n, error states, production readiness
Tone: direct, opinionated, no hedging, no em dashes, concrete try-it
examples with expected output shapes. Next 14 wrappers ship in batches
2 and 3.
Builds on the /skills overview landing. Every skill detail page now lives
inside the same sticky-sidebar shell, with the active skill marked via
aria-current and pulled out of the list with a 2px accent border.
- scripts/build-sub-pages.js: detail pages now wrap the .skill-detail
body in wrapInDocsLayout() and pass currentSkillId into the sidebar
renderer so the active row is marked
- public/css/sub-pages.css sidebar pass:
- Narrow from 260px to 200px (was way too wide for the content)
- Drop the redundant "Skills" label at the top (it was visually
competing with the category titles); keep the node for a11y via
visually-hidden styling
- Group titles shrink to 0.625rem mono uppercase in --color-ash so
they read as quiet signposts, not headings
- Tighten item line-height to 1.5 and vertical padding to 3px
- Replace the box-shadow inset accent with a border-left accent on
the active item, leaving it visually pulled left
- Simplify .skill-detail sizing so it works inside .skills-main
without its own max-width / padding
- Ban em dashes in user-facing copy everywhere:
- Rewrite 9 copy lines in index.html, 2 title tags in gallery.html,
inline category descriptions, the /skills overview lede + how-to,
two skills-generator comments, one aria-label, and the page titles
for Skills and skill detail pages
- New validateNoEmDashes step in scripts/build.js scans content/site,
public/*.html, and the sub-page generator sources. Build fails on
any — or — in user-facing copy. Uses commas, colons, periods,
or parentheses instead
Build green: all 26 HTML entrypoints bundle cleanly, all four hand-authored
pages retain the shared site header, anti-pattern rules still match
SKILL.md, zero em dashes.
- Kill double underlines on nav items and brand: scope '.site-header a
{ text-decoration: none }' more specifically so the page-level 'a'
rule in main.css can't bleed through
- Add an inline SVG logo mark next to the 'Impeccable' wordmark (reuses
the favicon.svg glyph, inlined so Bun's HTML loader doesn't try to
bundle '/favicon.svg' from a non-relative path)
- Add a subtle GitHub star pill (icon + 17k + small star) at the far
right of the header; replaces the bare 'GitHub' nav text link
- Remove the duplicate .github-link floater from the hero on the landing
page; the header pill is the single place for the stars signal now
- Mobile: stop nav items from wrapping mid-word; lower the breakpoint
to 820px; enable horizontal scroll with a mask fade on the right;
hide the 'Home' link on mobile (the brand is already the home link);
hide the brand wordmark below 480px (logo glyph alone); hide the 17k
label inside the github pill on mobile (keep the icon + star)
Groundwork for new /skills, /anti-patterns, /tutorials sections.
No user-visible changes yet — this is pure plumbing.
- Split main.css into tokens.css (design tokens + reset, ~100 lines) and
main.css (everything else, imports tokens.css). Lets sub-pages import
only tokens without pulling in the landing-page component CSS.
- Add marked as a dependency.
- Add scripts/lib/render-markdown.js: marked wrapper with a custom link
resolver (skill slugs, reference/*.md anchors, external rel=noopener),
stable heading slugger, and terminal-style code blocks.
- Add scripts/lib/render-page.js: page shell wrapper that injects the
shared site header partial with aria-current marking.
- Add content/site/partials/header.html: shared site header with nav
(Home / Skills / Anti-Patterns / Tutorials / Gallery / GitHub).
- Add public/css/sub-pages.css: shared styles for generated pages, with
.site-header styling (sticky, backdrop blur, accent-underlined active
nav item) and mobile collapse.
Build still produces the same 104 KB landing-page CSS chunk; tests pass.
Paul Bakaus