Impeccable

Design guidance for AI coding agents. 1 skill, 23 commands, live browser iteration, and 59 deterministic detector rules for AI-generated frontend design.

Why Impeccable?

Anthropic's frontend-design was the first widely-used design skill for Claude. Impeccable started from there. Every model trained on the same SaaS templates. Skip the guidance and you get the same handful of tells on every project: Inter for everything, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, the rounded-square icon tile above every heading. Impeccable adds a one-setup flow, 23 commands, and 59 deterministic detector rules.

Core Capabilities

23 Commands

All commands are accessed through /impeccable:

Use /impeccable pin <command> to create standalone shortcuts (e.g., pin audit creates /audit).

59 Deterministic Detector Rules

The detector catches 59 deterministic issues across AI slop (side-tab borders, purple gradients, bounce easing, dark glows) and general design quality (line length, cramped padding, small touch targets, skipped headings, and more). It runs without LLM and no API key.

Design Context Initialization

/impeccable init asks whether the surface is brand (marketing, landing, portfolio) or product (app UI, dashboard, tool), then writes design context that every later command reads.

Design Hook

On supported tools (Claude Code, GitHub Copilot, Codex, Cursor, Grok Build), the design hook runs the Impeccable design detector on direct UI file edits and surfaces findings back into the agent flow. On Claude Code, GitHub Copilot, Codex, and Grok Build, it surfaces findings after the edit; on Cursor, it blocks bad proposed writes before they land.

How It Works

1. Initialize: Run /impeccable init in your project root. This sets up PRODUCT.md and DESIGN.md with design context.
2. Choose a command: Run /impeccable <command> <target>, e.g., /impeccable critique landing.
3. Processing: The skill analyzes the target against the design context and built-in rules, generating suggestions, code modifications, or reports.
4. Output: You receive improved code, detection reports, design critiques, etc.

What You Need to Provide

• A project directory containing HTML/CSS/JS files, or a single HTML file, or a URL.
• A target specification when running a command (e.g., blog, landing, checkout).
• Optionally, design context (collected via /impeccable init).

What You Will Get

• Design quality improvements (visual, layout, color, typography)
• Deterministic detection reports (a11y, performance, responsive)
• Design critiques (hierarchy, clarity, emotional resonance)
• Code hardening (error handling, i18n, edge cases)
• Live browser preview (using live command)

Usage Examples

/impeccable audit blog           # Audit blog hub + post pages
/impeccable critique landing     # UX design review
/impeccable polish settings      # Final pass before shipping
/impeccable harden checkout      # Add error handling + edge cases

Or use /impeccable directly with a description:

/impeccable redo this hero section

Anti-Patterns

The skill includes explicit guidance on what to avoid:

• Don't use overused fonts (Arial, Inter, system defaults)
• Don't use gray text on colored backgrounds
• Don't use pure black/gray (always tint)
• Don't wrap everything in cards or nest cards inside cards
• Don't use bounce/elastic easing (feels dated)

CLI Detector

Impeccable includes a standalone CLI for detecting anti-patterns without an AI harness:

npx impeccable detect src/                   # scan a directory
npx impeccable detect index.html             # scan an HTML file
npx impeccable detect https://example.com    # scan a URL (Puppeteer)
npx impeccable detect --json .               # CI-friendly JSON output
npx impeccable detect --no-config src/       # raw scan, ignoring project config/context

Supported Tools

• Cursor
• Claude Code
• GitHub Copilot
• Gemini CLI
• Codex CLI
• Grok Build
• OpenCode
• Pi
• Kiro
• Trae
• Rovo Dev
• Qoder
• Mistral Vibe

Notes

• Before using commands, run /impeccable init to set up design context.
• The design hook is automatically installed on supported tools. For Codex, you need to open /hooks after install and approve the project hook.
• For Cursor: Switch to Nightly channel in Cursor Settings → Beta and enable Agent Skills in Cursor Settings → Rules.
• For Gemini CLI: Install preview version (npm i -g @google/gemini-cli@preview), run /settings and enable "Skills", then run /skills list to verify.
• For Trae: There are two versions with different config directories. After copying, restart Trae IDE to activate the skills.
• The detector can also be run as a standalone CLI as shown above.
• To keep generated files out of git, add the recommended .gitignore block from the Impeccable documentation (see website for details).

See It In Action

Visit the Neo Mirai case study to see a before/after case study of a real project transformed with Impeccable commands.