Impeccable: Design skills for AI harnesses

# Impeccable: Design skills for AI harnesses Source: [https://impeccable.style/](https://impeccable.style/) Before commands, before detection, Impeccable teaches your AI real design\. Deep reference knowledge across 7 dimensions, loaded every time your AI writes code\. Run`/impeccable teach`once to set your project's design context\. Every command benefits\. 18 commands form a shared vocabulary between you and your AI\. Each one encodes a specific design discipline, so you can steer with precision\. Every AI model learned from the same templates\. Without intervention, they all produce the same predictable mistakes\. Impeccable names them, detects them, and teaches the AI to avoid them\. See design issues highlighted directly on the page\. No screenshots, no guesswork\. Impeccable’s overlay shows you exactly what’s wrong and where\. 25 deterministic checks No LLM needed\. Pattern matching catches purple gradients, overused fonts, nested cards, low contrast, and more\. Three ways to use it The**Chrome extension**on any site, embedded in`/critique`during an AI design review, or standalone via`npx impeccable live`\. [Available nowChrome extensionInstall from Chrome Web Store →](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf) ### 1Install the skillsRecommended 18 commands that steer your AI toward better design, in real time\. The full Impeccable experience\. $`npx skills add pbakaus/impeccable` Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more\. Then run`/impeccable teach`to set up your project's design context\. Other install methods Claude Code plugin $`/plugin marketplace add pbakaus/impeccable` Then open`/plugin`in Claude Code Manual downloadall 11 providers ### 2Add the CLIBeta Scan any file, directory, or live URL for anti\-patterns from the terminal\. Catches gradient text, AI color palettes, nested cards, low contrast, and 20\+ more rules across HTML, CSS, JSX/TSX, Vue, and Svelte\. Use it in CI pipelines, pre\-commit hooks, or one\-off audits to keep AI slop out of production\. $`npm i \-g impeccable` Or use`npx impeccable detect src/`directly without installing\. [Full command reference on npm →](https://www.npmjs.com/package/impeccable) ### 3Browser extension Click the toolbar icon on any page and every anti\-pattern lights up right where it lives: gradient text, purple palettes, nested cards, tiny body text, and the rest\. Works on your localhost, staging, production, or anyone else's site\. Great for spot\-checking competitors, reviewing PRs visually, or just browsing the web with a sharper eye\. [Install from Chrome Web Store →](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf) ### 4Stay updated Keep skills current and follow along with new commands, anti\-patterns, and the design thinking behind Impeccable\. $`npx impeccable skills update` Run periodically to pull the latest skill definitions\. [Follow on X@impeccable\_ai](https://x.com/impeccable_ai) - **Streamlined from 21 to 18 commands\.**Removed overlap and confusion:`/arrange`renamed to`/layout`,`/normalize`merged into`/polish`\(design system alignment is now part of the final pass\),`/onboard`merged into`/harden`\(empty states and first\-run experiences are part of production readiness\), and`/extract`became`/impeccable extract`\(a sub\-mode alongside craft and teach\)\. Every remaining command has a clearly distinct job\. - **Automatic cleanup of deprecated skills\.**On first load after updating, the skill detects and removes leftover files from renamed or merged commands\. No manual cleanup needed\. - **Renamed`frontend\-design`to`impeccable`\.**The core skill now shares its name with the project, and the teach subcommand moved from`/teach\-impeccable`to`/impeccable teach`\. One skill, one namespace\. - **Data\-driven skill rewrite\.**The core skill was rebuilt against an internal eval framework that runs the same brief through frontier models with and without the skill loaded, then measures how much the output collapses into monoculture\. The result: dramatically more font and color diversity, sharper overall design quality, and much stronger Codex support\. The biggest unlock was an anti\-attractor procedure that forces the model to enumerate and reject its reflex defaults before picking\. Validated on gpt\-5\.4 and Qwen 3\.6 Plus across 15 niches\. - **Anti\-pattern detection engine\.**25 deterministic rules across typography, color, layout, motion, and quality\. Handles oklch, oklab, lch, and lab color formats, CSS variables inside border shorthands, gradient\-backed text, and emoji\-only nodes\. - **CLI:`npx impeccable detect`\.**Scans HTML, CSS, JSX/TSX, Vue, Svelte, and CSS\-in\-JS\. Framework detection, multi\-file import tracking, Puppeteer\-backed live URL scanning, CI\-ready JSON output, and a`\-\-fast`regex mode for huge codebases\. - **Chrome DevTools extension\.**One\-click detection on any page: yours, staging, production, or someone else's\. Reads live computed styles, surfaces findings in an interactive panel, and highlights elements on the page\. In Chrome Web Store review\. - **`/critique`got teeth\.**Persona sub\-agents review in parallel, score against Nielsen's heuristics, run the detector automatically, and open a live browser overlay so you can walk each finding in place\. - **New ways to create with Impeccable\.**`/shape`runs a structured discovery interview about purpose, audience, and goals, then produces a design brief before any code is written\.`/impeccable craft`chains that brief straight into the full implementation flow so you ship a designed feature instead of a reflex card grid\. - **New docs site\.**Top\-level[Docs](https://impeccable.style/skills),[Anti\-Patterns](https://impeccable.style/anti-patterns), and[Visual Mode](https://impeccable.style/visual-mode)sections\. 18 per\-skill pages with before/after demos and the canonical SKILL\.md inline, two[tutorials](https://impeccable.style/tutorials), and 38 rule cards with inline visual examples\. - **New harness: Rovo Dev\.**11 supported AI tools total\. View older releases- New provider:**Trae**\(China \+ International\) - `/critique`now scores against Nielsen's 10 heuristics, tests with persona archetypes, and assesses cognitive load - `/audit`now scores 5 dimensions with P0\-P3 severity ratings and structured action plans - Improved skill descriptions for better agent auto\-discovery - Fixed invalid YAML frontmatter that broke GitHub preview and Codex loading \([\#67](https://github.com/pbakaus/impeccable/issues/67)\) - Codex CLI now uses correct`$`prefix for command references - `/typeset`now recommends fixed type scales for app UIs, reserving fluid typography for marketing/content pages - 3 new skills:`/typeset`\(fix typography\),`/arrange`\(fix layout & spacing\),`/overdrive`\(technically extraordinary effects, beta\) - Skills now auto\-gather design context via`\.impeccable\.md`\. Run`/teach\-impeccable`once, all skills benefit - Deep linking to commands \(`\#cmd\-overdrive`, etc\.\) - Added OpenCode provider support - Added Pi provider support - Recategorized`/onboard`as an enhancement command - Added Kiro support \(`\.kiro/skills/`\) - Restored prefix toggle: download`i\-`prefixed bundles to avoid naming conflicts - Audit and critique skills only suggest real, installed commands - Unified skills architecture: commands are now skills with`user\-invocable: true` - Added VS Code Copilot and Google Antigravity support \(`\.agents/skills/`\) - New install flow:`npx skills add`as primary, universal ZIP as fallback - Added universal ZIP containing all 5 provider directories - Renamed`/simplify`to`/distill`to avoid Claude Code conflict - Initial release with enhanced frontend\-design skill - 17 design commands: /polish, /audit, /distill, /bolder, and more - Support for Cursor, Claude Code, Gemini CLI, and Codex CLI - Interactive command cheatsheet Where do I put the downloaded files?The easiest way is`npx skills add pbakaus/impeccable`, which auto\-detects your AI harness and places files correctly\. If you downloaded the**universal ZIP**, extract it to your**project root**\(same level as your`package\.json`or`src/`folder\)\. It creates hidden folders for each supported tool:`\.cursor/`,`\.claude/`,`\.gemini/`,`\.codex/`, and`\.agents/`\. Project\-level installation takes precedence and lets you version control your skills\. How do I update to the latest version?Run`npx impeccable skills update`from your project root\. It downloads the latest skills, cleans up deprecated files, and preserves any prefix you use\. - **Alternative:**`npx skills add pbakaus/impeccable`re\-installs from scratch\. - **Claude Code plugin:**Open`/plugin`, go to the Discover tab\. - **Manual ZIP:**Download from above and extract to the project root\. Your`\.impeccable\.md`context file is never overwritten\. Commands or skills aren't appearing\. What do I do?**For commands:**Type`/`in your AI harness and look for commands like`/audit`,`/polish`, etc\. If they don't appear, double\-check the files are in the correct location\. **For skills:**Skills are applied automatically when relevant\. To verify, explicitly mention "use the impeccable skill" in your prompt\. This forces the AI to acknowledge and apply it\. **Tool\-specific setup:** - **Cursor:**Requires Nightly channel \+ Agent Skills enabled in Settings → Rules - **Gemini CLI:**Requires`@google/gemini\-cli@preview`\+ Skills enabled via`/settings` I'm new to AI harnesses\. Where do I start?Skills and commands are intermediate features\. If you're just getting started, learn the basics first: - **Claude Code:**[Official Documentation](https://docs.anthropic.com/en/docs/claude-code) - **Cursor:**[Cursor Docs](https://docs.cursor.com/) - **Gemini CLI:**[Gemini CLI Docs](https://geminicli.com/docs/) - **Codex CLI:**[Codex GitHub](https://github.com/openai/codex) Once you're comfortable with basic prompting and code generation, come back and give Impeccable a try\. Is Impeccable free?Yes\. Everything is**Apache 2\.0**: skills, commands, CLI, and the detection engine\. Fully open source, free for everyone\. ## Work with me Impeccable is built by[Renaissance Geek](https://renaissance-geek.ai/)\. I work with enterprise teams on large\-scale rollouts, custom integrations, and training for designers and developers\. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI\-generated design, let's talk\. [Get in touch](https://impeccable.style/cdn-cgi/l/email-protection#d1a1b0a4bd91a3b4bfb0b8a2a2b0bfb2b4fcb6b4b4baffb0b8)