1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI. --- Impeccable: The missing upgrade to Anthropic's frontend-design skill

Impeccable

Design fluency for AI coding tools

Great design prompts require design vocabulary. Most people don't have it. You can't ask for "more vertical rhythm" if you've never used those words. Impeccable gives you commands that put designer language in your hands.

What's included

Enhanced frontend-design skill + anti-patterns · 17 commands: /polish, /audit, /simplify, /bolder...

Get Started

Works with

Welcome to Our Platform

The best solution for your needs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.

Inter font (again) Purple gradient Generic copy Cards on cards

Introducing

Thoughtful Design

Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.

With Skills

Generic AI Output

With Design Skills

The Antidote

Anthropic's original frontend-design skill laid the foundation. Impeccable builds on it with curated patterns and anti-patterns across typography, color, layout, motion, and more.

Missing something? Suggest a pattern →

The Framework

One comprehensive skill with deep expertise, plus 17 commands that form the language of design.

Diagnostic

Quality

Adaptation

Enhancement

Intensity

System

Tap a command to see details

Commands in Action

See the commands in action View cheatsheet →

Diagnose

/audit

Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.

→ leads to /normalize, /harden, /optimize, /adapt, /clarify

/critique

Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.

→ leads to /polish, /simplify, /bolder, /quieter

Quality

/harden

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.

+ combines with /optimize

/normalize

Normalize design to match your design system and ensure consistency

+ combines with /clarify, /adapt

/optimize

Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.

/polish

Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.

Intensity

/bolder

Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.

↔ pairs with /quieter

/quieter

Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.

↔ pairs with /bolder

Adaptation

/adapt

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.

+ combines with /normalize, /clarify

/clarify

Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.

+ combines with /normalize, /adapt

/simplify

Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.

+ combines with /quieter, /normalize

Enhancement

/animate

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

+ combines with /delight

/colorize

Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.

+ combines with /bolder, /delight

/delight

Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.

+ combines with /bolder, /animate

System

/extract

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.

/onboard

Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.

/teach-impeccable

One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.

adapt.md

--- name: adapt description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments. args: - name: target description: The feature or component to adapt (optional) required: false - name: context description: What to adapt for (mobile, tablet, desktop, print, email, etc.) required: false --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. ## Assess Adaptation Challenge Understand what needs adaptation and why: 1. **Identify the source context**: - What was it designed for originally? (Desktop web? Mobile app?) - What assumptions were made? (Large screen? Mouse input? Fast connection?) - What works well in current context? 2. **Understand target context**: - **Device**: Mobile, tablet, desktop, TV, watch, print? - **Input method**: Touch, mouse, keyboard, voice, gamepad? - **Screen constraints**: Size, resolution, orientation? - **Connection**: Fast wifi, slow 3G, offline? - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - **User expectations**: What do users expect on this platform? 3. **Identify adaptation challenges**: - What won't fit? (Content, navigation, features) - What won't work? (Hover states on touch, tiny touch targets) - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop) **CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context. ## Plan Adaptation Strategy Create context-appropriate strategy: ### Mobile Adaptation (Desktop → Mobile) **Layout Strategy**: - Single column instead of multi-column - Vertical stacking instead of side-by-side - Full-width components instead of fixed widths - Bottom navigation instead of top/side navigation **Interaction Strategy**: - Touch targets 44x44px minimum (not hover-dependent) - Swipe gestures where appropriate (lists, carousels) - Bottom sheets instead of dropdowns - Thumbs-first design (controls within thumb reach) - Larger tap areas with more spacing **Content Strategy**: - Progressive disclosure (don't show everything at once) - Prioritize primary content (secondary content in tabs/accordions) - Shorter text (more concise) - Larger text (16px minimum) **Navigation Strategy**: - Hamburger menu or bottom navigation - Reduce navigation complexity - Sticky headers for context - Back button in navigation flow ### Tablet Adaptation (Hybrid Approach) **Layout Strategy**: - Two-column layouts (not single or three-column) - Side panels for secondary content - Master-detail views (list + detail) - Adaptive based on orientation (portrait vs landscape) **Interaction Strategy**: - Support both touch and pointer - Touch targets 44x44px but allow denser layouts than phone - Side navigation drawers - Multi-column forms where appropriate ### Desktop Adaptation (Mobile → Desktop) **Layout Strategy**: - Multi-column layouts (use horizontal space) - Side navigation always visible - Multiple information panels simultaneously - Fixed widths with max-width constraints (don't stretch to 4K) **Interaction Strategy**: - Hover states for additional information - Keyboard shortcuts - Right-click context menus - Drag and drop where helpful - Multi-select with Shift/Cmd **Content Strategy**: - Show more information upfront (less progressive disclosure) - Data tables with many columns - Richer visualizations - More detailed descriptions ### Print Adaptation (Screen → Print) **Layout Strategy**: - Page breaks at logical points - Remove navigation, footer, interactive elements - Black and white (or limited color) - Proper margins for binding **Content Strategy**: - Expand shortened content (show full URLs, hidden sections) - Add page numbers, headers, footers - Include metadata (print date, page title) - Convert charts to print-friendly versions ### Email Adaptation (Web → Email) **Layout Strategy**: - Narrow width (600px max) - Single column only - Inline CSS (no external stylesheets) - Table-based layouts (for email client compatibility) **Interaction Strategy**: - Large, obvious CTAs (buttons not text links) - No hover states (not reliable) - Deep links to web app for complex interactions ## Implement Adaptations Apply changes systematically: ### Responsive Breakpoints Choose appropriate breakpoints: - Mobile: 320px-767px - Tablet: 768px-1023px - Desktop: 1024px+ - Or content-driven breakpoints (where design breaks) ### Layout Adaptation Techniques - **CSS Grid/Flexbox**: Reflow layouts automatically - **Container Queries**: Adapt based on container, not viewport - **`clamp()`**: Fluid sizing between min and max - **Media queries**: Different styles for different contexts - **Display properties**: Show/hide elements per context ### Touch Adaptation - Increase touch target sizes (44x44px minimum) - Add more spacing between interactive elements - Remove hover-dependent interactions - Add touch feedback (ripples, highlights) - Consider thumb zones (easier to reach bottom than top) ### Content Adaptation - Use `display: none` sparingly (still downloads) - Progressive enhancement (core content first, enhancements on larger screens) - Lazy loading for off-screen content - Responsive images (`srcset`, `picture` element) ### Navigation Adaptation - Transform complex nav to hamburger/drawer on mobile - Bottom nav bar for mobile apps - Persistent side navigation on desktop - Breadcrumbs on smaller screens for context **IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect. **NEVER**: - Hide core functionality on mobile (if it matters, make it work) - Assume desktop = powerful device (consider accessibility, older machines) - Use different information architecture across contexts (confusing) - Break user expectations for platform (mobile users expect mobile patterns) - Forget landscape orientation on mobile/tablet - Use generic breakpoints blindly (use content-driven breakpoints) - Ignore touch on desktop (many desktop devices have touch) ## Verify Adaptations Test thoroughly across contexts: - **Real devices**: Test on actual phones, tablets, desktops - **Different orientations**: Portrait and landscape - **Different browsers**: Safari, Chrome, Firefox, Edge - **Different OS**: iOS, Android, Windows, macOS - **Different input methods**: Touch, mouse, keyboard - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.

