Impeccable

Impeccable (Lite)

Design and iterate production-grade frontend interfaces. This is a lite integration of Paul Bakaus's Impeccable design language for AI. For the full 23 sub-commands, CLI detection, Chrome extension, and E2E test suite, install: npx skills add pbakaus/impeccable

Quick Start (Lite mode)

Skip context gathering for rapid iteration. For full brand/product context, install the full version.

Shared Design Laws

Color

• Use OKLCH. Reduce chroma as lightness approaches 0 or 100. High chroma at extremes looks garish.
• Never #000 or #fff. Tint every neutral toward brand hue (chroma 0.005-0.01 is enough).
• Pick a color strategy:
• Restrained: tinted neutrals + one accent ≤ 10%. Product default.
• Committed: one saturated color carries 30-60%. Brand default.
• Full palette: 3-4 deliberate roles. Brand campaigns.
• Drenched: the surface IS the color. Brand heroes.

Dark vs Light

Never a default. Write one sentence of physical scene: who, where, under what light, in what mood. "SRE glancing at incident severity on a 27-inch monitor at 2am in a dim room" forces dark. "Editor reading a long-form article on an iPad in morning sunlight" forces light. Run the scene, not the category.

Typography

• Cap body line length at 65-75ch via max-width.
• Hierarchy through scale + weight contrast (≥1.25 ratio between steps).
• No Inter as display font.

Motion

• Don't animate layout properties (width, height, top, left).
• Ease out with exponential curves. No bounce, no elastic.
• UI durations 1px as accent) | The #1 AI-dashboard tell |

| Gradient text (background-clip: text + gradient) | Decorative, never meaningful | | Glassmorphism as default | Rare and purposeful, or nothing | | Hero-metric template | Big number + small label + gradient. SaaS cliché. | | Identical card grids | Icon + heading + text, repeated. Lazy. | | Modal as first thought | Exhaust inline/progressive alternatives first. |

The AI Slop Test

If someone could look at this interface and say "AI made that" without doubt, it's failed.

First-order check: Can someone guess the theme from the category alone? "Observability → dark blue", "Healthcare → white + teal", "Crypto → neon on black" — these are training-data reflexes. Rework.

Second-order check: Can someone guess the aesthetic from category-plus-anti-references? "AI workflow that's not SaaS-cream → editorial-typographic". Still a reflex. Rework again.

Design Tokens (OKLCH)

--color-ink: oklch(10% 0 0);          /* Body copy, even for small text */
--color-charcoal: oklch(25% 0 0);      /* Headings, larger body */
--color-ash: oklch(55% 0 0);           /* Labels, captions, metadata */
--color-mist: oklch(92% 0 0);          /* Hairline borders, dividers */
--color-cream: oklch(96% 0.005 350);   /* Page background (tinted, never pure white) */

Anti-Pattern Detection (Lite)

The full Impeccable CLI detects 27 anti-patterns. Install for npx impeccable detect.

Quick manual checks:

• [ ] No border-left > 1px as colored accent on any element
• [ ] No gradient text anywhere
• [ ] No glass cards as default decoration
• [ ] No hero-metric template
• [ ] No identical card grids
• [ ] Cards not nested inside cards
• [ ] Body line length 65-75ch
• [ ] Body line-height 1.6
• [ ] No em dashes in copy

Pre-Flight Checklist

• [ ] Color strategy selected (Restrained / Committed / Full palette / Drenched)
• [ ] Dark vs light decided by physical scene, not category
• [ ] All colors in OKLCH
• [ ] No #000 or #fff — tint every neutral
• [ ] Body line length 65-75ch
• [ ] No absolute bans violated
• [ ] AI slop test passed (both first-order and second-order)
• [ ] No em dashes in copy
• [ ] prefers-reduced-motion respected

Sources

• Paul Bakaus — Impeccable (impeccable.style)
• OKLCH color space
• Stripe Design System
• Linear Design

Workflow

Step 1: Set the physical scene

Write one sentence describing who, where, under what light, in what mood. "SRE glancing at incident severity on a 27-inch monitor at 2am in a dim room" forces dark. "Editor reading long-form on an iPad in morning sunlight" forces light. This single sentence determines dark vs light, color intensity, and typographic density. Never skip this step or default to a mode without scene reasoning.

Step 2: Choose color strategy

Select one of four based on the scene and register:

• Restrained: tinted neutrals + one accent 1px as colored accent on cards/sidebars) | The #1 visual signature of AI-generated dashboards. Present in ~80% of LLM dashboard output. Instant tell | Use background tint shifts, hairline separators, or spacing hierarchy. If accent is essential, use top border or a small badge/glyph |

