impeccable

Visão geral da skill impeccable

Para que serve o impeccable

A skill impeccable é uma skill de design de UI e implementação frontend para criar interfaces marcantes, prontas para produção, que não tenham cara de saída genérica de IA. Ela é mais indicada para quem está construindo componentes web, páginas, superfícies de app, pôsteres ou fluxos de funcionalidades em que qualidade visual, detalhe de interação e consistência de sistema importam tanto quanto o código funcionar.

Quem deve instalar o impeccable

Instale o impeccable se você já entrega código frontend e quer incorporar mais critério de design ao fluxo de geração. Ele é especialmente útil para product designers que programam, engenheiros frontend e usuários de agentes que precisam de impeccable para UI Design, e não apenas de scaffolding bruto. Se você só quer um layout provisório rápido, essa skill provavelmente é mais robusta do que o necessário.

O que diferencia esta skill

O principal diferencial está na estrutura. O impeccable não apenas diz “deixe bonito”; ele organiza o trabalho em três modos: craft para definir a forma antes de construir, teach para preparar o contexto de design e extract para transformar padrões recorrentes de UI em componentes e tokens reutilizáveis. O repositório também traz referências de design específicas para cor, espaçamento, tipografia, motion, interação, comportamento responsivo e UX writing, o que é mais acionável do que um único prompt longo.

O que os usuários querem saber antes de adotar

O trabalho real que o impeccable resolve é reduzir a adivinhação: o que desenhar primeiro, quais referências carregar, quando parar de abstrair e como evitar hábitos comuns de UI fraca gerada por IA. Em troca, o impeccable funciona melhor quando você fornece contexto do projeto, padrões existentes e um objetivo de feature bem concreto. Ele não substitui magicamente direção de marca nem decisões de produto.

Como usar a skill impeccable

Contexto de instalação e checagens na primeira execução

Um caminho comum de instalação é:
npx skills add pbakaus/impeccable --skill impeccable

Depois de instalar, abra primeiro .claude/skills/impeccable/SKILL.md. Este repositório inclui uma etapa única de manutenção após atualizações:
node .claude/skills/impeccable/scripts/cleanup-deprecated.mjs

Em seguida, leia estes arquivos nesta ordem se quiser se orientar rapidamente:

1. SKILL.md
2. reference/craft.md
3. reference/extract.md
4. reference/spatial-design.md
5. reference/typography.md

Adicione reference/color-and-contrast.md, reference/interaction-design.md, reference/motion-design.md, reference/responsive-design.md e reference/ux-writing.md só quando a tarefa realmente exigir.

Escolha o modo certo no impeccable: craft, teach ou extract

Use impeccable craft quando precisar construir uma feature ou página. Esta costuma ser a melhor opção padrão para trabalhos novos de UI porque impõe uma ordem útil: definir o design, carregar as referências relevantes e depois construir estrutura, layout, tipografia, cor e refinamento.

Use impeccable teach quando o time ou o agente precisar de contexto de design antes da implementação. Use impeccable extract quando seu repositório já tiver componentes repetidos, valores hard-coded ou variantes inconsistentes, e você quiser consolidar isso em um design system.

Dê ao impeccable os insumos de que ele realmente precisa

O uso do impeccable melhora muito quando o seu prompt inclui:

• o objetivo da feature
• os usuários-alvo
• screenshots ou caminhos de componentes existentes
• restrições de marca
• framework e stack de estilos
• expectativas de responsividade
• requisitos de acessibilidade
• se você quer uma UI totalmente nova ou extração de sistema

Prompt fraco:
“Make a dashboard look modern.”

