pbakaus

    pbakaus/impeccable

    The design language that makes your AI harness better at design.

    web
    JavaScript
    Apache-2.0
    17.5K stars
    780 forks
    17.5K watching
    Updated 4/9/2026
    View on GitHub
    Backblaze Advertisement

    Loading star history...

    Health Score

    75

    Weekly Growth

    +0

    +0.0% this week

    Contributors

    1

    Total contributors

    Open Issues

    18

    Generated Insights

    About impeccable

    Impeccable

    The vocabulary you didn't know you needed. 1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.

    Quick start: Visit impeccable.style to download ready-to-use bundles.

    Why Impeccable?

    Anthropic created frontend-design, a skill that guides Claude toward better UI design. Impeccable builds on that foundation with deeper expertise and more control.

    Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes: Inter font, purple gradients, cards nested in cards, gray text on colored backgrounds.

    Impeccable fights that bias with:

    • An expanded skill with 7 domain-specific reference files (view source)
    • 17 steering commands to audit, review, polish, distill, animate, and more
    • Curated anti-patterns that explicitly tell the AI what NOT to do

    What's Included

    The Skill: frontend-design

    A comprehensive design skill with 7 domain-specific references (view skill):

    ReferenceCovers
    typographyType systems, font pairing, modular scales, OpenType
    color-and-contrastOKLCH, tinted neutrals, dark mode, accessibility
    spatial-designSpacing systems, grids, visual hierarchy
    motion-designEasing curves, staggering, reduced motion
    interaction-designForms, focus states, loading patterns
    responsive-designMobile-first, fluid design, container queries
    ux-writingButton labels, error messages, empty states

    17 Commands

    CommandWhat it does
    /teach-impeccableOne-time setup: gather design context, save to config
    /auditRun technical quality checks (a11y, performance, responsive)
    /critiqueUX design review: hierarchy, clarity, emotional resonance
    /normalizeAlign with design system standards
    /polishFinal pass before shipping
    /distillStrip to essence
    /clarifyImprove unclear UX copy
    /optimizePerformance improvements
    /hardenError handling, i18n, edge cases
    /animateAdd purposeful motion
    /colorizeIntroduce strategic color
    /bolderAmplify boring designs
    /quieterTone down overly bold designs
    /delightAdd moments of joy
    /extractPull into reusable components
    /adaptAdapt for different devices
    /onboardDesign onboarding flows

    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)

    See It In Action

    Visit impeccable.style to see before/after case studies of real projects transformed with Impeccable commands.

    Installation

    Visit impeccable.style, download the ZIP for your tool, and extract to your project.

    Option 2: Copy from Repository

    Cursor:

    cp -r dist/cursor/.cursor your-project/
    

    Note: Cursor skills require setup:

    1. Switch to Nightly channel in Cursor Settings → Beta
    2. Enable Agent Skills in Cursor Settings → Rules

    Learn more about Cursor skills

    Claude Code:

    # Project-specific
    cp -r dist/claude-code/.claude your-project/
    
    # Or global (applies to all projects)
    cp -r dist/claude-code/.claude/* ~/.claude/
    

    Gemini CLI:

    cp -r dist/gemini/.gemini your-project/
    

    Note: Gemini CLI skills require setup:

    1. Install preview version: npm i -g @google/gemini-cli@preview
    2. Run /settings and enable "Skills"
    3. Run /skills list to verify installation

    Learn more about Gemini CLI skills

    Codex CLI:

    cp -r dist/codex/.codex/* ~/.codex/
    

    Usage

    Once installed, use commands in your AI harness:

    /audit           # Find issues
    /normalize       # Fix inconsistencies
    /polish          # Final cleanup
    /distill         # Remove complexity
    

    Most commands accept an optional argument to focus on a specific area:

    /audit header
    /polish checkout-form
    

    Note: Codex CLI uses a different syntax: /prompts:audit, /prompts:polish, etc.

    Supported Tools

    Contributing

    See DEVELOP.md for contributor guidelines and build instructions.

    License

    Apache 2.0. See LICENSE.

    The frontend-design skill builds on Anthropic's original. See NOTICE.md for attribution.


    Created by Paul Bakaus

    Discover Repositories

    Search across tracked repositories by name or description