The impeccable skill for Claude: what it is, how to install it and how to use it

If you've searched for "impeccable skill claude", you've probably seen it named next to Anthropic's own frontend-design skill as the one to use when a page has to look like it belongs to a real business. Our overview of the best Claude skills for web design compares it with frontend-design and design-shotgun. This guide goes deeper on impeccable alone: what is in it, how to install it, which prompts work, and what it can't do for you.

Everything below is checked against the official repository and docs as of 19 October 2026, the day version 4.7.0 came out. The project moves fast, so if something doesn't match what you see, the impeccable README on GitHub is the source of truth.

Key takeaways

• impeccable is one skill with 24 commands, all called as /impeccable <command>, plus a detector with 61 rules that runs without any AI model.
• In Claude Code, install it with npx impeccable install (Node.js 18.19 or later), then run /impeccable init, which writes your product context to PRODUCT.md.
• It is built for coding agents working on a project folder. Its docs cover Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI and more, but not the claude.ai chat.
• Compared with frontend-design it adds modes, named commands, a refine-or-redesign rule, saved context and automatic checks. It also costs more per run.
• It improves the design. Hosting, forms, legal pages and SEO are still separate jobs.

What impeccable is, and who made it

impeccable calls itself "design guidance for AI coding agents". It was created by Paul Bakaus, who built jQuery UI, later worked on Chrome DevTools and AMP at Google, and now runs Renaissance Geek, the company behind impeccable. The repository has more than 80,000 stars on GitHub. The skill, commands, CLI and detection engine are free under Apache 2.0. Your coding tool or model provider still charges for its own usage.

The README is open about where it came from: Anthropic's frontend-design was the first widely used design skill for Claude, and impeccable started there. Both fight the same problem. Every model learned from the same SaaS templates, so without guidance you get the same tells on every project: Inter everywhere, purple-to-blue gradients, cards inside cards, grey text on coloured backgrounds.

What's inside the skill

24 commands, sorted by job

Every command runs as /impeccable <command> <target>, where the target is a page, a section or a file. Type /impeccable on its own and it shows a menu instead of guessing.

craft is now a deprecated alias, so you can ignore it. If you use one command a lot, /impeccable pin audit gives you a standalone /audit shortcut.

Four modes

Before designing, impeccable decides what success means for the visitor on that surface. Persuade covers landing pages, marketing and pricing. Operate covers dashboards, editors and settings. Read covers articles and docs. Experience covers portfolios and galleries. The mode follows the page, not the company: a software tool's landing page is still Persuade. Persuade and Experience get bold, committed work. Operate and Read get precision and restraint.

Saved context

/impeccable init inspects your project, asks only about real gaps, and writes the durable facts (audience, purpose, constraints, voice) to PRODUCT.md. Visual decisions go to DESIGN.md. Every later command reads both, so the next session starts where the last one ended.

The anti-pattern rules

The README lists five headline rules: no overused fonts (Arial, Inter, system defaults), no grey text on coloured backgrounds, no pure black or grey, no cards inside cards, and no bounce or elastic easing. A reference file inside the skill, the "craft floor", goes further. It loads right before every edit and holds measurable checks (body text contrast of at least 4.5:1, body lines of 65 to 75 characters, more space above a heading than below) and a refuse list of category defaults:

• Same-size cards of icon, heading and text as the whole page structure.
• The hero-metric template: big number, small label, supporting stats.
• A small label (an "eyebrow") above a heading. This one is a hard ban.
• Section numbers like 01 / 02 / 03 when the order means nothing.
• Gradient text, decorative glass and blur, coloured side-stripe borders on cards.
• Emoji standing in for real icons.

One rule sits above all of them: the brief wins. Ask for a specific era, palette or font and impeccable follows it, even when it trips a warning.

The detector, the hook and live mode

The 61 rules also ship as a CLI. npx impeccable detect scans a folder, an HTML file or a URL with no model and no API key. In Claude Code the installer also adds a hook that runs the detector after each UI edit and feeds findings back to the agent. Live mode (beta) lets you click an element on your locally running page, describe what you want, compare three alternatives and keep one, which is written into your source. It supports Vite, Next.js, SvelteKit, Astro, Nuxt, Bun and static HTML, on a local copy only, never your live site.

How to install impeccable in Claude Code

You need Claude Code, a project folder and, for the recommended route, Node.js 18.19 or later. Starting from nothing? Our guide to building a website with Claude Code covers the setup first.

1. Open a terminal in your project folder, the one with your site's files.
2. Run npx impeccable install. It lists the tools it found (for example ~/.claude), lets you change that list, and asks whether to install for this project or globally.
3. Accept the design hook when offered. That is what runs the checks after edits.
4. Reload Claude Code, or start a new session.
5. Run /impeccable init and answer its questions about who the site is for and what must not change. Read the PRODUCT.md it writes and correct anything wrong.
6. Optional: if the site already has a design system, run /impeccable document to record it in DESIGN.md.