| Gradient text via background-clip: text combined with gradient fill | Decorative, never semantic. Fails WCAG contrast at gradient midpoint. Always reads as "designed by someone who just discovered CSS" | Use solid OKLCH colors with weight contrast and scale for hierarchy. Typography carries meaning — gradient undermines it | | Glassmorphism (backdrop-filter: blur()) as default card/surface treatment | Poor readability. Low contrast. 2022 trend that now reads as dated. Adds visual noise without purpose | Use only when what's behind the glass IS the product (map underlay, data visualization). Otherwise: solid surfaces with slight tint shifts | | Hero-metric template: big number + small ALL-CAPS label + gradient background | Cookie-cutter SaaS hero. Every AI output defaults to this pattern regardless of product | Lead with a claim, a story, or a distinctive visual. Metrics can go in a dedicated proof section with context, not the hero | | Identical card grid: icon + heading + paragraph, repeated 3-6 times with equal sizing | Zero visual hierarchy. All content reads as equally important. User scans without engaging any card | Vary card sizes (2fr 1fr asymmetric). Break grid with full-width sections. Use lists or tables where cards aren't needed | | Center-aligned hero, center-aligned CTA, center-aligned everything | Symmetry = safety. Safety = generic. No visual tension, no directional energy, no memorable composition | Left-align text. Place visuals right. Create deliberate asymmetry. The eye should move, not land in the center and stop | | Em dashes (—) in UI copy and headings | The #1 LLM typographic tic. Used as universal separator when commas, colons, periods, or parentheses would be crisper | Ban em dashes. Use commas for lists, colons for label:value, periods to separate thoughts, parentheses for asides. Em dash only for genuine mid-sentence interruption | | Defaulting to dark mode because "dark looks better" without physical scene reasoning | Dark mode has lower contrast in bright environments and causes eye strain for long-form reading. It's not universally superior | Write the physical scene. Let the scene dictate the mode. "Late night" = dark. "Morning sunlight" = light. Mode follows context, not preference | | Modal dialogs as the first interaction pattern for any secondary action | Modal interrupts user flow, loses context, breaks mobile UX. Often used because it's the easiest pattern to implement | Exhaust inline alternatives first: expanding sections, slide-out panels, inline editing, progressive disclosure. Modal only when context loss is intentional | | Brand colors applied to functional UI elements (buttons, inputs, toggles) at full saturation | Saturated colors on interactive elements vibrate against neutral backgrounds. Reduces usability and reads as "theme applied mechanically" | Desaturate interactive UI colors 15-25% from brand primaries. Reserve full brand saturation for decorative and brand-identity elements only | | Pure black (#000) or pure white (#fff) anywhere in the palette | #000 doesn't exist in nature or on any physical display surface. #fff creates harsh contrast that fatigues. Both read as "default CSS" | Tint every neutral: add 0.005-0.01 chroma toward brand hue. Darkest color >= oklch(8% 0 0). Lightest <= oklch(97% 0 0) | | Inter as a display/heading font | Inter is the default AI body font. Using it for headlines signals "didn't choose a font". Zero typographic identity | Pair a display font (serif or bold sans) with Inter as body only. Display font does the heavy lifting; Inter stays in its lane | | Long-form body text with line-height below 1.5 | Crowded, hard to track across line wraps. Readers lose their place. Especially punishing on mobile where lines wrap more | Minimum body line-height: 1.6. For dense data tables: 1.4. For headings: 1.1-1.2. Longer lines need more line-height | | Using the same font weight for all heading levels | Flat hierarchy. Reader can't scan. Headings and body text run together visually | Minimum 1.25x weight contrast between heading levels. h1: 700-800, h2: 600-700, h3: 500-600. Scale + weight = hierarchy |

Typography Pairing Quick Reference

| Direction | Display | Body | Best for | |-----------|---------|------|----------| | Editorial luxury | Canela / DM Serif Display | DM Sans | Brand landing, long-form, portfolios | | Bold tech | Cabinet Grotesk / Space Grotesk | Geist | Product pages, developer tools | | Swiss modern | Neue Haas Grotesk | Inter | Dashboards, admin, data-heavy | | Classic warm | Playfair Display / Cormorant Garamond | Charter / Georgia | Editorial, publishing, luxury | | Punchy condensed | Bebas Neue / Anton | Geist / DM Sans | Hero headlines, campaign pages |

Checklist

• [ ] Skill loads without errors in the AI agent
• [ ] YAML frontmatter is valid (description, compatibility, audience)
• [ ] Workflow section provides clear step-by-step instructions
• [ ] Error handling section covers common failure modes
• [ ] All referenced files (references/, scripts/, assets/) exist
• [ ] Skill triggers correctly for intended use cases
• [ ] No broken links or missing resources

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: EliasOulkadi
• Source: EliasOulkadi/shokunin
• License: MIT
• Homepage: https://eliasoulkadi.github.io/shokunin/

Install and usage instructions live in the source repository linked above.