Module 1.2 — ✨ impeccable · Design Skill

🧩 What it is / what it does

Precise definition and actual scope of the skill

"The skill that improves what already exists—never what starts from scratch."

impeccable v3.1.1 is a Claude Code skill with an Apache 2.0 license, derived from Anthropic's frontend-design, specialized in redesign, critique, audit, and polish of existing frontend interfaces. It organizes 24 commands into 5 categories (Build, Evaluate, Refine, Enhance, Fix) and acts as both a design reviewer and implementer.

✓ IN SCOPE

✓ Redesign and critique of existing pages
✓ UX review with heuristics and scoring
✓ Technical audit (a11y, performance, responsive design)
✓ Final polish before deploy
✓ Animations and micro-interactions
✓ Reusable design systems and tokens
✓ i18n, error/empty states, edge cases

✗ OUT OF SCOPE

✗ Backend — APIs, databases, servers
✗ Create an interface from scratch (→ frontend-design)
✗ Brand identity and logo (→ brand-guidelines)
✗ Pure business logic without UI
✗ Infrastructure and DevOps
✗ Non-UI tasks (unit tests, CI/CD)

commands

v3.1.1

current version

🎣 When it triggers

Exact description triggers — which request Claude acts on

💡

Claude evaluates each user request against the description from the skill. If there’s a match, the skill is invoked automatically — without the user typing /impeccable.

Verbs that activate impeccable

design / redesign — redesign the look of an existing page

critique / audit — UX review or technical audit (a11y, performance, responsive design)

polish / harden / optimize — refinement and hardening of an existing interface

animate / colorize — add motion or strategic color

bolder / quieter / distill — amplify, soften, or simplify the design

clarify / adapt / typeset / layout — fixes to copy, responsiveness, typography, and spacing

shape / extract / teach / document — UX planning, token extraction, context setup

⚠️

Doesn't trigger when the request is to create something from scratch without mentioning anything existing. In these cases, Claude uses frontend-design. The distinction is: impeccable = "the polish", frontend-design = "the beginning".

🎯

Match by verb

🔄

Auto-invoked

📝

Or /impeccable

🧭

Internal routing

🚀 How it improves your pages

Concrete value for the final result

👁️ Visuals & Hierarchy

Typographic scale, weight, contrast, rhythmic spacing (≥1.25 ratio between steps). Eliminates flat scales and visual blandness.

♿ Accessibility

WCAG audit, contrast, ARIA labels, visible focus, keyboard navigation—what Lighthouse misses.

⚡ UI Performance

Diagnose and fix slow rendering, reflows, animations with CLS, and blocking fonts.

🎬 Motion & Microinteractions

Purposeful animations, smooth transitions, state feedback, delight without excess—while respecting prefers-reduced-motion.

📱 Responsive & Adapt

Breakpoints, fluid containers, scalable typography, correct touch targets, dark/light mode.

🔩 Design Systems

Extract CSS/Tailwind tokens, create a documented DESIGN.md, and make components reusable and consistent.

💡

Shared Design Laws embedded: the skill automatically blocks side-stripe borders, gradient text, decorative glassmorphism, cliché hero metrics, and identical card grids — enforcing quality standards before any command is run.

UX copy

labels and errors

i18n

internationalization

Edge cases

empty · error · loading

Tokens

design system

⚙️ How it works under the hood

Actual stack, files, scripts, and approach

📦 Skill structure

Main files

SKILL.md — manifest (name, description, commands, version)
reference/critique.md — UX heuristic review
reference/audit.md — accessibility + performance + responsive design
reference/polish.md — pre-ship quality pass
reference/animate.md — purposeful motion
reference/extract.md — tokens and design system
scripts/pin.mjs — create command shortcuts

Setup (context gathering)

1. Read the project's PRODUCT.md and DESIGN.md
2. Records the codebase's design context
3. Apply Shared Design Laws (absolute bans)
4. Route to the correct command
5. Run the command's reference file

Execution workflow

User request

Claude detects an improvement verb → activates impeccable

Setup & Context Gathering

Read PRODUCT.md and DESIGN.md, and record the current UI state

Routing Rules

First word = command → loads reference file; no argument → menu; general → applies setup + register

Execution + Delivery

Implements changes in the codebase, applies shared design laws, delivers code or analysis

🔧 Create a command shortcut (pin)

node .claude/skills/impeccable/scripts/pin.mjs pin polish

Create shortcut /polish that directly invokes /impeccable polish. Applies to any of the 24 commands.