Two other routes are documented: inside Claude Code, /plugin marketplace add pbakaus/impeccable, then /plugin, Discover, install. Or npx skills add pbakaus/impeccable. To update, run npx impeccable update. It replaces impeccable's files and leaves your PRODUCT.md and DESIGN.md alone.

Can you use impeccable on claude.ai?

Not in a documented way. impeccable's docs and FAQ list coding tools only. That fits how it works: it edits files in a project, runs a small engine, installs a hook and opens your page in a browser.

claude.ai does accept custom skills. Per Anthropic's help article on skills, you turn on "Code execution and file creation" under Settings, Capabilities, then go to Customize, Skills, click +, Create skill, Upload a skill, and upload a ZIP with the skill folder at its root. Whether impeccable's commands and checks behave there is not something its maker documents, so treat it as an experiment. In the claude.ai chat, Anthropic's frontend-design is the documented choice: Anthropic says its example skills are already available on the paid plans.

Other tools it supports

How to use it: example prompts

Order matters more than any single command. Set the context once, plan the page, build it, look at it, then refine. For a small business homepage:

/impeccable init
    
    /impeccable shape the homepage. We're a physiotherapy practice in Leipzig.
    Most new patients come from their GP with a prescription and want to know
    two things: can I get an appointment soon, and is it covered.
    
    /impeccable critique the homepage
    /impeccable polish the homepage
    
    /impeccable quieter the services section
    /impeccable adapt the homepage for phones
    /impeccable harden the contact form
    /impeccable audit the contact page
    
    /impeccable generate 3 bold variants of the pricing cards

What we've learned running it:

• Say "refine" or "redesign" on purpose. A refinement keeps the existing look, copy and everything outside the target. A redesign keeps content and function but replaces the old look, and it won't stop halfway. "Polish the hero" and "redo this hero section" give very different results.
• Give it a fact it couldn't guess. shape asks two or three questions per round. A real answer ("half our patients are nervous") beats any adjective.
• Critique before you polish. The critique gives a score and three to five priority issues. Polish is the final pass, not the diagnosis.
• Run the detector on the result. npx impeccable detect index.html is cheap. A clean scan is evidence, not proof, so still look at the page on a phone.

impeccable vs frontend-design

Both are good. frontend-design is Anthropic's single instruction file: ground the design in the subject, plan a small token system, check the plan against the brief, avoid a named list of AI looks. impeccable started there and built a workflow around it.

Our short version: frontend-design for quick work, impeccable when the page has to persuade.

Where it helps, and where it doesn't

impeccable makes the type, layout, colour, motion and copy of your pages better and catches the habits that make a page look generated. It is strongest on homepages, landing pages and clear redesigns, and on the dull but important work of harden and adapt: long German words overflowing a button, error states nobody designed, a layout that falls apart on a phone.

It doesn't touch anything outside your project's files. It does not:

• Host or publish the site. You still need a host and a domain; see publishing a website made with Claude.
• Make forms deliver. harden designs the error and success states, but a static page has nowhere to send the message. More in what a static website can and can't do.
• Do your SEO. audit checks accessibility, performance and responsiveness, not titles, sitemaps or structured data. That's static website SEO.
• Write legal pages. If you're in Germany or Austria, a business site needs an Impressum, a privacy policy and consent before analytics.

If you'd rather not run it yourself

impeccable assumes a terminal, a project folder and someone who reviews code changes. If you want the finished site rather than the toolchain, that's the gap ShiftPress fills. You describe the site in a few sentences and the AI builds real pages with real copy, or you upload a design as a ZIP export and get editable pages with a shared header and footer. Afterwards you change it by chat, by voice or by clicking text on the page, and you approve each change before it goes live. Your own domain, SSL, forms that deliver leads, and SEO and structured data are handled. You can download the whole site as code at any time.

Next steps

• Not sure Claude is the right route? The guide to building a website with AI compares every option.
• Ready to build: follow building a website with Claude Code from an empty folder and install impeccable at the design-skill step.
• Design done: publish it on your own domain with a form that works.
• Want a full skill stack: the best Claude skills for web design shows the loop we use with design-shotgun and webapp-testing.

Frequently asked questions

The bottom line

impeccable is the most complete design skill you can give Claude right now: 24 commands as a shared vocabulary, a clear line between refining and redesigning, saved context, and checks that catch the AI look before you do. Install it with npx impeccable install, run /impeccable init, and give it a brief with something real in it.

Then remember what it isn't. It makes a page look like your business. It doesn't put that page on your domain, deliver enquiries or get it found. Do those steps yourself, or let a platform like ShiftPress handle them while you keep the design.