Impeccable: The Claude Code Skill for Unique Frontend UI

Impeccable is an open-source Claude Code skill created by Paul Bakaus to address the "AI slop" issue in AI-generated frontend code. It offers 20 actionable steering commands (/audit, /polish, /critique, and more), 7 domain-specific design references, and a library of anti-patterns to explicitly guide the AI on what not to generate. The goal: produce UIs that are genuinely designed, not just assembled by templates.

Try Apidog today

Why Every AI-Generated Frontend Looks the Same

If you've ever asked an AI assistant to build a dashboard or landing page, you've probably noticed predictable patterns: Inter font, purple-to-blue gradients, repetitive card layouts, gray-on-colored text, and generic hero sections—sometimes even glassmorphism for effect. This happens because LLMs are trained on the same template-based examples.

Impeccable was built to break this cycle. While Anthropic's official frontend-design skill set a baseline, Impeccable extends it with more domain coverage, context awareness, and hard constraints that push the AI to produce unique, high-quality output.

💡 Before running Impeccable's commands in Claude Code, download Apidog for free. Apidog lets you visually test and debug the API endpoints your AI-generated frontend will use—checking payloads, auth tokens, response shapes, and mock data in seconds. This saves you time debugging backend issues after the frontend is polished.

What Impeccable Actually Is

Impeccable is a Claude Code skill: an installable set of slash commands, design reference files, and instructions to enhance how Claude approaches frontend tasks.

Impeccable's Expanded frontend-design Skill

The frontend-design skill in Impeccable includes seven precise, domain-specific reference files:

Each file is technically deep. For example, the typography guide covers vertical rhythm, explains FOUT (Flash of Unstyled Text) and its prevention via size-adjust, and details when fluid type with clamp() is not optimal. This level of specificity goes beyond generic style guides.

Impeccable's Context-Gathering Protocol

Impeccable enforces context gathering before design begins via the /teach-impeccable command. You provide details like target audience, use cases, and brand personality. This context is saved in .impeccable.md at your project root and auto-loaded in future sessions.

This step prevents generic, contextless output by forcing the AI to consider project-specific requirements.

The 20 Commands That Fix AI-Generated Frontends

Impeccable provides 20 slash commands, each targeting common pitfalls in AI-generated frontend work. Use them directly in Claude Code:

/audit          → Accessibility, performance, and responsive quality check
/critique       → UX review: hierarchy, clarity, emotional resonance
/polish         → Final pass before shipping (alignment, spacing, details)
/distill        → Strip to essence—remove complexity that doesn't earn its place
/normalize      → Align with design system standards
/animate        → Add purposeful motion (not decorative jitter)
/colorize       → Introduce strategic color to monochromatic interfaces
/bolder         → Amplify safe, boring designs
/quieter        → Tone down overly aggressive designs
/delight        → Add memorable moments of joy
/typeset        → Fix font choices, hierarchy, and sizing
/arrange        → Fix layout, spacing, and visual rhythm
/harden         → Error handling, i18n, edge cases
/optimize       → Performance improvements
/extract        → Pull reusable components and design tokens
/adapt          → Adapt for different devices/contexts
/onboard        → Design onboarding flows and empty states
/clarify        → Improve unclear UX copy
/overdrive      → Technically ambitious effects (shaders, spring physics, scroll-driven reveals)
/teach-impeccable → One-time setup: gather and save design context

You can run commands with a scope, e.g., /audit header or /polish checkout-form. This lets you target specific UI sections.

Workflow Example:

1. Run /audit to surface issues.
2. Use /arrange to fix layouts.
3. Apply /typeset for typography.
4. Finish with /polish before shipping.

Commands can be chained for incremental improvements.

The Anti-Pattern Library: Teaching AI What Not to Do

Impeccable's anti-pattern library encodes explicit "DO NOT" rules, targeting the most common AI-generated design mistakes:

Typography Anti-patterns:

• Avoid Inter, Roboto, Arial, system fonts (too generic).
• Don't use monospace fonts for "developer" themes.
• Don't stack large rounded icons above headings.

Color Anti-patterns:

• No gray text on colored backgrounds—use darker shades of the background color.
• Avoid the "AI palette": cyan-on-dark, purple/blue gradients, neon accents.
• Don't use pure black (#000) or pure white (#fff)—always tint neutrals.

Layout Anti-patterns:

• Don't wrap everything in cards.
• Avoid nesting cards.
• Don’t repeat identical card grids.
• Don't center all content; prefer left-aligned, asymmetric layouts.

Motion Anti-patterns:

• No bounce/elastic easing; use realistic deceleration.
• Animate only transform and opacity, not width, height, or padding.

By explicitly listing these, Impeccable helps the AI avoid bland, instantly-recognizable mistakes.

Under the Hood: Build System, Unit Tests, and Multi-Tool Support

Impeccable is a full software project—not just prompts. It includes a build system, unit tests, and support for multiple AI coding tools.

The Build System

• Source files in source/skills/ use YAML frontmatter (Agent Skills spec).
• A single build step compiles to 8 provider-specific formats: Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, and Pi.

bun run build      # Compile all provider formats
bun run rebuild    # Clean and rebuild everything

Each provider gets tailored output. The build system uses modular transformers in scripts/lib/transformers/ to handle this automatically.

The Unit Test Suite

• Bun-based unit tests live in tests/build.test.js.
• Tests cover orchestration, integration (real file creation), transformation correctness, and edge cases.

bun test

This ensures transformer changes are safe, maintainable, and don't break support for any tool.

Impeccable + Apidog: Pairing Design Quality with API Quality

Impeccable raises UI quality. Apidog does the same for your APIs.

When building with AI tools, both layers matter. A polished frontend is useless if the backend API is unreliable or poorly documented. Apidog gives you:

• Visual API design before backend code.
• Automatic mock server generation from your API schema.
• Automated endpoint testing to catch regressions.
• Interactive API docs to keep teams aligned.

Use Impeccable for frontend uniqueness and polish, and Apidog for dependable, well-documented APIs.

Try Apidog free to generate mock servers and API docs for your next AI-driven project.

Getting Started with Impeccable

1. Download the ready-to-use bundle from impeccable.style.
2. Choose your tool and extract.

For Claude Code:

# Project-level install
cp -r dist/claude-code/.claude your-project/

# Or install globally
cp -r dist/claude-code/.claude/* ~/.claude/

1. Run /teach-impeccable once to store your project design context.
2. Use all 20 commands as needed.

FAQ

How is Impeccable different from Anthropic's official frontend-design skill?

Impeccable adds 7 domain reference files, 20 steering commands, and an explicit anti-pattern library on top of the official skill.

Does Impeccable support tools beyond Claude Code?

Yes. Supported tools: Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, and Pi. The build system outputs provider-specific formats.

What is /overdrive for?

Use /overdrive for ambitious technical effects: WebGL shaders, high-FPS virtual tables, spring physics, scroll-driven reveals.

How are unit tests handled?

Impeccable uses a Bun test suite covering transformers and integration. Run bun test for full coverage.

Can Impeccable help with API-driven frontends?

Impeccable is for UI. For APIs, use Apidog for design, testing, and mock servers.

Is Impeccable free?

Yes. Apache 2.0 licensed, open source. Source and bundles available at impeccable.style.