SKILL.md

manifest

reference/

24 files

pin.mjs

shortcuts

allowed-tools

npx impeccable *

💬 Practical example + Ready-to-use PROMPT

Copy and paste directly into Claude Code

Scenario

You have a functional React/Tailwind dashboard that's visually tedious: flat typography, identical cards, no animation, a form with no error states, and no mobile responsiveness. That's where impeccable comes in.

PROMPT — Paste into Claude Code Prompt 1 — Full audit

/impeccable critique src/components/Dashboard.tsx

Quero um UX review completo com heuristic scoring.
Foque em: hierarquia visual, carga cognitiva,
estados de erro e empty state, acessibilidade,
e responsividade mobile. Me entregue um relatório
priorizado com as 5 issues mais críticas primeiro.

PROMPT — Paste into Claude Code Prompt 2 — Pre-deploy polish

/impeccable polish src/pages/Landing.tsx

Final quality pass antes de ir para produção.
Verifique: contraste WCAG AA, focus visible,
tipografia (65-75ch body), touch targets ≥44px,
i18n hardcoded strings, e aplique animate com
prefers-reduced-motion.

PROMPT — Paste into Claude Code Prompt 3 — Extract a design system

/impeccable extract src/

Extraia todos os tokens de design existentes
(cores, espaçamento, tipografia, shadows) e
crie um DESIGN.md documentado + tokens.css
com custom properties. Identifique componentes
duplicados que podem virar um único reutilizável.

✓ USE WHEN

✓ Interface works but looks ugly/bland
✓ Need UX QA before shipping
✓ Want to animate but don't know where to start
✓ Inconsistent design system
✓ Form without edge case handling

✗ DO NOT USE WHEN

✗ No interface exists yet
✗ Need to create an API or backend
✗ Want to create a visual identity from scratch
✗ Task involves CI/CD, testing, infrastructure

🔍

critique

✨

polish

📦

extract

🎬

animate

🧬 Works well with / limitations

Skills ecosystem and when not to use impeccable

⚛️ frontend-design ↔ ✨ impeccable — the fundamental duo

frontend-design (Module 1.1)

Create interface from scratch. Decide on the architecture, stack (React/Tailwind/shadcn), component structure, and initial UX flow. It's the "before".

impeccable (this module)

Takes the existing interface and makes it impeccable. It doesn't decide on the stack — it improves what's there. It's the "after". Natural workflow: frontend-design → impeccable polish.

Works with other course skills

⚛️

frontend-design (1.1)

Creates the scaffold; impeccable refines it. Use in sequence: 1.1 → 1.2.

🧱

web-artifacts-builder (1.3)

Generates standalone HTML artifacts; impeccable improves them after they're created.

🏷️

brand-guidelines (2.2)

Define brand identity and tokens; impeccable apply colorize uses these tokens in the interface.

🎬

animation-designer (3.1)

For complex, cinematic animations; impeccable animate covers everyday UI/UX motion.

🕹️

agent-browser (4.3)

Validate impeccable's result in a real browser via Playwright—check whether the improvements render correctly.

⚠️ Limitations the user should know about

→ Doesn't create from scratch. If no interface exists, start with frontend-design (1.1).
→ Doesn't decide the architecture or stack — it works with what it finds in the project.
→ Not for branding or logos (use brand-guidelines T2.2).
→ For complex 3D animations or video, use the Media skills (Track 3).

⚛️→✨

create→refine

🏷️+✨

brand+polish

🕹️✓✨

validate in the browser

🎬≠✨

3D→Track 3

📋 Module 1.2 Summary

In this module, you learned what makes impeccable unique in the skills ecosystem: it is the skill for "after" — comes in when an interface already exists and elevates it to the highest level.

✓ What you learned

✓ Precise definition and scope of impeccable v3.1.1
✓ The 24 commands across 5 categories
✓ Verbs that trigger the skill automatically
✓ How Shared Design Laws protect quality
✓ Setup, routing rules, and internal execution flow
✓ Critical distinction: impeccable vs frontend-design
✓ 3 ready-to-use prompts
✓ How it works with brand-guidelines and agent-browser

Next module

🧱

Module 1.3 — web-artifacts-builder

Generate standalone HTML/SVG/Mermaid artifacts directly from Claude Code.

While impeccable refines existing interfaces, web-artifacts-builder generates new reusable visual assets.

← Back to Track Next Module: 1.3 🧱 →