Step 1 is now skill-only (the outdated "powers visual mode" claim
and the global CLI install are gone). Chrome extension stays at
step 3, the CLI moves to a new optional step 4 with a link to npm,
and "Stay updated" shifts to step 5. Step 2 collapses its three
numbered sub-steps into a compact command/caption table so the
"Use it" panel matches step 1's height instead of towering over it.
Also: keep code chips and the npm link on one line each (nowrap)
so the caption wraps only on natural prose.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- why-panel tab swap is a proper opacity+transform crossfade (display:grid
stack area) instead of display:none jump; 650/800ms ease-out.
- tab progress indicator animates linearly (timer, not eased).
- Panel 01: dropped redundant "Every command reads this…" footer; moved the
commands meta into the visual as a right-side sidebar aside PRODUCT.md.
- Panel 02: "Browse the full catalog →" moved under the Gallery of Shame;
pattern category tabs are now always a single-row horizontal scroll with
JS-tracked edge-fade mask and chevron affordances; click centers the
selected tab inside the strip (never scrolls the page).
- Panel 04: "register" → "mode" in body, labels, meta for plain-language.
- Panel 05: removed redundant "Works in Claude Code…" meta.
- Panel 06: removed "Spec-compliant. Interoperable. Not a proprietary
sidecar." meta.
- .language-content grid gap reduced from --spacing-lg to --spacing-sm so
the commands palette sits closer to the section lead.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Antidote (task b): drop the duplicated pattern tabs (content lives on
/anti-patterns for the full list). Keep the Gallery of Shame as the
signature visual and add a "Browse the full catalog" link underneath.
Section is roughly 40% shorter vertically.
Live Mode demo (task faithful): rewrite to match the real picker flow
one-for-one. Now two separate bars:
- Global bar: dark pill, bottom of the frame, persistent for the
whole session. / + Pick (active) + Detect + DESIGN.md + divider + ✕.
- Contextual bar: LIGHT paper-backed pill that floats above the
picked element, mirroring buildConfigureRow() in live-browser.js.
Dark command pill, transparent input, ×N count, magenta Go button.
Morphs through configure → generating (spinner) → cycling (prev /
counter / next / discard / Accept) → accepted (green ✓ written to
source).
Contextual bar positions itself below the target when space allows,
else above. New JS positionCtx() mirrors the real positionBar()
logic. prefers-reduced-motion still freezes on a representative
"cycling, variant 3" still.
Timeline unchanged in steps but step captions updated to match the
new two-bar split ("Contextual bar appears." etc.).
- Bump skills plugin version 2.1.1 -> 3.0.0 (plugin.json, marketplace.json,
harness SKILL.md files). CLI and Chrome extension unchanged.
- Remove prefixed universal zip bundle and all related code:
factory.js prefix/outputSuffix options, zip.js variant pass, utils.js
prefixSkillReferences, the "universal-prefixed" entry in
download-providers.js, and the matching test suite in utils.test.js.
- Redesign Get Started step 1 "Install the skill and CLI": two terminal
rows (npx skills + npm i -g impeccable) with paired notes, drop the
Recommended badge.
- Collapse "Other install methods" back into a <details> element so the
primary install path is the first thing users see.
- Simplify step 3 to "Add the Chrome extension": remove the CLI tool
block (now in step 1), use standard .btn .btn-primary for the CTA so
it matches other primary buttons (square corners, accent slide-up
hover), and lay out the preview screenshot next to the button instead
of stacked so the screenshot no longer dominates vertical space.
- CLAUDE.md: rewrite with v3.0 architecture, the "no em dash also means
no --" rule, the harness-dirs-are-tracked gotcha, the named-export
test-spy warning, and the evals inline-skill.ts sync note.
- AGENTS.md, DEVELOP.md: drop prefixed variant references.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Biggest change in a while. Users previously had 18 standalone skill
entries cluttering their /menu; now they have one entry (/impeccable)
that routes to 20 specialized commands via argument dispatch. The pin
mechanism (/impeccable pin audit) restores standalone shortcuts on
demand for commands users hit all the time.
## Architecture
- Single /impeccable skill with command router section in SKILL.md
- 20 commands served via reference files under source/skills/impeccable/reference/
- /impeccable pin <command> creates a lightweight redirect shim so users
who prefer /audit, /polish, etc. can still have them
- Context gathering (teach) auto-runs on first use
- command-metadata.json is the single source of truth for command
descriptions, argument hints, and relationships
## Site rewrite
- Docs URL: /skills renamed to /docs (with /skills permanent redirects)
- Homepage hero frames Impeccable as "one skill with 20 commands"
- "Get Started" split into 50/50 install + how-to-use with editorial
numbered steps, /impeccable shown as the home command with three modes
- New /docs overview: home command hero card + dense category rows
matching the old cheatsheet density, with leads-to/pairs-with/
combines-with relationship metadata served from a shared source
- Cheatsheet merged into /docs, /cheatsheet redirects
- Magazine spread and mobile cards show /impeccable as a stacked
namespace label above the command name at full display size
- Periodic table updated with craft/teach/extract as first-class cells
- Skill detail pages generate from reference files, with an editorial
wrapper per command for tagline + body
- Tutorials and anti-patterns pages updated to use /impeccable <cmd>
## Build system
- Dead code removed (scripts/lib/transformers/shared.js)
- Build log wording fixed ("1 skill" not "1 skills (1 user-invocable)")
- generateApiData fallback branch removed (throws loudly if metadata
missing instead of silently degrading)
- Commands API includes editorial tagline alongside the long description;
UI surfaces prefer tagline for human display, description for auto-
trigger keyword matching
## Gitignore
- Added .claude/scheduled_tasks.lock, .claude/settings.local.json to
ignore list (local Claude Code state that should not be tracked).
- Harness skill directories (.claude/skills/, .agents/skills/, etc.)
remain tracked by design: npx skills reads them from this repo at
install time and they enable clean submodule use.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add max-width: 56ch to install-step-body so long descriptions
don't run edge to edge
- Rewrite FAQ update answer as a scannable list instead of dense
paragraphs
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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.
- 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
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>
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>
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>
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>
- 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>
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>
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>
- 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>
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>
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>
- 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>
- 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>
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>
Restructure the Install section into a "Get Started" two-step flow:
1. Install the skills (npx as primary, alternatives collapsible)
2. Stay up to date (embedded Substack subscribe form)
- Elevate npx command as the sole primary install method
- Collapse Claude Code marketplace and manual ZIP into expandable alternatives
- Replace hidden prefix toggle with prominent radio card selector
- Download button dynamically updates label based on prefix choice
- Add Substack newsletter embed (impeccablestyle.substack.com)
- Add newsletter link to footer alongside blog link
- Normalize button styles for consistency (square corners for actions)
- Add newsletter icon assets (SVG + PNG) for Substack branding
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add floating bottom section nav (appears after hero, hides at footer)
- Fix hero split comparison to default 50/50 instead of 70/30
- Remove duplicate "Works with" badges from Install section
- Periodic table: restore compact elements, add inline hover tooltips
- Truncate command descriptions in Commands section for scannability
- Collapse older changelog entries behind "View older releases"
- Add GitHub star count (13.3k) next to repo link
- Fix meta theme-color to match light mode
- Reduce hero top padding, update section 03 subtitle
- Clean up footer: remove redundant tagline and anchor links
- Fix divider line accumulation in changelog and FAQ sections
- Center glass terminal vertically in viewport
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Slash commands do work in Antigravity, so the asterisk and tooltip
warning on the Antigravity badge were incorrect. Removes both.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Addresses #51 -- Antigravity doesn't support slash commands, only
auto-activated skills. Adds a tooltip on the Antigravity* badge in the
downloads section explaining the limitation and how to invoke skills by
name. Also adds hover tooltips showing provider names on the hero logo
icons.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace the detector summary card and badge system with a simple
inline note below the tabbed Do/Don't patterns: "/critique catches
all of these. 16 deterministically, the rest through LLM analysis."
Gallery of Shame and Suggest a pattern links sit inline alongside.
Subtle divider separates the note from the patterns above.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace the buried "Gallery of Shame" inline link with a compact
detector summary card showing all 16 auto-detected anti-patterns
as chips grouped by category (Borders, Typography, Color, Layout,
Motion). Prominent gallery link in the footer. Revised lead copy
to mention the automated detector.
Keeps the tabbed Do/Don't pattern reference below unchanged.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Prefix ALL skills in prefixed bundles, not just user-invokable ones
- Add prefixSkillReferences() to update /skillname and "the skillname skill"
cross-references in skill body text when prefixing
- Add prefix/outputSuffix support to agents transformer
- Move prefix toggle inline next to the download ZIP button for better discoverability
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Re-adds the toggle in the install section that lets users download bundles
with all user-invokable skills prefixed with i- (e.g. /i-audit) to avoid
naming conflicts. Build now produces both unprefixed and prefixed variants
for all providers and universal ZIP.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Combined all post-v1.0 changelog entries into single v1.1.0
- Updated version to 1.1.0 in package.json, plugin.json, marketplace.json
- Added GitHub icon link to hero top-right
- Added README.txt to universal ZIP (macOS hides dotfile-only folders)
- Added versioning instructions to CLAUDE.md
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds floating corner badges to clarify which side is before/after,
removes the "With Skills" divider label, and extends the slider range
to account for the skewed divider so it can fully reveal each side.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove overpromising "transform into impeccable design" claim
- Tone down marketing language throughout (design intelligence, level up, etc.)
- Change "our" to "the" for neutral voice
- Combine Support and Consulting into single "Work with me" section
- Fix double-border on command demo panel (match border-radius)
- Remove border-top from demo captions
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Reduce spacing scale tokens (spacing-lg: 32px, spacing-xl: 48px, spacing-2xl: 80px)
- Normalize body text to consistent 1rem size and color across sections
- Section numbers now appear above headings for proper text alignment
- Left-align all content sections for consistent rhythm
- Combine Support and Consulting sections into single "Work with me" section
- Simplify contribute CTA to inline text link
- Remove unused support section CSS
- Fix FAQ list alignment with section header
- Update copy to use "Impeccable" instead of "we"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove dark mode toggle and all dark theme CSS
- Remove case studies/before-after section (controversial examples)
- Simplify support section to single "buy me a coffee" button
- Fix hero and antidote section padding to align with other sections
- Use overflow-x: clip instead of hidden to preserve position:sticky
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add overflow-x: hidden to html element to prevent horizontal scroll
caused by 100vw units in full-bleed section patterns.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add download tip with cheatsheet link in downloads section
- Fix cheatsheet 404 on Vercel by adding rewrite rule
- Include cheatsheet.html in Bun build entrypoints
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create /cheatsheet with all 17 commands grouped by category
- Clean, scannable layout with command relationships
- Print-friendly styling, dark mode support
- Add server route for cheatsheet page
- Link from Commands section and footer
Addresses user feedback requesting a quick reference doc
for practical command usage.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Match box width to paragraph above (45ch)
- Include frontend-design skill name specifically
- Add sample commands: /polish, /audit, /simplify, /bolder
- Clean two-line layout that wraps naturally
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Move CTA button above the "what's included" info
- Replace bulky equation cards with inline feature badges
- Better visual hierarchy: headline → explanation → action → details
- Features are now supporting text, not competing with CTA
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace bulky gradient box with original side-by-side card design
- Add equation-style layout: skill card + operator + commands card
- Improve hero hook copy to explain what Impeccable does
- Clean, minimal styling that matches site aesthetic
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove Tailwind CSS and related dependencies (tailwindcss, @tailwindcss/cli, bun-plugin-tailwind)
- Remove unused dependencies (lenis, @paper-design/shaders, three)
- Convert @theme variables to CSS custom properties in :root
- Add minimal CSS reset for browser consistency
- Update server to serve /css/* and /js/* routes directly
- Fix conflicting CSS rules that broke commands section layout
- Delete bunfig.toml (no longer needed without Tailwind plugin)
The site now uses native CSS imports via Bun's built-in bundler,
eliminating the need for separate Tailwind compilation step.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove GPU-intensive shader from hero section
- Combine hero with problem section for immediate impact
- Add before/after demo directly in first viewport
- Move "works with" logos inline with CTA
- Remove redundant "Common AI defaults" tags
- Add three-way theme toggle (light/system/dark)
- Persist theme preference to localStorage
- Position toggle in bottom-right corner
- Fix dark mode throughout:
- Update glass terminal and source window backgrounds
- Add CSS custom properties for framework category colors
- Muted dark backgrounds with brighter text for cards
- Replace smooth scroll with instant jump for anchor links
- Remove Lenis smooth scroll library dependency
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
