Free skill · install in 10 minutes

Make AI-generated UItaste expensive.

/impeccable is the craft skill I drop into every Claude Code project. Real working code. Committed design choices. Zero generic output.

Used on every Twenty1 Media build — including this site.

Without it

Every AI tool ships UI that feels the same.

Hero sections lifted from a 2022 Tailwind demo
Forms with no visual hierarchy or rhythm
Empty states that just say “No data”
Cards that break alignment on mobile
Three different blues across one page
Motion that feels templated
Empty divs masquerading as design tokens
And then you spend Saturday rewriting it by hand

What you get when you install

Six things that ship together.

Not a single skill. A complete craft kit. Each piece earns its place. Each piece works without the others, but the stack is what makes the difference.

The /impeccable skill itself

Full SKILL.md with the four-command workflow — teach, shape, craft, critique — plus the preflight gate that blocks generic AI output before a single file gets edited.

PRODUCT.md template

The context file the skill loads before it designs anything. Drop in your brand voice, anti-references, strategic principles. Stop generic output at the source.

DESIGN.md cheatsheet

Color, typography, elevation, components — the optional-but-strongly-recommended scaffold so the skill doesn't have to guess your design system.

Three install paths

Claude Code one-line plugin install, direct git clone into ~/.claude/skills/, or .agents/skills/ drop-in for Codex, Junie, Mux, Kiro. Whatever harness you run.

Live browser iteration mode

Designed to run with your dev server up. It iterates against what's actually rendering — not a screenshot, not vibes. Real visual fidelity, real working code.

The hard preflight

Non-optional checks that block code edits until you've passed context, product, command, shape, and image gates. The reason the output doesn't look AI-generated.

Total — one folder, four commands, every harness. Free for anyone who wants to ship product-grade UI from agentic workflows.

Four commands · one workflow

Each step refuses to skip the one before it.

01$impeccable teach
Generates PRODUCT.md from your project — users, brand, anti-references, strategic principles. The context that makes everything downstream non-generic.
02$impeccable shape
Produces a confirmed design brief. You review, you approve. The skill refuses to write code until this passes.
03$impeccable craft
Implements against the confirmed brief. Real working code. Committed design choices. Live browser iteration.
04$impeccable critique
Audits the finished surface against the brief. Flags drift, anti-patterns, accessibility issues, motion that feels cheap.

What changes

From AI-generated to product-grade.

AI made me a hero section that looks like every Tailwind UI demo.

I have a confirmed design brief before any pixel ships.

Cards break alignment on mobile. Three different blues across the page.

One color system. One typography scale. Same craft on every screen.

I rewrite my AI output by hand on Saturdays.

It hits production on the first pass.

Empty states say “No data.” Forms have no hierarchy.

Empty states earn their place. Forms read top-to-bottom like prose.

Use it for

Anything where a UI needs to feel like a person made it.

/Bland landing pages that need to become bolder
/Loud designs that need to become quieter
/Dashboards drowning in cognitive load
/Forms with terrible visual hierarchy
/Empty states that say “No data”
/Onboarding that confuses on screen one
/Theming and design token rollouts
/Motion that feels like a templated component library

The guarantee

If you can’t install it in 15 minutes, hit reply on the email.

I’ll get on a call and walk you through it. No catch. No upsell. The whole point is that you ship better UI tonight, not three weeks from now.

One last thing

Stop shipping UI that screams “AI built this.”

Drop your email. The skill, the templates, the install paths, and a quick start are in your inbox in under a minute.