Módulo 1.2 — ✨ impeccable · Skill Design

🧩 O que é / o que faz

Definição precisa e escopo real do skill

"O skill que melhora o que já existe — nunca o que começa do zero."

impeccable v3.1.1 é um skill de Claude Code com licença Apache 2.0, derivado do frontend-design da Anthropic, especializado em redesign, crítica, auditoria e polish de interfaces frontend já existentes. Ele organiza 24 comandos em 5 categorias (Build, Evaluate, Refine, Enhance, Fix) e age como um design reviewer + implementador ao mesmo tempo.

✓ DENTRO DO ESCOPO

✓ Redesign e critique de páginas existentes
✓ UX review com heurísticas e scoring
✓ Auditoria técnica (a11y, perf, responsivo)
✓ Polish final antes do deploy
✓ Animações e micro-interações
✓ Sistemas de design e tokens reutilizáveis
✓ i18n, estados de erro/vazio, edge cases

✗ FORA DO ESCOPO

✗ Backend — APIs, banco de dados, servidores
✗ Criar interface do zero (→ frontend-design)
✗ Identidade de marca e logo (→ brand-guidelines)
✗ Lógica de negócio pura sem UI
✗ Infraestrutura e DevOps
✗ Tarefas non-UI (testes unitários, CI/CD)

comandos

v3.1.1

versão atual

categorias

Apache

licença 2.0

🎣 Quando dispara

Gatilhos exatos da description — em que pedido o Claude aciona

💡

O Claude analisa cada pedido do usuário contra a description do skill. Se há match, o skill é invocado automaticamente — sem o usuário escrever /impeccable.

Verbos que ativam impeccable

design / redesign — refazer visual de página que já existe

critique / audit — review de UX ou auditoria técnica (a11y, perf, responsivo)

polish / harden / optimize — refinamento e hardening de interface existente

animate / colorize — adicionar movimento ou cor estratégica

bolder / quieter / distill — amplificar, suavizar ou simplificar design

clarify / adapt / typeset / layout — fixes em copy, responsividade, tipografia, espaçamento

shape / extract / teach / document — planejamento UX, extração de tokens, setup de contexto

⚠️

Não dispara quando o pedido é criar do zero sem mencionar algo existente. Nesses casos, o Claude usa frontend-design. A distinção é: impeccable = "o depois", frontend-design = "o início".

🎯

Match por verbo

🔄

Auto-invocado

📝

Ou /impeccable

🧭

Routing interno

🚀 Como melhora suas páginas

Valor concreto para o resultado final

👁️ Visual & Hierarquia

Escala tipográfica, peso, contraste, espaçamento rítmico (≥1.25 ratio entre steps). Elimina flat scales e banalidade visual.

♿ Acessibilidade

Auditoria WCAG, contraste, ARIA labels, focus visible, keyboard navigation — o que o Lighthouse não pega.

⚡ Performance de UI

Diagnose e fixe lentidão de render, reflows, animações com CLS, fontes bloqueantes.

🎬 Motion & Micro-interações

Animações purposeful, transições suaves, feedback de estado, delight sem excess — respeitando prefers-reduced-motion.

📱 Responsivo & Adapt

Breakpoints, containers fluidos, tipografia escalável, touch targets corretos, dark/light mode.

🔩 Design Systems

Extrai tokens CSS/Tailwind, cria DESIGN.md documentado, torna componentes reutilizáveis e consistentes.

💡

Shared Design Laws embutidas: o skill bloqueia automaticamente side-stripe borders, gradient text, glassmorphism decorativo, hero-metric clichê e identical card grids — impondo padrões de qualidade antes mesmo de qualquer comando.

UX copy

labels e erros

i18n

internacionalização

Edge cases

empty · error · loading

Tokens

design system

⚙️ Como funciona por dentro

Stack, arquivos, scripts e abordagem real

📦 Estrutura do skill

Arquivos principais

SKILL.md — manifest (name, description, commands, version)
reference/critique.md — UX heuristic review
reference/audit.md — a11y + perf + responsivo
reference/polish.md — pré-ship quality pass
reference/animate.md — motion purposeful
reference/extract.md — tokens e design system
scripts/pin.mjs — criar atalhos de comando

Setup (context gathering)

1. Lê PRODUCT.md e DESIGN.md do projeto
2. Registra contexto de design do codebase
3. Aplica Shared Design Laws (absolute bans)
4. Roteia para o comando correto
5. Executa o reference file do comando

Fluxo de execução

Pedido do usuário

