Commit Graph
173 Commits
Author SHA1 Message Date
Paul Bakaus ab4fa6d8a5 Update sitemap to cover all 29 canonical URLs
Sitemap previously listed only the landing page. Extend it to include
every canonical URL shipped in this IA expansion:

- 4 hand-authored pages (/, /cheatsheet, /gallery, /privacy)
- 3 section indexes (/skills, /anti-patterns, /tutorials)
- 21 skill detail pages (/skills/{id})
- 2 tutorial detail pages (/tutorials/getting-started, /tutorials/critique-with-overlay)

Priority ladder:
  1.0 landing
  0.9 section indexes
  0.8 detail pages
  0.7 utility pages (cheatsheet, gallery)

Note: privacy is intentionally not indexed (noindex meta) so it stays
out of the sitemap.

Smoke-tested all 31 live routes (29 pages + sitemap.xml + robots, not
the 2 that are noindex): all return 200.
2026-04-08 10:20:15 -07:00
Paul Bakaus 500fe448cd Generate /tutorials index + 2 walk-throughs
Third and final new section. Adds the tutorials browser with two
hand-written walk-throughs: "Getting started" and "Critique with the
visual overlay". Same docs-browser shell as skills and anti-patterns.

- content/site/tutorials/getting-started.md
  Five-minute install, teach, and first polish pass. Covers npx skills
  add, answering the teach interview honestly, and running /polish on
  an existing page. Includes common issues and what to try next.

- content/site/tutorials/critique-with-overlay.md
  Ten-minute walk-through of the full /critique workflow with the
  browser overlay. Covers the two-assessment model (LLM + detector),
  the three ways to open the overlay (extension, inside critique, or
  standalone via `npx impeccable live`), the fix-reload-verify loop,
  and how to interpret merged reports.

