Skip to content
BSWEN
Blog

The 20 Impeccable Commands: A Complete Reference

Cowrie
Cowrie
Dev @ Bswen

I was knee-deep in a UI project when I realized I had no systematic approach to quality assurance. I’d run through the same manual checklist over and over: check accessibility, test responsiveness, review typography, validate color contrast. Every project felt like starting from scratch.

Then I discovered Impeccable’s 20 steering commands, and my workflow transformed entirely.

The Problem with Ad-Hoc UI Refinement

My old process looked something like this:

  1. Build feature
  2. Manually check for obvious issues
  3. Push to staging
  4. Get feedback from designer
  5. Fix issues (repeat steps 2-5)
  6. Ship with lingering doubts

This approach had three fatal flaws:

  • Inconsistent quality: Different projects got different levels of scrutiny
  • Missed issues: Without a checklist, I’d forget entire categories like internationalization or error handling
  • No documentation: Knowledge wasn’t captured or reusable

I needed a systematic way to apply design expertise consistently across all projects.

What Are Impeccable Commands?

Impeccable is a Claude Code skill that provides structured steering commands for UI/UX refinement. Instead of manually checking each aspect of your design, you run targeted commands that apply specific design expertise.

The commands are organized into six categories, each serving a distinct purpose in the refinement workflow.

All 20 Commands at a Glance

Here’s the complete reference table:

Command Reference
| Command | What it does |
|---------|--------------|
| /teach-impeccable | One-time setup: gather design context, save to config |
| /audit | Run technical quality checks (a11y, performance, responsive) |
| /critique | UX design review: hierarchy, clarity, emotional resonance |
| /normalize | Align with design system standards |
| /polish | Final pass before shipping |
| /distill | Strip to essence |
| /clarify | Improve unclear UX copy |
| /optimize | Performance improvements |
| /harden | Error handling, i18n, edge cases |
| /animate | Add purposeful motion |
| /colorize | Introduce strategic color |
| /bolder | Amplify boring designs |
| /quieter | Tone down overly bold designs |
| /delight | Add moments of joy |
| /extract | Pull into reusable components |
| /adapt | Adapt for different devices |
| /onboard | Design onboarding flows |
| /typeset | Fix font choices, hierarchy, sizing |
| /arrange | Fix layout, spacing, visual rhythm |
| /overdrive | Add technically extraordinary effects |

Command Categories Explained

1. Setup Commands

/teach-impeccable is your one-time initialization command. Run it once per project to:

  • Gather design context from your codebase
  • Save preferences to .impeccable.md configuration
  • Establish baseline quality standards
Initial Setup
# First command to run in any project
/teach-impeccable


# This creates .impeccable.md with:
# - Design system references
# - Quality thresholds
# - Project-specific preferences

I made the mistake of skipping this once. Without the configuration, subsequent commands had no baseline to compare against, making their suggestions generic rather than project-specific.

2. Quality Commands

These commands identify problems in your existing implementation.

/audit runs technical quality checks across four dimensions:

  • Accessibility: ARIA labels, keyboard navigation, color contrast
  • Performance: Bundle size, render blocking, lazy loading opportunities
  • Theming: Dark mode support, CSS custom properties usage
  • Responsive: Breakpoint consistency, mobile-first patterns

/critique provides UX design review focusing on:

  • Visual hierarchy (does the most important thing stand out?)
  • Clarity (is the purpose immediately obvious?)
  • Emotional resonance (does it feel right?)

I used to think audit was enough. Then I ran critique on a “perfect” component and realized it was technically correct but emotionally flat. The distinction matters.

3. Refinement Commands

These commands fix identified issues.

/normalize aligns your implementation with design system standards. It catches:

  • Inconsistent spacing (12px vs 14px margins)
  • Non-standard border radius values
  • Typography that doesn’t match your scale

/polish is your pre-shipping quality pass. Think of it as the “spell check for UI”:

  • Removes dead CSS
  • Fixes z-index conflicts
  • Smooths transition timing

/distill strips away unnecessary complexity. Use it when:

  • A component has grown too complex
  • You’re not sure what’s essential anymore
  • Performance is suffering from over-engineering

/clarify improves unclear UX copy. It doesn’t replace your copywriter, but it:

  • Identifies jargon
  • Suggests clearer alternatives
  • Maintains tone consistency

