Source: skill files (frontend-design, taste-skill, soft-skill, ui-ux-pro-max, teach-impeccable, stitch-skill, extract, normalize, animate, arrange, typeset, colorize, bolder, distill, polish, delight, critique, audit, overdrive, harden, onboard, optimize, clarify) — canonical entity article: impeccable-v3 (open-source repo at impeccable.style, ~25k stars, MIT, Jay Yang / Robo Nuggets).
Claude Code ships with 23 design skills that form a layered system for producing high-end UI. They are organized into five tiers, from foundational aesthetic direction down to specialized refinement. Understanding this hierarchy is the difference between invoking random skills and running a deliberate design pipeline.
2026-05-10 refresh — Impeccable v3 lands. The 23 skills come from the open-source Impeccable toolkit (mission: “give design fluency to AI harnesses”). v3 adds a 37-pattern AI-slop catalog browsable at impeccable.style, a Chrome extension that scans any live URL and flags slop patterns inline, and a bake/tweak workflow for last-mile manual sliders (title size, density, accent glow, kerning, button roundness, saturation) that emit a patch the agent applies back. Variation-first prompting is the canonical invocation pattern — ask for 3 lightweight design variants, pick by reaction, then deepen the chosen one (mirrors beautiful-html-templates AGENTS.md). The skill list below is authoritative; impeccable-v3 carries the framework provenance + repo + Chrome extension + 37-pattern catalog as primary facts.
Tier 1: Foundation
These four skills define the creative direction and quality baseline. They should be understood deeply before touching anything in Tiers 2-5.
- frontend-design --- The master skill. Gathers context (3-stage protocol), commits to a bold aesthetic direction, enforces anti-AI-slop rules across typography, color, layout, motion, and interaction. Every other design skill operates within the creative frame this skill establishes. See frontend-design-deep-dive.
- taste-skill --- Design dials (variance, motion intensity, visual density), the “Lila Ban” on purple/blue neon, a creative arsenal of 30+ patterns (Bento Grid, Parallax Tilt, Magnetic Buttons), and a spring-physics motion engine. See taste-skill-deep-dive.
- soft-skill --- $150k agency-level output. The “Absolute Zero” directive (instant failure for banned patterns), creative variance engine with vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism), layout archetypes, and haptic micro-aesthetics. See soft-skill-creative-direction.
- ui-ux-pro-max --- Searchable design database with a Python CLI tool. 67 styles, 96 palettes, 57 font pairings, 99 UX guidelines, 25 chart types, 13 tech stacks. The
--design-systemcommand generates a complete design system in one shot. See ui-ux-pro-max-deep-dive.
Tier 2: Design System
One-time and ongoing system-level operations. Run these when establishing or maintaining a project’s design identity.
- teach-impeccable --- One-time setup. Asks questions about your users, brand, aesthetic preferences, and design principles, then saves an
.impeccable.mdfile that frontend-design reads on every subsequent invocation. - stitch-skill --- Generates a
DESIGN.mdfor Google Stitch projects. Enforces premium, anti-generic UI standards with strict typography, color, spacing, and component rules. - extract --- Identifies reusable components, tokens, and patterns from existing code and consolidates them into your design system.
- normalize --- Audits existing UI for drift from your design system. Realigns spacing, tokens, and patterns to match the established standard.
Tier 3: Tactical Enhancement
Each skill targets one design dimension. Invoke them individually during the refinement phase, in the order listed.
- arrange --- Spatial rhythm. Fixes monotonous grids, inconsistent spacing, weak visual hierarchy. Introduces asymmetry and varied containers.
- typeset --- Typography. Fixes font choices, hierarchy, sizing, weight, readability. Makes text feel intentional rather than default.
- colorize --- Strategic color. Applies the 60/30/10 rule to monochromatic or visually flat interfaces. Adds engagement without chaos.
- animate --- Motion. Adds purposeful animations, micro-interactions, and transitions. Enforces exponential easing (ease-out-quart/quint/expo) and proper timing (150-300ms micro, 500-800ms entrances).
- bolder --- Amplification. When a design is too safe, too bland, too expected. Increases visual impact while maintaining usability.
- distill --- Simplification. The opposite of bolder. Strips unnecessary complexity when a design is cluttered or overwhelming.
- polish --- Final pass. Fixes alignment, spacing, consistency, hover states, edge cases. The last step before shipping.
- delight --- Joy and personality. Easter eggs, unexpected touches, moments that make the interface memorable. Only invoke after everything else works.
Tier 4: Quality and Evaluation
Assessment skills that identify what needs fixing. Run them between build and refine phases.
- critique --- UX assessment using Nielsen’s 10 heuristics. Scores 0-20 across visual hierarchy, information architecture, emotional resonance, and cognitive load. Identifies problems.
- audit --- Technical quality check across accessibility, performance, theming, responsive design, and anti-patterns. P0-P3 severity scoring across 5 dimensions. Finds implementation issues.
Tier 5: Advanced
Specialized skills for specific situations. Do not reach for these by default.
- overdrive --- Technically ambitious implementations: shaders, spring physics, scroll-driven reveals, 60fps animations. Only after fundamentals are solid.
- harden --- Production resilience: i18n support, error handling, text overflow, offline states, edge case management.
- onboard --- First-run experiences, empty states, progressive onboarding. Helps users reach value quickly.
- optimize --- Performance: loading speed, rendering, animations, images, bundle size. Diagnoses and fixes lag.
- clarify --- UX copy: error messages, labels, microcopy, instructions. Makes interfaces easier to understand.
Skill Relationship Diagram
┌─────────────────────┐
│ teach-impeccable │
│ (one-time setup) │
└──────────┬──────────┘
│ creates .impeccable.md
▼
┌──────────────────────────────────────────────────────┐
│ FRONTEND-DESIGN (master) │
│ context gathering → direction → build │
│ reads: .impeccable.md, instructions, DESIGN.md │
└────────┬─────────────────┬───────────────┬───────────┘
│ │ │
┌─────▼─────┐ ┌─────▼─────┐ ┌─────▼─────┐
│taste-skill │ │ soft-skill│ │ui-ux-pro │
│ (dials & │ │ (agency │ │ (database │
│ patterns) │ │ level) │ │ & CLI) │
└─────┬─────┘ └─────┬─────┘ └─────┬─────┘
└────────────────┼────────────────┘
│ creative direction set
▼
┌────────────────────────────────┐
│ BUILD PHASE │
│ frontend-design generates UI │
└────────────────┬───────────────┘
│
┌─────────▼─────────┐
│ EVALUATE PHASE │
│ critique → audit │
└─────────┬─────────┘
│ issues identified
▼
┌─────────────────────────────────────────────────────┐
│ REFINE PHASE (sequential) │
│ arrange → typeset → colorize → animate │
└────────────────────────┬────────────────────────────┘
│
┌────────────▼────────────┐
│ bolder OR distill │
│ (amplify or simplify) │
└────────────┬────────────┘
│
┌──────▼──────┐
│ delight │
│ (joy/fun) │
└──────┬──────┘
│
┌──────▼──────┐
│ polish │
│ (final QA) │
└──────┬──────┘
│
┌────────────▼────────────┐
│ ADVANCED (as needed) │
│ harden, optimize, │
│ onboard, clarify, │
│ overdrive │
└─────────────────────────┘
Chaining Rules
- Always start with Tier 1. frontend-design sets the creative frame. Without it, lower-tier skills produce generic output.
- Tier 3 skills are sequential. arrange before typeset, typeset before colorize, colorize before animate. Each builds on the previous.
- Evaluate before refining. Run critique and audit to know what to fix, then apply Tier 3 skills to the identified problems.
- bolder and distill are mutually exclusive. One amplifies, the other simplifies. Pick based on the critique results.
- delight comes last in Tier 3. Never add personality before the structure is sound.
- Tier 5 is situational. Most projects never need overdrive. Every production project needs harden.
Key Takeaways
- 23 design skills form a 5-tier hierarchy from creative direction to specialized refinement
- frontend-design is the master skill --- every other design skill operates within its frame
- The workflow is: setup (teach-impeccable) → direction (Tier 1) → build → evaluate (Tier 4) → refine (Tier 3) → ship (Tier 5)
- Tier 3 skills have a specific order: arrange → typeset → colorize → animate → bolder/distill → delight → polish
- Never skip the foundation --- running tactical skills without creative direction produces generic AI output
- See design-workflow for the complete step-by-step process
Related
- impeccable-v3 — canonical entity article for the Impeccable toolkit these 23 skills come from
- frontend-design-deep-dive
- ui-ux-pro-max-deep-dive
- taste-skill-deep-dive
- soft-skill-creative-direction
- anti-ai-slop-guide
- design-workflow
- design-skills-cheatsheet
- building-skills-guide
- skills-ecosystem
Try It
- Run
/teach-impeccablein any project to create your.impeccable.mdbaseline - On your next UI task, invoke frontend-design first and let it gather context before building
- After the initial build, run
/critiqueto get a Nielsen heuristic score - Apply Tier 3 skills to the weakest areas identified by critique
- Run
/auditfor a technical quality check before shipping - Compare the result to your previous AI-generated UI --- the difference should be obvious