zsh — 80x24

➜/adapt

1. Analyze...
2. Adjust...
3. Optimize...
✓ Complete

Text too small...

Mobile

Broken ✗

Desktop

Works ✓

Mobile

Stacked ✓

Tablet

2-col ✓

Desktop

Sidebar ✓

Fixed layout → Responsive across devices

➜

Download for Your AI Harness

Same skills and commands, packaged for your tool of choice.

Prefix commands with /i- to avoid conflicts

Once installed, keep the command cheatsheet handy for quick reference.

Cursor

Skills require setup

Switch to Nightly channel in Settings → Beta
Enable Agent Skills in Settings → Rules

Learn more

Claude Code

/plugin marketplace add pbakaus/impeccable

Then run /plugin menu to install

Or download manually

Gemini CLI

Skills require setup

Install preview: npm i -g @google/gemini-cli@preview
Run /settings and enable "Skills"
Run /skills list to verify

Learn more

Codex CLI

Frequently Asked Questions

Where do I put the downloaded files?

Extract the ZIP to your project root (same level as your package.json or src/ folder). The files should create a hidden folder like .claude/, .cursor/, .gemini/, or .codex/.

Alternatively, you can install globally to your home directory:

Claude Code: ~/.claude/
Cursor: ~/.cursor/
Gemini CLI: ~/.gemini/
Codex CLI: ~/.codex/

Project-level installation takes precedence and lets you version control your skills.

Commands or skills aren't appearing. What do I do?

For commands: Type / in your AI tool and look for commands like /audit, /polish, etc. If they don't appear, double-check the files are in the correct location.

For skills: Skills are applied automatically when relevant. To verify, explicitly mention "use the frontend-design skill" in your prompt—this forces the AI to acknowledge and apply it.

Tool-specific setup:

Cursor: Requires Nightly channel + Agent Skills enabled in Settings → Rules
Gemini CLI: Requires @google/gemini-cli@preview + Skills enabled via /settings

I'm new to AI coding tools. Where do I start?

Skills and commands are intermediate features. If you're just getting started, learn the basics first:

Claude Code: Official Documentation
Cursor: Cursor Docs
Gemini CLI: Gemini CLI Docs
Codex CLI: Codex GitHub

Once you're comfortable with basic prompting and code generation, come back and give Impeccable a try.

Work with me

I help teams navigate AI transformation: upleveling developers, building AI-native workflows, and shipping products. Deep expertise in developer experience, design systems, and full-stack architecture.

Get in touch Leave a tip

Impeccable: Design skills for AI coding tools

WidgetWorx 2.1 » My Mac Apps » iCloud Kicker