Skip to main content

​
Overview

This guide will get you up and running with Impeccable in under 5 minutes. You’ll:
  1. Download the bundle for your AI tool
  2. Install it in your project
  3. Run your first command
  4. See the difference in your AI’s output
Choose the AI tool you’re using. If you’re not sure, Claude Code is a great starting point and works directly in your browser.

​
Installation

1

Download the Bundle

Visit impeccable.style and download the ZIP for your tool.The bundle includes:
  • The frontend-design skill with 7 reference files
  • All 17 commands (audit, polish, animate, etc.)
  • Provider-specific formatting
2

Extract to Your Project

# Extract to your project root
unzip impeccable-cursor.zip -d your-project/
# Creates: your-project/.cursor/
The extracted folder is hidden (starts with a dot). On macOS, press Cmd+Shift+. in Finder to see hidden files.
3

Enable Skills (If Required)

Skills require additional setup in Cursor:
  1. Switch to Nightly channel in Cursor Settings → Beta
  2. Enable Agent Skills in Cursor Settings → Rules
Learn more about Cursor skills →

​
Your First Command

Let’s try the /audit command to see how Impeccable analyzes your interface:
1

Create a Simple Component

Create a basic React component (or use an existing one):
components/Button.jsx
export default function Button({ children }) {
  return (
    <button style={{
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      color: '#999',
      fontFamily: 'Inter, sans-serif',
      padding: '12px 24px',
      borderRadius: '8px',
      border: 'none',
      boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
    }}>
      {children}
    </button>
  );
}
This component intentionally includes common AI design anti-patterns (purple gradient, gray text on color, Inter font, generic border radius).
2

Run the Audit Command

In your AI tool, run:
/audit components/Button.jsx
Codex CLI uses a different syntax: /prompts:audit instead of /audit
3

Review the Report

Impeccable will generate a comprehensive audit report identifying issues:Anti-Patterns Verdict:
  • Purple gradient (AI color palette tell)
  • Gray text on colored background (poor contrast)
  • Inter font (overused, generic)
  • Generic rounded corners with shadow (forgettable)
Detailed Findings:
  • Critical: Color contrast ratio fails WCAG AA (2.1:1, needs 4.5:1)
  • High: AI color palette (purple gradient is 2024-2025 AI fingerprint)
  • Medium: Generic typography (Inter is overused)
  • Low: Lacks interaction states (no hover, focus, disabled)
Recommendations:
  • Use /colorize to introduce strategic, accessible colors
  • Use /polish to add all interaction states
  • Consider distinctive typography alternatives
4

Fix the Issues

Now run the suggested commands to fix the issues:
/colorize components/Button.jsx
Your AI will now apply the principles from the frontend-design skill:
  • Replace purple gradient with a distinctive, accessible color
  • Use tinted neutrals instead of pure gray
  • Suggest alternative fonts (e.g., Instrument Sans, Plus Jakarta Sans)
  • Add proper interaction states

​
The Difference

Let’s compare the before and after: 
export default function Button({ children }) {
  return (
    <button style={{
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      color: '#999',
      fontFamily: 'Inter, sans-serif',
      padding: '12px 24px',
      borderRadius: '8px',
      border: 'none',
      boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
    }}>
      {children}
    </button>
  );
}

Before

  • Purple gradient (AI tell)
  • Poor contrast (#999 on gradient)
  • Inter font (generic)
  • No interaction states
  • Generic shadows

After

  • Distinctive OKLCH color
  • Accessible contrast
  • Interesting font choice
  • Smooth hover transitions
  • Purposeful micro-interactions

​
Explore More Commands

Now that you’ve seen how /audit and /colorize work, try these commands:
  • /audit - Comprehensive quality checks
  • /critique - UX design review
  • /polish - Final pass before shipping
Most commands accept an optional argument to target specific areas:
  • /polish checkout-form - Polish just the checkout form
  • /animate hero-section - Add animation to hero section
  • /audit navigation - Audit just the navigation

​
How Commands Work

Each command is a specialized skill that follows a structured workflow:
1

Load Context

The command loads the frontend-design skill with all reference files (typography, color, spatial design, motion, etc.)
2

Analyze Code

It analyzes your code against design principles and anti-patterns
3

Generate Report or Changes

Audit commands generate reports. Action commands (polish, animate, etc.) make actual code changes
4

Apply Best Practices

All changes follow the comprehensive guidelines in the skill references

​
Working Without Commands

You don’t have to use commands! The frontend-design skill is automatically available whenever your AI works on frontend code. Simply ask: 
Build a landing page hero section using the frontend-design skill
Your AI will automatically apply all the principles, avoid anti-patterns, and create distinctive interfaces. Commands are shortcuts for specific workflows (auditing, polishing, animating), but the underlying skill knowledge is always active.

​
Next Steps

Installation Guide

Detailed installation instructions for all providers

Command Reference

Complete guide to all 17 commands

Design Principles

Deep dive into the design guidelines

Best Practices

Tips and workflows for effective usage
Pro tip: Run /audit on your existing components to see how many AI anti-patterns you’re already using. It’s eye-opening!

Build docs developers (and LLMs) love

Get started for freeTalk to us