Impeccable: The Claude Code Skill for Unique Frontend UI

Impeccable is an open-source Claude Code skill created by Paul Bakaus to reduce generic, AI-generated frontend output. It includes 20 steering commands—including /audit, /polish, and /critique—seven domain-specific design references, and curated anti-patterns that tell the model what not to generate. The goal is straightforward: build interfaces that look intentionally designed rather than auto-generated.

Try Apidog today

Why AI-Generated Frontends Often Look the Same

Ask an AI coding assistant to build a dashboard, landing page, or settings panel without additional direction. The result often includes:

• Inter or another default sans-serif font
• A purple-to-blue gradient
• Cards nested inside other cards
• Gray text on colored backgrounds
• Centered hero sections with a large number and small label
• Glassmorphism used as a default depth effect

These patterns are functional, but they are also predictable. Large language models learn from the same common templates, so their frontend output tends to converge on the same visual language.

Impeccable is designed to interrupt that pattern. Anthropic's official frontend-design skill provides a foundation; Impeccable extends it with deeper design guidance, broader domain coverage, and explicit constraints that steer the model away from recurring AI-generated UI patterns.

If you plan to use /audit, /polish, or /overdrive in Claude Code, you can also use Apidog to validate the API endpoints your frontend depends on. Check request payloads, authentication tokens, response shapes, and mock data before UI and backend integration issues create extra rework.

What Impeccable Includes

Impeccable is an installable Claude Code skill made up of instructions, reference files, and slash commands. It augments how Claude Code approaches frontend implementation and review.

The skill has three core parts.

An Expanded frontend-design Skill

Impeccable's frontend guidance is divided into seven domain-specific reference files:

Each reference is intended to be used during implementation, not just read as general advice. For example, the typography reference covers:

• Vertical rhythm
• Font loading and Flash of Unstyled Text (FOUT)
• size-adjust overrides
• Appropriate and inappropriate uses of fluid typography with clamp()

This level of detail gives the model concrete decisions to apply while generating or revising frontend code.

A Context-Gathering Protocol

The /teach-impeccable command collects project-specific design context before design work begins. It asks you to define details such as:

• Target audience
• Primary use cases
• Brand personality

The answers are saved to .impeccable.md in the project root and loaded in future sessions.

This step matters because a model without project context defaults to safe, average choices. Establishing the context once gives later commands a more specific design direction.

The 20 Commands for Improving AI-Generated Frontends

Run Impeccable commands as slash commands inside Claude Code:

/audit              → Accessibility, performance, and responsive quality check
/critique           → UX review covering hierarchy, clarity, and emotional resonance
/polish             → Final pass for alignment, spacing, and implementation details
/distill            → Remove complexity that does not earn its place
/normalize           → Align the interface with design-system standards
/animate            → Add purposeful motion
/colorize           → Introduce strategic color to a monochromatic interface
/bolder             → Push a safe or overly conservative design further
/quieter             → Tone down an overly aggressive design
/delight             → Add memorable moments of interaction
/typeset             → Improve font choices, hierarchy, and sizing
/arrange             → Fix layout, spacing, and visual rhythm
/harden             → Address error handling, internationalization, and edge cases
/optimize            → Improve frontend performance
/extract             → Pull out reusable components and design tokens
/adapt               → Adapt the interface for other devices or contexts
/onboard             → Design onboarding flows and empty states
/clarify              → Improve unclear UX copy
/overdrive           → Add technically ambitious effects
/teach-impeccable    → Save project-specific design context

Most commands accept an optional scope. For example:

/audit header
/polish checkout-form

The first command limits the audit to the navigation bar. The second focuses the polish pass on the checkout form. Scoped commands reduce the chance of changing frontend areas that already work.

Chain Commands for a Repeatable Review

A practical workflow is to run commands in sequence:

/audit
/arrange
/typeset
/polish

Each step addresses a different category of problems:

1. /audit identifies accessibility, performance, and responsive issues.
2. /arrange corrects layout and spacing.
3. /typeset improves the type hierarchy.
4. /polish performs the final visual pass before shipping.

Use Anti-Patterns to Prevent Generic UI

Impeccable's anti-pattern library is one of its most distinctive features. Instead of offering only broad style preferences, it names recurring failure modes and turns them into explicit constraints.

Typography Anti-Patterns

Avoid:

• Inter, Roboto, Arial, or system defaults when they make the design indistinguishable from common templates
• Monospace fonts used only to imply “developer vibes”
• Large rounded icons above every heading, which creates a repeated template structure

