Paul BakausandClaude Opus 4.6
b0f44f83c6
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>
4.8 KiB
title, tagline, order, description
| title | tagline | order | description |
|---|---|---|---|
| Getting started | From zero to your first polish pass in five minutes. | 1 | Install Impeccable, run /impeccable teach once to establish project context, and run /impeccable polish on something that already exists. The fastest path to seeing what Impeccable changes about AI-generated design. |
What you'll build
You will end this tutorial with Impeccable installed in your project, a .impeccable.md file that captures your brand and audience, and one hand-polished page that went through a polish pass. Total time: about five minutes.
Prerequisites
- An AI coding harness: Claude Code, Cursor, Gemini CLI, Codex CLI, or any of the other supported tools.
- A project with at least one HTML or component file you want to improve. A fresh scaffolded landing page works fine.
How Impeccable works
Impeccable installs as a single agent skill called impeccable. You access all 20 design commands through it:
/impeccable <command> <target>
For example: /impeccable polish the pricing page, or /impeccable audit the checkout. Type /impeccable alone to see the full list.
If you use a command often, pin it with /impeccable pin <command> to create a standalone shortcut (e.g., /impeccable pin audit gives you /audit directly).
Step 1. Install
From the root of your project, run:
npx skills add pbakaus/impeccable
This auto-detects your harness and writes the skill files to the right location (e.g., .claude/skills/, .cursor/skills/). Reload your harness and type /. You should see /impeccable in the autocomplete. Type it and the skill's argument hint will show all available commands.
Step 2. Teach Impeccable about your project
This is the most important step. Design without context produces generic output. The /impeccable teach command runs a short discovery interview and writes a .impeccable.md file at the root of your project.
Run:
/impeccable teach
The skill will ask you a handful of questions:
- Who is this product for? Be specific. Not "users" but "solo founders evaluating a new tool on their phone between meetings".
- What is the brand voice in three words? Pick real words. "Warm and mechanical and opinionated" is better than "modern and clean".
- What should the interface feel like? Concrete adjectives. "Calm, trustworthy, fast" or "playful, bold, a little chaotic".
- Any visual references? Screenshots, sites, design systems you admire.
- Anti-references? Things the product should explicitly not look like.
Answer in your own words. The skill writes a .impeccable.md file with the answers. Every future command run reads it automatically.
Open .impeccable.md and read what it wrote. Edit anything that does not feel right. The file is yours.
Step 3. Polish something
Pick a page that already exists. An about page, a settings screen, a pricing table, anything. Run:
/impeccable polish the pricing page
The skill will walk through alignment, spacing, typography, color, interaction states, transitions, and copy. It makes targeted fixes, not a rewrite. Expect a handful of small diffs that together lift the page from "done" to "done well".
A typical polish pass looks like:
Visual alignment: fixed 3 off-grid elements
Typography: tightened h1 kerning, fixed widow on feature list
Color: replaced one hardcoded hex with --color-accent token
Interaction: added missing hover state on FAQ items
Motion: softened modal entrance to 220ms ease-out-quart
Copy: removed stray 'Lorem' placeholder
Review the diff. If something does not feel right, ask the model to explain the change. If it still does not feel right, revert it. Impeccable is opinionated but not infallible.
What to try next
/impeccable critique the landing pageruns a full design review with scoring, persona tests, and automated detection. It is the best way to find what to fix next./impeccable audit the checkoutruns accessibility, performance, theming, responsive, and anti-pattern checks against the implementation. Useful before shipping./impeccable craft a pricing page for enterprise customersruns the full shape-then-build flow on a brand new feature./impeccable redo this hero sectionworks too. Any description after/impeccableapplies the design principles to the task.
Common issues
- The skill says "no design context found". You skipped step 2. Run
/impeccable teachfirst. - Commands do not appear in the harness. Reload the harness after installing. If they still do not appear, check that the installer wrote files into the expected location (
.claude/skills/,.cursor/skills/, etc.) and that your harness is picking up that directory. - The polish pass rewrote something you liked. Say so. Revert the change, tell the model which specific edit to undo, and continue from there.