Claude detecta verbo de melhoria → ativa impeccable

Setup & Context Gathering

Lê PRODUCT.md, DESIGN.md, registra estado atual da UI

Routing Rules

Primeiro palavra = comando → carrega reference file; sem argumento → menu; geral → aplica setup + register

Execução + Entrega

Implementa mudanças no codebase, aplica shared design laws, entrega código ou análise

🔧 Criar atalho de comando (pin)

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

Cria atalho /polish que invoca diretamente /impeccable polish. Válido para qualquer um dos 24 comandos.

SKILL.md

manifest

reference/

24 arquivos

pin.mjs

atalhos

allowed-tools

npx impeccable *

💬 Exemplo prático + PROMPT pronto

Copie e cole direto no Claude Code

Cenário

Você tem um dashboard React/Tailwind funcional mas visualmente tedioso: tipografia flat, cards idênticos, zero animação, formulário sem estados de erro, não responsivo em mobile. O impeccable entra aqui.

PROMPT — Cole no Claude Code Prompt 1 — Auditoria completa

/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 — Cole no Claude Code Prompt 2 — Polish pré-deploy

/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 — Cole no Claude Code Prompt 3 — Extrair 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.

✓ USAR QUANDO

✓ Interface funciona mas está feia/bland
✓ Precisa de QA de UX antes de ship
✓ Quer animar sem saber por onde começar
✓ Design system inconsistente
✓ Formulário sem tratamento de edge cases

✗ NÃO USAR QUANDO

✗ Não existe ainda nada de interface
✗ Precisa criar API ou backend
✗ Quer criar identidade visual do zero
✗ Tarefa é CI/CD, testes, infra

🔍

critique

✨

polish

📦

extract

🎬

animate

🧬 Combina com / limites

Ecossistema de skills e quando não usar impeccable

⚛️ frontend-design ↔ ✨ impeccable — a dupla fundamental

frontend-design (Módulo 1.1)

Cria interface do zero. Decide arquitetura, stack (React/Tailwind/shadcn), estrutura de componentes, fluxo de UX inicial. É o "antes".

impeccable (este módulo)

Pega a interface existente e a torna impecável. Não decide stack — melhora o que há. É o "depois". Fluxo natural: frontend-design → impeccable polish.

Combina com outros skills do curso

⚛️

frontend-design (1.1)

Cria o scaffold; impeccable refina. Usar em sequência: 1.1 → 1.2.

🧱

web-artifacts-builder (1.3)

Gera artefatos HTML standalone; impeccable os melhora depois de criados.

🏷️

brand-guidelines (2.2)

Define identidade e tokens de marca; impeccable apply colorize usa esses tokens na interface.

🎬

animation-designer (3.1)

Para animações complexas e cinemáticas; impeccable animate cobre motion de UI/UX do dia-a-dia.

🕹️

agent-browser (4.3)

Valida o resultado de impeccable no browser real via Playwright — vê se as melhorias renderizam corretamente.

⚠️ Limites que o usuário deve conhecer

→ Não cria do zero. Se não existe interface, comece com frontend-design (1.1).
→ Não decide arquitetura ou stack — trabalha com o que encontra no projeto.
→ Não é para branding ou logo (use brand-guidelines T2.2).
→ Para animações 3D complexas ou vídeo, use os skills de Mídia (Trilha 3).

⚛️→✨

criar→refinar

🏷️+✨

brand+polish

🕹️✓✨

validar browser

🎬≠✨

3D→Trilha 3

📋 Resumo do Módulo 1.2

Neste módulo você aprendeu o que torna o impeccable único no ecossistema de skills: ele é o skill do "depois" — entra quando há interface existente e a eleva ao máximo.

✓ O que você aprendeu

✓ Definição precisa e escopo do impeccable v3.1.1
✓ Os 24 comandos distribuídos em 5 categorias
✓ Verbos que disparam o skill automaticamente
✓ Como as Shared Design Laws protegem qualidade
✓ Setup, routing rules e fluxo de execução interno
✓ Diferença crítica: impeccable vs frontend-design
✓ 3 prompts prontos para usar agora
✓ Como combina com brand-guidelines e agent-browser

Próximo módulo

🧱

Módulo 1.3 — web-artifacts-builder

Gerar artefatos HTML/SVG/Mermaid standalone direto do Claude Code.

Enquanto o impeccable refina interfaces existentes, o web-artifacts-builder gera novos artefatos visuais reutilizáveis.

← Voltar para Trilha Próximo Módulo: 1.3 🧱 →