Color Anti-Patterns

Avoid:

• Gray text on colored backgrounds; use a darker shade of the background color when appropriate
• The familiar AI palette of cyan on dark backgrounds, purple-to-blue gradients, and neon accents
• Pure black (#000) and pure white (#fff); tint neutral colors instead

Layout Anti-Patterns

Avoid:

• Wrapping every element in a card
• Nesting cards inside cards
• Repeating identical icon-heading-text card grids
• Centering every element when a left-aligned or asymmetric layout would create stronger hierarchy

Motion Anti-Patterns

Avoid:

• Bounce and elastic easing that makes interactions feel dated
• Animating layout properties such as width, height, or padding

Prefer transform and opacity for motion where possible. This reduces layout work and generally produces smoother transitions.

Build System, Tests, and Tool Support

Impeccable is maintained as a software project rather than a collection of prompt files. It includes a build system, unit tests, and support for multiple AI development tools.

Build Provider-Specific Bundles

Source skill files are stored in source/skills/ and use YAML frontmatter based on the Agent Skills specification.

Build the provider bundles with:

bun run build

To remove existing output and rebuild everything:

bun run rebuild

The build system compiles the source into formats for:

• Cursor
• Claude Code
• OpenCode
• Gemini CLI
• Codex CLI
• VS Code Copilot
• Kiro
• Pi

Each provider receives the metadata format it expects. For example, Claude Code and OpenCode include metadata such as arguments and allowed tools, while Codex CLI uses argument hints with $ARGNAME placeholders. Gemini receives minimal frontmatter.

The transformations are implemented through the modular architecture in scripts/lib/transformers/.

Run the Unit Test Suite

The Bun-based test suite is located in tests/build.test.js:

bun test

The tests cover the complete build pipeline, including:

• Orchestration and transformer arguments
• Integration tests that create source files in a temporary directory
• Output-file existence for every supported provider
• Provider-specific transformations
• Empty skill-list edge cases

The transformation tests also verify provider-specific output, such as:

• {{args}} in Gemini output
• $TARGET in Codex output
• user-invokable: true in Claude Code output

If you modify a transformer, run bun test before contributing. This provides quick feedback across all supported tool formats.

Pair Impeccable with Apidog for API-Driven Frontends

Impeccable focuses on the UI layer. Apidog focuses on the API layer.

A polished frontend can still fail users when its API calls are undocumented, untested, or unreliable. Apidog helps validate the backend contract that the generated interface depends on.

With Apidog, you can:

• Design APIs visually before implementing the backend
• Generate mock servers from an API schema
• Render realistic data in an AI-generated frontend during development
• Run automated endpoint tests and catch regressions
• Share interactive API documentation with the team

The division of responsibility is useful:

• Use Impeccable to make the interface distinctive, accessible, and production-ready.
• Use Apidog to validate the requests, responses, mocks, and documentation behind that interface.

Together, they address two common weaknesses in AI-assisted development: generic visual output and unreliable integration behavior.

Getting Started with Impeccable

Download the ready-to-use bundle from impeccable.style, choose your target tool, and extract it into the appropriate location.

For Claude Code, install at the project level:

cp -r dist/claude-code/.claude your-project/

Or install globally:

cp -r dist/claude-code/.claude/* ~/.claude/

Then run the setup command once:

/teach-impeccable

After the design context is saved, you can use the remaining commands in the project.

FAQ

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

Impeccable builds on that foundation with seven domain-specific reference files, 20 steering commands, and an explicit anti-pattern library. The official skill is a starting point; Impeccable adds a broader system for guiding and reviewing frontend output.

Does Impeccable support tools other than Claude Code?

Yes. It supports Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, and Pi. Its build system compiles one source format into provider-specific dialects.

What does /overdrive do?

/overdrive is intended for technically ambitious effects such as WebGL shaders, 60fps virtual tables, spring physics in dialogs, and scroll-driven reveals. Use it when the design calls for effects beyond conventional frontend patterns.

How does Impeccable handle unit testing?

The project includes a Bun-based suite covering the build pipeline, transformer correctness, and integration tests that generate real source files and verify provider outputs.

Run:

bun test

Can Impeccable help with API-driven frontends?

Impeccable handles UI quality. For the API layer, pair it with Apidog for visual API design, automated testing, and mock server generation.

Is Impeccable free to use?

Yes. Impeccable is open source under the Apache 2.0 license. Its source code is available on GitHub, and compiled bundles are available at impeccable.style.