- scripts/build-sub-pages.js
  - renderTutorialsSidebar(): tutorial list with current-item marking
  - renderTutorialsIndexMain(): card grid with mono order numbers,
    italic display titles, taglines, arrow affordances
  - renderTutorialDetail(): breadcrumb eyebrow, italic display title,
    plain tagline, rendered markdown body inside .prose
  - Wire both into the main generator loop.
  - sub-pages-data.js already reads content/site/tutorials/*.md and
    sorts by frontmatter.order, so no data-layer change was needed.

- public/css/sub-pages.css
  - .tutorial-card grid (number, body, arrow) with hover border
    darken + arrow slide. Mono order numbers, italic display titles.
  - .tutorial-detail header with italic display title and plain sans
    tagline (matching the visual rhythm of skill detail pages without
    the mono command style since tutorials are prose, not commands).
2026-04-08 10:18:04 -07:00
Paul Bakaus e49a4b4a02 Generate /anti-patterns index page
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.
2026-04-08 10:14:18 -07:00
Paul Bakaus 9b1b709bab Align sidebar to header logo, bump sidebar font, rework detail title
Three tightening passes based on visual feedback.

- Sidebar alignment. The skills layout now uses the same horizontal
  padding clamp as the site header, so the sidebar column's left edge
  sits under the brand logo above. Sidebar items drop their 10px left
  padding and sit flush with the column edge; the 2px active-item
  accent lives in a -2px margin so it hangs in the layout gutter
  without pushing text right. Drop the max-width constraint so the
  docs shell extends wall-to-wall on wide screens like a real docs site.

- Sidebar font. The command list was 0.8125rem which read too small
  next to the sidebar group titles. Bump to 0.875rem and tighten the
  vertical rhythm (4px vs 3px padding, group title margin-bottom 6px).

- Skill detail title. The title was set in mono at ~3rem and the
  tagline in italic display, which inverted the visual weight (the
  tagline felt heavier than the title). Rework to match the landing
  page's .spread-command-name palette styling:
    - Title: display serif, clamp(3rem, 5.5vw, 5rem), line-height 0.95
    - Leading '/' split into <span class="skill-detail-title-slash">
      and colored with --color-accent at weight 300 so it reads as a
      quiet prefix glyph
    - Tagline: body sans at 1-1.125rem, no italics, max-width 60ch
2026-04-08 09:56:40 -07:00
Paul Bakaus 80d7502737 Extend docs-browser shell to detail pages, tighten sidebar, ban em dashes
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 &mdash; 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.
2026-04-08 09:45:13 -07:00
Paul Bakaus 88d647a555 Restructure /skills overview as a docs-browser layout
The old /skills was one long scrollable list. Replace it with a proper
app-shell layout: sticky left sidebar with every skill grouped by
category, main column on the right with an orientation piece (intro
+ 'how to pick one' callout + category sections with chip lists).

- scripts/build-sub-pages.js
  - renderSkillsSidebar(): the sticky left rail used across the /skills
    section. Takes an optional currentSkillId so we can mark the active
    skill with aria-current when detail pages adopt the same shell in a
    later commit
  - renderSkillsOverviewMain(): the right column. Editorial header,
    'how to pick one' callout that inlines 5 hot-link skill references,
    then one block per category (title, count, description, chip row
    of all skills in that category)
  - wrapInDocsLayout(): tiny helper that pastes the sidebar and main
    into a .skills-layout grid

- public/css/sub-pages.css
  - Copy .skip-link a11y styles over from main.css so the 'Skip to
    content' link is properly hidden until keyboard focus (was showing
    unstyled at the top-left of every generated page)
  - Add .skills-layout grid shell (260px sidebar + flex main column,
    max-width 1400px, clamp-based horizontal padding)
  - Add sticky .skills-sidebar with its own scroll-y overflow and a
    thin scrollbar; group titles + mono link list; aria-current styling
    with a 2px left accent bar
  - Add .skills-overview-howto callout, category sections with chip
    rows, and mobile collapse (sidebar becomes an inline block above
    the main column at <=920px)
  - Introduce --site-header-height and --skills-sidebar-width tokens

No detail page layout changes in this commit — those still use the
single-column .skill-detail shell.
2026-04-08 09:24:54 -07:00
Paul Bakaus 7847daffff Generate /skills index + 21 auto-rendered skill detail pages
Ships the first new sub-page section. Every user-invocable skill now has
its own page at /skills/{id}, with the canonical SKILL.md body rendered
via marked. The index at /skills lists all 21 skills grouped by category.

Editorial wrappers are opt-in: if content/site/skills/{id}.md exists, it
renders above the canonical body (with a "The skill itself" divider).
All 21 pages currently ship with the auto-rendered body only; hand-written
wrappers land in the next few commits.

- scripts/lib/sub-pages-data.js: builds the data model. Reuses
  readSourceFiles() from lib/utils.js for skill content; parses the
  ANTIPATTERNS array out of src/detect-antipatterns.mjs; reads optional
  editorial wrappers from content/site/skills/*.md; validates that every
  user-invocable skill has a category entry (build fails loudly if not).
- scripts/build-sub-pages.js: orchestrator. Writes generated HTML into
  public/skills/*.html (gitignored). Called from both scripts/build.js
  (before buildStaticSite) and server/index.js (at module load) so dev
  and prod share the same generation code path.
- scripts/lib/render-page.js: new assetDepth parameter so generated
  pages one level deep under public/ use relative paths (../favicon.svg,
  ../css/sub-pages.css) that Bun's HTML loader can resolve on disk.
- scripts/build.js: pass generated files into Bun.build entrypoints;
  post-process to flatten build/public/* → build/* (Bun preserves the
  public/ prefix when entrypoints span multiple depths).
- server/index.js: generateSubPages() runs at module load; new routes
  /skills, /skills/:id, /anti-patterns, /tutorials, /tutorials/:slug
  serve the pre-generated files via Bun.file().
- public/css/sub-pages.css: adds sub-page layout shell, skills index
  grouped-list styling, skill detail header/meta chips/divider, collapsed
  <details> reference sections, and a .prose block for rendered markdown
  with editorial typography, code blocks, and inline code.

Verified: bun run build produces 26 HTML files (4 hand-authored + 22
generated), all flat under build/. Dev server returns 200 on /skills,
/skills/polish, /skills/impeccable, /skills/critique. Tests pass.
2026-04-08 09:16:19 -07:00
Paul Bakaus c4dc0feb23 Polish the site header based on user feedback
- 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)
2026-04-08 09:03:13 -07:00
Paul Bakaus c598a63498 Add shared site header across all pages
Every hand-authored HTML page now carries the same sticky top nav:
Home / Skills / Anti-Patterns / Tutorials / Gallery / GitHub. The three
future sections (skills, anti-patterns, tutorials) will land behind
these links in subsequent commits.

- Add <header class="site-header"> with a <!-- site-header v1 --> marker
  to index, cheatsheet, gallery, privacy
- Each page links public/css/sub-pages.css so it picks up the shared
  header styling (sticky, backdrop blur, accent-underlined current item)
- Gallery: drop the inline .site-header/.header-brand/.header-nav
  definitions that predate the shared component (class names conflicted)
- Cheatsheet: restructure the page title into .cheatsheet-page-header
  so it doesn't collide with the new <header class="site-header">; move
  the page container max-width/padding off <body> onto .cheatsheet-page-header,
  main, and footer so the shared sticky header spans the full viewport
- Privacy: full styling refresh using sub-pages.css tokens + a small
  inline block for the page body typography
- Add a validateSiteHeader step to scripts/build.js that fails the build
  if any of the four pages drops the marker
- Add /privacy route to server/index.js so extensionless URLs work

All four built pages pass the marker check; dev server serves all four
with 200 and the shared header.
2026-04-08 08:09:41 -07:00
Paul Bakaus 54b687d16f Add sub-page render pipeline foundation
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.
2026-04-08 08:01:34 -07:00
Paul Bakaus 038d281247 Drop Tailwind CLI from the build
Tailwind was wired into the build but the project didn't actually use it:
no @tailwind/@theme/@apply directives in source CSS, no utility classes
in any HTML or JS, no tailwindcss dependency in package.json, and no
HTML page linked to the compiled styles.css output.

Bun's HTML loader already handles main.css's @import chain transparently
in both `bun run dev` and `bun run build`. Removing the Tailwind step:

- Deletes buildTailwindCSS() from scripts/build.js (and the now-unused
  execSync import)
- Removes public/css/styles.css (dead compiled output that nothing read)
- Updates CLAUDE.md to drop the "must rebuild Tailwind after CSS edits"
  instruction

Verified: `bun run build` produces the same 104 KB CSS chunk linked from
index.html via Bun's HTML loader. No more rebuild step after CSS edits.
2026-04-07 19:52:27 -07:00
Paul Bakaus d85efab51f Refine homepage layout: install, Stay updated, Changelog/FAQ, Visual Mode
- Restructure install section into a split primary card with the
  recommended path on the left and other install methods on the right
- Drop the prefix toggle UI; bundle name is now baked into data-bundle
- Balance the Stay updated step as paired Substack iframe + X follow card
  with matching height, border, and treatment
- Pair Changelog and FAQ side-by-side on desktop with a centered divider
  and shared border-top; section nav highlights both when in view
- Tone down the Visual Mode demo by removing side-tab borders, stacked
  card icons, and tiny body text so the overlay reads cleanly
- Refine the Chrome extension callout: drop the pill badge, use an
  editorial eyebrow above the title, enlarge the thumbnail
- Exclude private evals/ directory from version control
2026-04-07 18:37:08 -07:00
Paul BakausandClaude Opus 4.6 d63855341a Restructure Visual Mode right column as editorial blocks, add extension thumbnail
The Visual Mode section had three competing cards in the right column
(25 deterministic checks, Three ways to use it, Get the Chrome extension)
all wrapped in bordered/backgrounded containers. The live detection
overlay iframe on the left is the visual anchor for the section — the
right column should be quieter editorial blocks, not three cards
fighting for attention.

Layout changes
- Strip card chrome from .visual-mode-feature: no padding, background,
  or border-radius. Just an eyebrow label + paragraph in editorial flow.
- Strip card chrome from .detection-callout: no padding, background,
  border, border-radius, or hover-transform theatrics.
- Bump .visual-mode-details gap from spacing-md to spacing-xl so the
  three blocks breathe with editorial space instead of feeling stacked.
- Bump body text from 0.8125rem to 0.9375rem for readability without
  the card padding.

Extension callout
- Add extension-detection.png — a tight 600×508 crop of the Chrome
  extension's DevTools panel showing detected anti-patterns ("AI color
  palette", "Overused font", "Quality issues", "Low contrast text").
  Reads at thumbnail size and clearly shows the extension UI in action.
- Whole callout is a single anchor (entire row clickable).
- 88×88 image thumbnail on the left with a subtle border that shifts
  to accent on hover.
- NEW eyebrow stacked above the "Get the Chrome extension →" CTA, both
  left-aligned next to the thumbnail.

The result: the iframe carries the visual weight, the right column
becomes a quiet editorial sidebar, and the extension CTA gets just
enough visual punch (the thumbnail) without competing with the demo.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 09:46:43 -07:00
Paul BakausandClaude Opus 4.6 89f4ec41d7 Refocus Visual Mode section on the Chrome extension
The CLI command `npx impeccable detect src/` was promoted in the
"New!" callout but it scans static source files — that's a separate
feature, not visual mode. Replaces it with a "Get the Chrome
extension" CTA which is the actual way users get visual mode in
their browser.

Also updates the lead text to drop the /critique-specific framing
and reframes the second feature blurb to mention all three usage
modes (Chrome extension, /critique embed, npx impeccable live).

The .detection-cmd class is restyled from a code-block-with-arrow
to a proper link/button with hover state, since it's now a CTA
rather than a shell prompt.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 01:37:54 -07:00
Paul BakausandClaude Opus 4.6 b54c46cac7 Fix mobile horizontal overflow on the Language section
The .mobile-commands-layout was rendering at ~2400px wide on mobile,
blowing out the entire .language-section to 2457px and causing the
section-lead text, the periodic table area, and everything else to
overflow the viewport horizontally.

Root cause: grid and flex items default to min-width: auto, which
lets them expand to fit any intrinsically wide descendant. The mobile
commands layout contains a .split-container (the demo split-compare
component) whose intrinsic content is ~2400px wide. That width
propagated up the parent chain — through .mobile-commands-layout
→ .commands-gallery → .commands-subsection → .language-content grid
track — and stretched the entire section.

Fix: cascade min-width: 0 through every descendant of the section so
the constraint stops the propagation at every layer.

  .language-section,
  .language-section * {
    min-width: 0;
  }

Verified at 390×844 (mobile): bodyScroll matches viewport, zero
overflowing elements, the line-length detector finding on
.mobile-cmd-desc is gone. Verified at 1280×800 (desktop): periodic
table and magazine layout still render at full content width with
no regression.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 01:21:06 -07:00
Paul BakausandClaude Opus 4.6 0d59981499 Simplify homepage footer to a single editorial row
The previous footer split into two tiers with four different
interactive styles (plain underlined links, accent inline links,
round icon buttons, and pill CTAs with arrows). The hierarchy was
inverted — the loudest elements (Blog and Newsletter pills) were
secondary author plugs, while the actual primary nav was buried
as quiet underlined text.

Collapse to a single horizontal row with three groups:
  - Impeccable wordmark anchored left
  - 6 nav links centered in the middle column (auto / 1fr / auto grid)
  - "Created by Paul Bakaus" + X + LinkedIn icons anchored right

Removed:
  - Blog and Newsletter pill buttons
  - Two vertical dividers between author elements
  - Horizontal divider between the two former tiers
  - The 36×36 round social-button background fill on hover
  - Persistent underlines on all footer links

Interactive styles consolidated from 4 down to 2: plain text links
(nav + author credit) and inline icon links (socials). Both use the
same color → accent hover transition.

Mobile breakpoint reworked to stack the three groups in a single
centered column at 900px and below.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 01:09:02 -07:00
Paul BakausandClaude Opus 4.6 0566a60dfa Fix anti-patterns flagged by Impeccable on the homepage
- Hero demo card no longer uses <h3> for its title, fixing the
  h1 → h3 skip in the document outline. The "after" card now uses
  <p class="impeccable-title"> matching the structure of the
  corresponding "before" slop-card (which already used a <div>).
- Constrains .changelog-items and .faq-answer to max-width: 70ch so
  long bullet points and FAQ paragraphs don't exceed comfortable
  reading length (was hitting ~135 chars/line).
- Bumps the destructive-action warning text in the /clarify command
  demo from #a16207 to #854d0e on #fef3c7, lifting the contrast from
  4.4:1 (just below WCAG AA) to ~6.4:1.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 00:59:31 -07:00
Paul BakausandClaude Opus 4.6 e1032b7285 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>
2026-04-06 22:58:13 -07:00
Paul BakausandClaude Opus 4.6 83330a66cb Update commands grid layout and impeccable command demo
Adds the three /impeccable usage modes (freeform, teach, craft) to the
command demo, with a clearer multi-pane layout. Also tightens the
commands grid spacing on the site and refreshes the framework viz and
glass terminal styles for consistency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 21:34:56 -07:00
Paul BakausandClaude Opus 4.6 13b2f763d9 Polish Chrome extension for Web Store submission
Refactors the extension for on-demand injection (no static content_scripts
entry — content script and detector are loaded only when the user actively
opens the Impeccable panel, sidebar pane, or popup). Adds a new "Auto-scan"
preference (default: scan when the Impeccable panel opens, opt-in: scan
when DevTools opens) plus configurable line length (strict/lax) and
highlight blur on/off settings. Adds an Elements panel sidebar that shows
findings for the currently selected element.

Includes substantial overlay UX work: page-pixel-perfect spotlight mask
via clip-path, refined hover/dim states, instant transitions for snappier
feel, copy buttons for findings, hover-from-panel highlighting, and a
brand-aware exception list so the font check no longer flags Roboto on
Google's own properties.

Robustness fixes for the MV3 service worker lifecycle: heartbeat keepalive
plus auto-reconnecting ports across panel/sidebar/devtools so transient
SW restarts don't break the panel UI, and immediate teardown on DevTools
close (replacing an unreliable setTimeout-based defer that didn't survive
SW termination).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 21:06:09 -07:00
Paul BakausandClaude Opus 4.6 9ccdb9148a Reorganize periodic table, remove validate skill
New categories that distinguish create-new vs improve-existing:
- Create: shape, impeccable craft, impeccable, onboard, overdrive
- Evaluate: critique, audit
- Refine: typeset, arrange, colorize, animate, delight, bolder, quieter
- Simplify: distill, clarify, adapt
- Harden: normalize, polish, optimize, harden
- System: impeccable teach, extract

Also: remove Dt (detect CLI) from table, remove validate skill,
split /impeccable into its sub-commands (craft, teach).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 18:05:47 -07:00
Paul BakausandClaude Opus 4.6 7154b4d080 Tighten The Language section, update star count to 16k
- Remove redundant "Commands in Action" heading, replace with subtle hint
- Fix double spacing between section lead and periodic table
- Tighten grid gaps for more cohesive layout
- Update GitHub star count from 13.3k to 16k

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 17:34:31 -07:00
Paul BakausandClaude Opus 4.6 6ec6d97c9a Update partnerships section for Renaissance Geek, unify licensing to Apache 2.0
- Replace freelance "Work with me" with "Work with us" for Renaissance Geek
- Update contact email to paul@renaissance-geek.ai
- Simplify FAQ: everything is Apache 2.0
- Remove terminal license labels and tip button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 17:12:30 -07:00
Paul BakausandClaude Opus 4.6 3c9cc86061 Merge CLI into main repo, switch everything to Apache 2.0
Merges the impeccable-detect CLI repo (pbakaus/impeccable-cli@831a6cc)
into this repo. The BSL-1.1 license that motivated the split is gone;
everything is now Apache 2.0.

- Add bin/, src/, detection tests and fixtures from CLI repo
- Merge package.json: name → "impeccable", add bin/exports/files fields
- Internal refs now read from local src/ instead of node_modules/
- Update SPDX headers, NOTICE.md, CLAUDE.md, FAQ, npm README
- Add prepack/postpack scripts for CLI-focused README on npm
- Remove terminal license labels (no longer needed)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:50:33 -07:00
Paul BakausandClaude Opus 4.6 6c6b7fcc95 Add license labels to Get Started terminal headers
Shows "Apache 2.0" and "BSL-1.1 · Free for individuals and small teams"
right-aligned in the glass terminal title bars.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 20:27:36 -07:00
Paul BakausandClaude Opus 4.6 f9b78b1957 Replace spring bounce with ease-out-quint on foundation cards
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 20:18:14 -07:00
Paul BakausandClaude Opus 4.6 8531503f2c Rename /craft to /shape, add /impeccable craft, remove "--" pattern
- Rename /craft skill to /shape and make it planning-only (no code output)
- Add /impeccable craft sub-command that calls /shape, loads references,
  builds with visual iteration until delightful
- Replace all " -- " (em dash substitutes) with proper punctuation across
  all skill files and index.html
- Move v1.6 changelog entry to "View older releases" section

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 20:07:02 -07:00
Paul BakausandClaude Opus 4.6 ef871725c5 Remove /validate from v2.0 changelog (not ready yet)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:23:51 -07:00
Paul BakausandClaude Opus 4.6 6ff1333f08 Add /craft and /validate to v2.0 changelog
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:21:54 -07:00
Paul BakausandClaude Opus 4.6 2eb7674d0c Tighten v2.0 changelog: single CLI bullet, highlight critique browser overlay
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:16:23 -07:00
Paul BakausandClaude Opus 4.6 f2a40ba4c6 Fix changelog: scoring/personas were v1.6, not v2.0
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:14:58 -07:00
Paul BakausandClaude Opus 4.6 e18ee529f3 Clean up FAQ and consolidate changelog into single v2.0 entry
Simplify the licensing FAQ (no more CLI-calls-engine indirection).
Merge v2.0.0 and v2.0.6 changelog entries into one v2.0 release note
covering the full detection engine, CLI, framework support, and critique
overhaul.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:14:06 -07:00
Paul BakausandClaude Opus 4.6 c8d654a71a Align all version references to 2.0.6, update repo URLs to impeccable-cli
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:08:45 -07:00
Paul BakausandClaude Opus 4.6 d8d5b8acd8 Move CLI to separate repo, make this skills-only (Apache 2.0)
The CLI and detection engine now live in pbakaus/impeccable-detect
(published as 'impeccable' on npm, BSL-1.1). This repo is purely
Apache 2.0: skills, prompts, website, and build system.

- Remove bin/ (CLI moved to CLI repo)
- Remove README.npm.md (moved to CLI repo)
- Remove @impeccable/detect dependency, add impeccable dependency
- Set package.json to private (no longer published to npm)
- Update all references from @impeccable/detect to impeccable
- Update CLAUDE.md, NOTICE.md, FAQ, and changelog
- Rebuild all provider skill distributions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 18:59:19 -07:00
Paul BakausandClaude Opus 4.6 76f61af87f Add licensing FAQ entry explaining BSL/Apache split
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 17:03:31 -07:00
Paul BakausandClaude Opus 4.6 62a6472348 Bump all version references to 2.0.4, add changelog entry
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 16:50:27 -07:00
Paul BakausandClaude Opus 4.6 dd559cd1e9 Improve foundation section responsive breakpoints
- Switch staircase to grid at 1200px (was 1024px) to prevent tall
  stairs from clipping at narrow desktop widths
- Add 2-col grid at 768px, compact horizontal cards at 520px
- Fix count crowding heading: use overflow hidden to gracefully
  hide count when card is too narrow instead of wrapping or cramming

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 13:08:18 -07:00
Paul BakausandClaude Opus 4.6 3c9f705d49 Add animated foundation icons with ambient + hover states
Each of the 7 dimension icons now has a continuous subtle animation
(breathing draws, pulsing circles, bobbing ball, blinking cursor,
toggle wobble) plus an enhanced hover effect. Responsive icon uses
transform-box: fill-box for a staggered desktop-to-mobile reflow.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 12:15:20 -07:00
Paul BakausandClaude Opus 4.6 0d4d6b4f56 Add build-time count validation, fix all stale count references
Build system now computes authoritative counts from source (22 commands,
24 detection rules) and warns about mismatches in HTML, README, plugin
configs. Generates public/js/generated/counts.js for frontend use.

Fixed 15 stale references across index.html, cheatsheet.html, README.md,
NOTICE.md, AGENTS.md, plugin.json, and marketplace.json. Changed all
"20 commands" to "22", "25 rules" to "24". Fixed v1.6.0 changelog date
(was March 24, after v2.0.0's March 20; now March 18).

Changelog entries are excluded from validation since historical counts
were correct at time of release.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 08:05:49 -07:00
Paul BakausandClaude Opus 4.6 03a4433dcc Restructure narrative: Foundation, Language, Antidote, Visual Mode
Major site restructure reflecting Impeccable's expanded value prop:
- 01 The Foundation: 7 design dimensions, 212 guidelines grid
- 02 The Language: merged periodic table + Commands in Action
- 03 The Antidote: moved from position 1, anti-patterns + gallery
- 04 Visual Mode: live iframe embed of detection overlay demo
- Composite demo page combining purple gradients + side-tab cards
- Updated hero copy (212 guidelines, 22 commands)
- 7-item sticky nav, backward-compat anchor aliases

Detection overlay improvements:
- Staggered entrance animation (80ms per element)
- Banner slides in from top
- Skip body/html from overlay targeting (fixes scrollbar bug)
- Banner overflow: hidden + maxWidth: 100vw
- CLAUDE.md: document that browser script is generated, never edit directly

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 19:56:29 -07:00
Paul BakausandClaude Opus 4.6 4b356a6b5b Improve mobile experience across all sections
Hero: reorder visual above text on mobile, shorter tagline, tighter spacing.
Antidote: horizontal scroll tabs, proper touch targets on gallery nav.
Commands: cleaner pill styles matching pattern tabs, flat demo area.
Get Started: constrain cards to viewport width (min-width: 0 fix),
wrap terminal commands, stack "best together" callout vertically.
FAQ/Changelog: mobile breakpoints with touch-friendly sizing.
Footer: tighter gaps and centered links on mobile.
General: bump minimum font sizes, fix section nav at 400px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 11:26:43 -07:00
Paul BakausandClaude Opus 4.6 3f7b5fd8bf Redesign Antidote section: card stack gallery, tabbed patterns, new skills
Replace the sliding accordion with a 3D card stack for Gallery of Shame
(bottom-right deck offset with scroll/button nav). Patterns now use clean
pill tabs with single-column Don't/Do layout in a white container.

Also scaffolds two new skills: /validate (fast visual validation after UI
changes) and /craft (guided feature design through user interview).

Fixes detection count from 25 to 24, changes badge from "Deterministic"
to "New!".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 09:59:11 -07:00
Paul BakausandClaude Opus 4.6 b5cd306e70 Redesign Get Started section: three-column layout with skills, CLI, and stay updated
- Replace sequential steps with three-column grid (skills/CLI/stay updated)
- Skills column (step 1) gets visual prominence with wider column and Recommended badge
- CLI column (step 2) shows install, subcommands, npm link, Beta badge
- Stay updated column (step 3) leads with Substack embed + X follow, quick refs below
- Add "Best together" callout matching detection-callout pattern
- Unify font sizes and spacing across all columns
- Left-align section content to match rest of page
- Remove demo-caption background, section divider on wide viewports
- Fisheye starts on /clarify for balanced top/bottom
- Magazine container gets white background containment on wide viewports
- Spread-flow stays on one line (nowrap)
- Remove demo-caption background from skill-demos.css

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 10:20:38 -07:00
Paul BakausandClaude Opus 4.6 107aa8b7e1 Refine Commands section: fisheye alignment, category ordering, install step
- Shrink fisheye list to 400px and vertically center it so items align
  with magazine spread content area
- Sharpen fisheye mask gradient for cleaner edge fade
- Prevent spread-flow ("leads to" etc.) from wrapping to multiple lines
- Sort fisheye/spread commands by category order instead of arbitrary
- Add beta badges to fisheye items
- Remove border-right on spread-identity and border-top on demo caption
- Add "Teach it your design" as step 2 in Get Started section
- Make spread-command-name nowrap, remove word-break/hyphens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 11:01:49 -07:00
Paul BakausandClaude Opus 4.6 39930a4186 Fix fisheye: absolute positioning with scroll-compensated centering
Rewrote fisheye layout to use position:absolute items with accumulated
scaled heights. Active item always stays at vertical center by adding
scrollTop to the offset calculation. Spacing compresses naturally for
scaled-down items. Gentler opacity fade (0.3 floor) so size is the
primary visual cue. Tighter CSS mask edges.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 09:55:02 -07:00
Paul BakausandClaude Opus 4.6 487ac0cf3a Redesign Commands section: magazine spread + fisheye nav
Replace the old scrollspy + glass terminal layout with:
- Editorial magazine spread: one command at a time with big display
  type name, category label, description, relationships, and
  before/after demo
- Fisheye command list: vertical scrollable list with transform-based
  scale effect (0.4x to 1.0x), smooth center detection, synced to
  the active spread. Index-based math avoids layout oscillation.
- Removed deprecated commands (teach-impeccable, frontend-design)
  from the browsable list
- Removed transition lock that blocked rapid scrolling updates
- Mobile layout preserved (existing carousel)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 08:20:48 -07:00
Paul BakausandClaude Opus 4.6 17f389db45 Update Framework section: CLI story + detect element in periodic table
- Update lead text to mention skill + commands + CLI
- Add CLI "detect" element (Dt) to System category in periodic table
  with dashed border, CLI badge, and hover tooltip
- Fix tooltip clipping (overflow: visible on container)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 16:58:50 -07:00
Paul BakausandClaude Opus 4.6 bdc23f02c7 Redesign Antidote section: horizontal disclosure, gallery sidebar, detection callout
- Replace tabbed pattern viewer with animated horizontal disclosure
  (inspired by jh3y/XJWNMOO): CSS Grid column transitions, hover to
  expand, rotated vertical labels, icon anchored at bottom
- Don't/Do toggle in each panel (defaults to Don't)
- Gallery of Shame as 2-column thumbnail sidebar beside the disclosure
- Detection callout as horizontal strip below
- Responsive: stacks at 1060px, gallery becomes 3-col grid
- Remove all em dashes from anti-pattern text (AI slop tell)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 16:52:11 -07:00
Paul BakausandClaude Opus 4.6 f683f413c8 Rename frontend-design to impeccable, fold teach-impeccable into teach mode
Major skill consolidation for v2.0:

- Rename source/skills/frontend-design/ to source/skills/impeccable/
  with user-invocable: true and argument-hint: "[teach]"
- Fold teach-impeccable body into impeccable as "Teach Mode" section,
  activated via /impeccable teach
- Create deprecation shims:
  - frontend-design: redirects to /impeccable
  - teach-impeccable: redirects to /impeccable teach
- Update all 16 skill cross-references from {{command_prefix}}frontend-design
  to {{command_prefix}}impeccable and {{command_prefix}}teach-impeccable to
  {{command_prefix}}impeccable teach
- Update CLI sentinel detection to use 'impeccable' (with teach-impeccable
  as legacy fallback)
- Update build system readPatterns() path and EXCLUDED_FROM_SUGGESTIONS
- Update all public files (data.js, cheatsheet, index, viz, demos)
- Update all documentation (README, NOTICE, AGENTS, plugin.json)
- Update all test expectations

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 14:04:54 -07:00
Paul BakausandClaude Opus 4.6 efcfd5dadd Merge main into v2.0: consolidate critique skill with scoring, personas, and detection
Merges 54 commits from main including factory-based build system, Trae support,
improved skill descriptions, and security hardening. Consolidates the critique
skill to combine v2.0's sub-agent architecture and automated anti-pattern
detection with main's Nielsen heuristics scoring, cognitive load assessment,
persona-based testing, and structured follow-up workflow. Fixes browser detector
build to create target directory after skill sync.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 22:20:04 -07:00