# Impeccable > Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers design systems, anti-pattern detection, brand vs product registers, typography, color (OKLCH), spacing, motion, copy, and accessibility. By Paul Bakaus (ex-Google, ex-Disney, ex-Unity). Full version in… - **Type:** Skill - **Install:** `agentstack add skill-eliasoulkadi-shokunin-impeccable` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [EliasOulkadi](https://agentstack.voostack.com/s/eliasoulkadi) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [EliasOulkadi](https://github.com/EliasOulkadi) - **Source:** https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/impeccable - **Website:** https://eliasoulkadi.github.io/shokunin/ ## Install ```sh agentstack add skill-eliasoulkadi-shokunin-impeccable ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 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) ```css --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](https://github.com/EliasOulkadi) - **Source:** [EliasOulkadi/shokunin](https://github.com/EliasOulkadi/shokunin) - **License:** MIT - **Homepage:** https://eliasoulkadi.github.io/shokunin/ Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-eliasoulkadi-shokunin-impeccable - Seller: https://agentstack.voostack.com/s/eliasoulkadi - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.