Prompt forte:
“Use impeccable craft to design and implement a billing dashboard in React + Tailwind. Match our existing admin shell. Primary tasks: invoice status, failed payment recovery, recent usage. Brand should feel calm and premium, not playful. Mobile and desktop required. Keep keyboard focus visible and avoid card-overload. Reuse patterns from src/components/admin/*.”

Esse nível de insumo ajuda a skill a escolher as referências certas e a evitar estéticas padrão.

Fluxo prático para obter um resultado melhor

Um guia confiável de impeccable é:

1. Comece com craft e confirme o briefing de design antes de codar.
2. Carregue apenas as referências relevantes para o briefing.
3. Construa primeiro o estado principal com semântica adequada.
4. Ajuste espaçamento e hierarquia antes da decoração.
5. Desenhe explicitamente os estados interativos: hover, focus, active, disabled, loading, error, success.
6. Se padrões repetidos aparecerem 3+ vezes, mude para extract.

Uma dica prática das referências: se o trabalho com cor for importante, use OKLCH em vez de gerar paletas HSL no automático. Se responsividade for importante, use breakpoints orientados pelo conteúdo e media queries de pointer/hover, e não apenas suposições baseadas na largura da tela.

FAQ da skill impeccable

O impeccable é melhor do que um prompt normal de UI?

Na maioria dos casos, sim, se qualidade importa. Um prompt simples pode gerar markup utilizável, mas o impeccable acrescenta regras de decisão e padrões respaldados por referências para espaçamento, tipografia, estados de interação, motion e extração de tokens. Isso o torna mais confiável para trabalhos sensíveis a design, não apenas mais rápido para gerar código.

O impeccable é bom para iniciantes?

Sim, com ressalvas. Iniciantes podem usar a skill impeccable como um fluxo guiado, especialmente craft e teach. Mas ela pressupõe que você consiga inspecionar o repositório, avaliar aderência e responder a perguntas de esclarecimento. Se você não consegue fornecer padrões existentes nem um briefing claro, o resultado ainda pode ficar genérico.

Quando não devo usar o impeccable?

Evite o impeccable para mocks descartáveis, placeholders ultrassimples de landing page ou tarefas em que a qualidade visual do design não seja importante. Ele também é uma escolha ruim quando não existe nenhuma direção de produto e você espera que a skill invente uma estratégia de marca do zero.

O impeccable se encaixa em design systems existentes?

Sim, especialmente por meio de extract. Na prática, a skill é até mais útil em repositórios reais do que em demos vazias, porque consegue identificar componentes repetidos, valores hard-coded e variantes inconsistentes. Se ainda não existir um design system, a orientação do repositório sugere esclarecer a estrutura preferida antes de inventar uma.

Como melhorar a skill impeccable

Comece com um briefing melhor, não mais longo

A forma mais rápida de melhorar a saída do impeccable é dar restrições mais nítidas. Inclua público, critérios de sucesso, tom, referências de UI existentes e o que deve permanecer inalterado. “Premium, mas acessível para gestores financeiros” é melhor do que “clean and modern”. Boas restrições reduzem padrões genéricos e sem personalidade.

Carregue as referências certas, não todas

Um modo de falha comum é sobrecarregar a execução com todos os documentos. Para usar o impeccable bem, carregue o mínimo de referências úteis: spatial-design.md e typography.md quase sempre, e depois adicione cor, motion, interação, responsivo ou UX writing apenas quando a feature pedir isso. Assim, as decisões ficam mais focadas.

Fique atento aos padrões típicos de saída fraca

Se o resultado ainda parecer mediano, verifique estes problemas:

• escolhas de paleta padrão em azul/laranja
• layouts pesados em cards com hierarquia fraca
• estados de hover sem estilos de foco de teclado
• texto placeholder usado como label
• extração prematura antes de um padrão se repetir
• suposições desktop-first em dispositivos touch

Essas são justamente as áreas que as referências do impeccable tentam corrigir.

Itere após o primeiro rascunho com feedback direcionado

Não peça “make it better”. Peça melhorias específicas ligadas à orientação do repositório, como:

• “Increase hierarchy using spacing and weight, not more cards.”
• “Retune the palette in OKLCH with tinted neutrals.”
• “Add all interactive states for form controls.”
• “Extract tokens only where repeated 3+ times.”

Esse tipo de continuação faz o impeccable valer mais do que um gerador de tentativa única e é o melhor caminho para chegar a um resultado de UI Design pronto para produção.