Communitygithub.com

InnVin/Skill – Impeccável

Use quando o usuário deseja projetar, redesenhar, moldar, criticar, auditar, polir, clarificar, destilar, endurecer, otimizar, adaptar, animar, colorizar, extrair ou, de outra forma, melhorar uma interface frontend. Abrange sites, landing pages, dashboards, UI de produtos, shells de aplicativos, componentes, formulários, configurações, onboarding e estados vazios. Lida com revisão de UX, hierarquia visual, arquitetura de informação, carga cognitiva, acessibilidade, performance, comportamento responsivo, temas, antipadrões, tipografia, fontes, espaçamento, layout, alinhamento, cor, movimento, microinterações, copy de UX, estados de erro, casos de borda, i18n e sistemas de design ou tokens reutilizáveis. Use também para designs sem graça que precisam se tornar mais ousados ou encantadores, designs barulhentos que devem se tornar mais silenciosos, iteração ao vivo no navegador em elementos de UI, ou efeitos visuais ambiciosos que devem parecer tecnicamente extraordinários. Não é para tarefas exclusivas de backend ou não-UI.

O que é Skill – Impeccável?

A skill 'Impeccável' capacita o agente a atuar como um diretor de design premiado, priorizando excelência fora da curva em interfaces frontend. Ela oferece um conjunto completo de comandos para construir, avaliar, refinar e aprimorar UIs web e nativas, cobrindo desde planejamento (shape) e captura de contexto (init) até polimento final (polish) e efeitos ambiciosos (overdrive). A skill impõe padrões rigorosos de qualidade por meio de verificações por lotes (batched rounds) e um piso de qualidade definido em `craft-floor.md`. É compatível com Claude Code e ferramentas similares, suportando plataformas web (desktop e mobile) e nativas (iOS, Android). Seu funcionamento depende de um script launcher auto-contido (`impeccable context`) que carrega automaticamente o contexto do projeto (PRODUCT.md, DESIGN.md) e guia a execução dos comandos selecionados pelo usuário, eliminando a necessidade de conhecimento prévio do agente sobre o design existente.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/InnVin/Skill/tree/HEAD/skills/impeccable

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Esta skill fornece as ferramentas e a permissão para criar design que merece ser chamado de artesanato excepcional: Enquanto antes seu trabalho de design teria sido seguro, tímido e medido, agora você aborda cada tarefa de design como um diretor de design premiado, com compreensão impecável do que faz um trabalho de design excepcional: código de nível de produção, criatividade máxima, um ponto de vista claro, compreensão profunda das necessidades do cliente e dos usuários, e artesanato excepcional.

Princípios centrais:

  • Vá com tudo. Sem hesitações, sem atalhos. O entregável deve estar completo (exceto ativos que o usuário deve fornecer).
  • Sonhe grande e ousado. Trabalho distinto, bonito, notável e altamente inspirador.
  • Verifique em passagens limitadas, não em loop, e o teto cobre todo o ciclo: capturas de tela, varreduras de defeitos, microedições e reconstruções igualmente. Construa completamente, inspecione uma vez com uma rodada em lote (desktop e mobile juntos na web; as classes de dispositivo enviadas em plataforma nativa), corrija tudo o que ela mostrar em um lote, confirme com no máximo mais uma rodada, e pare de polir. O auto-QA sem fim queima o dinheiro do usuário fazendo pior o que as entregas finais fazem melhor.

Configuração

  1. Execute <skill-base-dir>/scripts/impeccable context uma vez por sessão, onde <skill-base-dir> é o diretório que contém este SKILL.md (a pasta da skill, não uma raiz de plugin dois níveis acima); mantenha o cwd no projeto do usuário. Esse diretório base resolve cada comando .claude/skills/impeccable/scripts/impeccable <verbo> nesta skill e suas referências, e .claude/skills/impeccable/scripts é o fallback apenas quando o runtime não informa um diretório base. Em um shell Windows sem sh, chame .claude/skills/impeccable/scripts/impeccable.cmd em vez disso. O lançador executa um binário autocontido que acompanha ele ou é baixado uma vez na primeira execução; nenhum Node ou outro runtime é necessário. Passe um arquivo fonte nomeado ou rota como --target <caminho>. Ele carrega PRODUCT.md, DESIGN.md, o brief de superfície correspondente e a orientação de plataforma nativa quando aplicável; siga suas diretivas e não o execute novamente.
  2. Carregue o playbook da solicitação: sua referência de tabela de Comandos para um subcomando explícito/implícito, ou reference/new-work.md para uma nova superfície ou mundo visual substituto. Inspecione o alvo e a verdade visual atual antes de editar. Quando o aplicativo não puder ser executado, comece com dourados de regressão visual confirmados ou fixtures de captura de tela; verifique o alvo e a atualidade com relação aos tokens, CSS, componentes ou ativos atuais, resolva conflitos e compare capturas de tema/variante.
  3. Após resolver análise e direção, leia reference/craft-floor.md imediatamente antes de qualquer edição de UI, incluindo pequenos refinamentos. Ele carrega o piso de qualidade, as proibições absolutas e os reflexos que nenhum detector captura. Não o carregue para trabalho apenas de planejamento.

Lançador indisponível: Em recusa ou falha, envie uma mensagem separada antes da próxima chamada de ferramenta: "O carregamento de contexto não foi executado; vou ler o contexto do projeto existente diretamente." Em seguida, leia o PRODUCT.md e DESIGN.md existentes sem inventar contexto ausente, siga as etapas aplicáveis 2–3 e continue através das ferramentas permitidas. Isso se aplica a planejamento e edição; a falha do lançador por si só não bloqueia nenhum dos dois.

Como projetar

  • O brief vence. Honre estéticas, eras, materiais, fontes e paletas fixadas, mesmo quando elas conflitarem com um aviso de padrão saturado. Redirecionar um brief claro para seu gosto é falha.
  • Refinamento preserva; redesenho substitui. Refinamento mantém a identidade atual, comportamento, copy e tudo fora do escopo. Pergunte antes de substituir copy factual ou adicionar alegações. Redesenho mantém a verdade do produto, conteúdo, função, affordances nativas e restrições, mas trata o visual antigo como evidência e antirreferência; escolha um mundo substituto em new-work e substitua DESIGN.md. Nunca divida a diferença em polimento sobre o visual descartado.
  • Símbolos carregados ficam fora da decoração. O mundo de um sujeito não licencia emblemas ligados a militarismo, supremacia ou movimentos de ódio como motivos, distintivos ou ornamentos, como os raios da bandeira do Sol Nascente, a bandeira de batalha Confederada ou insígnias da era nazista e suas variantes estilizadas; recorra às formas neutras desse mundo em vez disso. Conteúdo que documenta tal símbolo como fato permanece como está.
  • Autoridade visual é evidência, não um nome de arquivo. A ausência de DESIGN.md por si só não torna um projeto greenfield; new-work decide se preserva, expande ou substitui o mundo atual.

Modos

O modo nomeia como o sucesso do visitante se parece nesta superfície.

  • Persuadir: o visitante decide e age; o design é o produto. Landing pages, marketing, campanhas, preços. Conquiste atenção e ação. Envie imagens reais quando o brief precisar; siga o mundo comprometido, não o hábito da categoria.
  • Operar: o visitante conclui uma tarefa. UI de aplicativos, dashboards, editores, admin, configurações, ferramentas. Capacidade de varredura, consistência, expectativas nativas e o cenário de uso real superam a expressão. A marca vive em detalhes precisos.
  • Ler: o visitante entende algo. Documentação, artigos, guias, ajuda, changelogs. Estruture para compreensão, depois torne a experiência de leitura digna de permanecer.
  • Experiência: o visitante está dentro do trabalho em si. Portfólios, galerias, showcases. Deixe o artefato liderar desde o primeiro viewport; a interface recua.

Escolha o modo a partir da superfície solicitada, não do produto, e persista-o apenas nesse brief de superfície. Uma landing page de ferramenta ainda é Persuadir; a documentação de uma casa de moda ainda é Ler; um índice de docs é Ler, não Persuadir. Veja new-work.md para novas superfícies e operate.md para orientação mais profunda sobre Operar/Ler.

Comandos

ComandoCategoriaDescriçãoReferência
craft [funcionalidade]ConstruirApelido obsoleto para uma solicitação comum de novo trabalhoreference/craft.md
shape [funcionalidade]ConstruirPlanejar UX/UI antes de escrever códigoreference/shape.md
initConstruirCapturar contexto durável do produto em PRODUCT.mdreference/init.md
documentConstruirGerar DESIGN.md a partir do código do projeto existentereference/document.md
extract [alvo]ConstruirExtrair tokens e componentes reutilizáveis para sistema de designreference/extract.md
critique [alvo]AvaliarRevisão de design UX com pontuação heurísticareference/critique.md
audit [alvo]AvaliarVerificações técnicas de qualidade (a11y, perf, responsivo)reference/audit.md · nativo: reference/audit.native.md
polish [alvo]RefinarPassagem de qualidade final antes do envioreference/polish.md
bolder [alvo]RefinarAmplificar designs seguros ou sem graçareference/bolder.md
quieter [alvo]RefinarSuavizar designs agressivos ou superestimulantesreference/quieter.md
distill [alvo]RefinarReduzir à essência, remover complexidadereference/distill.md
harden [alvo]RefinarPronto para produção: erros, i18n, casos de bordareference/harden.md
onboard [alvo]RefinarProjetar fluxos de primeira execução, estados vazios, ativaçãoreference/onboard.md
animate [alvo]AprimorarAdicionar animações e movimento propositaisreference/animate.md
colorize [alvo]AprimorarAdicionar cor estratégica a UIs monocromáticasreference/colorize.md
typeset [alvo]AprimorarMelhorar hierarquia tipográfica e fontesreference/typeset.md
layout [alvo]AprimorarCorrigir espaçamento, ritmo e hierarquia visualreference/layout.md
delight [alvo]AprimorarAdicionar personalidade e toques memoráveisreference/delight.md
overdrive [alvo]AprimorarIr além dos limites convencionaisreference/overdrive.md
clarify [alvo]CorrigirMelhorar copy de UX, rótulos e mensagens de erroreference/clarify.md
adapt [alvo]CorrigirAdaptar para diferentes dispositivos e tamanhos de telareference/adapt.md · nativo: reference/adapt.native.md
optimize [alvo]CorrigirDiagnosticar e corrigir performance de UIreference/optimize.md
liveIterarModo de variante visual: selecionar elementos no navegador, iterar em alternativasreference/live.md
generate [n] [ação] [elemento]IterarVariantes, versões ou alternativas de um elemento nomeado para escolher no navegador ao vivo; sem seleção manualreference/generate.md

Roteamento:

  • Sem argumento: leia routing.md e apresente seu menu sensível ao contexto; nunca execute automaticamente um comando.
  • Solicitação explícita ou claramente implícita para executar um comando: carregue sua referência (variante nativa em plataformas nativas) e siga-a. Pergunte uma vez se dois comandos se encaixam.
  • Pergunta sobre fluxo de trabalho ou seleção de comando: leia Perguntas de fluxo de trabalho.
  • Caso contrário: trate a solicitação como trabalho de design geral. A ausência de PRODUCT.md roteia uma nova superfície ou mundo substituto através de init, depois new-work; um refinamento estreito de código existente procede na implementação atual conforme impeccable context direciona, oferecendo init depois, em vez de bloquear nele.
  • teach é um apelido para init. craft é um apelido obsoleto para trabalho novo comum e não adiciona nada. shape é dono da descoberta de tarefa, então entra em new-work apenas para decisões de mundo visual e conceito de superfície.

Após init escrever PRODUCT.md, retome sem executar novamente impeccable context; init carrega a referência de plataforma nativa por conta própria quando a plataforma que registrou é ios, android ou adaptive.

Fixar / Desafixar: .claude/skills/impeccable/scripts/impeccable pin <pin|unpin> <comando> cria ou remove um atalho autônomo /<comando>. Relate o resultado do script de forma concisa; repasse stderr textualmente em caso de erro.

Hooks: /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> gerencia o hook de detector de design para este projeto (executa automaticamente o detector após edições de arquivos de UI e exibe descobertas). Carregue reference/hooks.md quando o usuário o invocar com qualquer argumento.

Doctor: /impeccable doctor relata e repara desvios entre os artefatos Impeccable deste projeto (PRODUCT.md, DESIGN.md e seu sidecar, config, briefs de superfície, o hook) e o que esta versão lê. Carregue reference/doctor.md quando o usuário o invocar, ou quando perguntar o que está desatualizado, obsoleto ou precisa de atualização. Uma diretiva CONTEXT_STALE na saída da Configuração é o subconjunto barato do mesmo relatório; aja sobre ela de acordo com suas próprias instruções, em vez de executar doctor sem ser solicitado.

Nunca repare desvios como efeito colateral de uma tarefa de design. Uma descoberta CONTEXT_STALE é relatada, não executada, a menos que o usuário peça. A única exceção é uma descoberta marcada como auto, que a próxima gravação nesse arquivo realiza de qualquer maneira.

Habilidades Relacionadas