4. Enhancement Commands

These commands elevate good designs to great ones.

/animate adds purposeful motion:

  • Entrance animations that guide attention
  • Micro-interactions that provide feedback
  • Transition choreography

/colorize introduces strategic color:

  • Draws attention to key actions
  • Establishes visual hierarchy
  • Avoids the “rainbow vomit” anti-pattern

/bolder amplifies safe/boring designs:

  • Increases contrast
  • Adds visual weight to key elements
  • Removes timid design choices

/quieter does the opposite:

  • Tones down overwhelming designs
  • Creates visual breathing room
  • Reduces cognitive load

/delight adds moments of joy:

  • Easter eggs (appropriate for context)
  • Celebratory animations
  • Thoughtful micro-copy

/overdrive adds technically extraordinary effects:

  • WebGL shaders (when appropriate)
  • Advanced CSS techniques
  • Performance-conscious experimental features

5. Robustness Commands

These commands make your design production-ready.

/optimize focuses on performance:

  • Critical CSS extraction
  • Image optimization recommendations
  • Code splitting opportunities

/harden handles edge cases:

  • Error states
  • Loading states
  • Internationalization
  • Accessibility edge cases

6. Utility Commands

These commands solve specific design problems.

/extract creates reusable components from patterns you’ve built multiple times.

/adapt ensures your design works across devices, not just the one you developed on.

/onboard designs user introduction flows for new features.

/typeset fixes typography issues:

  • Font pairing problems
  • Hierarchy inconsistencies
  • Sizing that doesn’t match your scale

/arrange fixes layout and spacing:

  • Grid alignment
  • Consistent spacing rhythm
  • Visual balance

A Typical Workflow

Here’s the workflow I’ve settled into after months of experimentation:

workflow
# 1. One-time setup
/teach-impeccable


# 2. Identify issues
/audit        # Technical problems
/critique     # UX problems


# 3. Fix issues
/normalize    # Design system alignment
/polish       # Final cleanup


# Optional: Enhancement (when quality matters more than speed)
/animate      # Add motion
/delight      # Add joy

The key insight: run quality commands before refinement commands. It’s tempting to jump straight to polish, but you’ll miss systemic issues that audit and critique reveal.

Common Mistakes I Made

Mistake 1: Running commands in random order

Each command assumes certain preconditions. For example, /polish assumes you’ve already normalized your design system alignment. Running it before /normalize means you’re polishing inconsistencies.

Mistake 2: Skipping /teach-impeccable

Without the configuration file, commands provide generic advice. With it, they reference your actual design tokens and standards.

Mistake 3: Running every command on every component

Not every component needs /overdrive or /delight. Match the command to the component’s purpose:

  • Critical UI paths: Full workflow
  • Internal tools: Audit + Harden
  • Marketing pages: Critique + Animate + Delight

Mistake 4: Treating commands as replacements for design thinking

Commands are steering tools, not autopilot. They amplify your design judgment, not replace it. I still make the final call on whether their suggestions make sense for my context.

When to Use Which Commands

Here’s a decision guide based on your situation:

Decision Matrix
| Situation | Commands to Run |
|-----------|-----------------|
| New project setup | /teach-impeccable |
| Before code review | /audit, /critique |
| After major refactor | /normalize, /polish |
| Performance issues | /audit, /optimize |
| Accessibility audit | /audit, /harden |
| Design feels boring | /bolder, /animate, /colorize |
| Design feels overwhelming | /quieter, /distill |
| Adding new feature | /extract (if reusable), /adapt |
| Pre-launch checklist | /polish, /harden, /optimize |
| International launch | /harden, /adapt |

Combining Commands Effectively

Commands can be composed into workflows for specific goals:

The Quality Pass (for critical components):

Terminal window
/audit → /critique → /normalize → /harden → /polish

The Delight Pass (for user-facing features):

Terminal window
/critique → /clarify → /animate → /delight

The Performance Pass (for heavy components):

Terminal window
/audit → /distill → /optimize → /extract

  • Design Systems: Commands work best when you have a defined design system. They’ll reference your tokens, scales, and standards.

  • Accessibility Standards: /audit checks against WCAG 2.1 AA by default. Customize in .impeccable.md if you need different standards.

  • Performance Budgets: /optimize respects performance budgets defined in your configuration.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!

Comments

Tags: