Skill Impeccable
Transforme pedidos vagos de melhoria visual em um fluxo pequeno, explícito e verificável. O usuário não precisa conhecer nomes de comandos: interprete a intenção, explique o foco escolhido em uma frase e encaminhe apenas as skills complementares necessárias.
Conversational Routing
Mapeie a linguagem natural para a menor intervenção útil:
- “Está com cara de IA”, “está genérico” ou “deixe mais marcante” → critique a direção, reduza padrões genéricos e use
skill-open-design-ui.
- “Deixe mais profissional”, “polir” ou “melhorar a tela” → preserve a função, refine hierarquia, tokens e estados com
skill-modern-ui-patterns e skill-open-design-ui.
- “Audite”, “está quebrando no celular”, “corrija UX” ou “veja acessibilidade” → use
skill-frontend-ux-guardrails e, se houver navegação ou interação relevante, skill-webapp-testing.
- “Tipografia”, “espaçamento”, “layout”, “cores”, “animação”, “texto confuso” ou “responsivo” → trate como intervenção focal; não faça redesign amplo sem autorização.
- “Criar uma tela nova” ou “começar do zero” → defina primeiro público, objetivo, produto versus marca e direção visual; só então implemente.
- “Site premium”, “site cinematográfico”, “storytelling no scroll” ou “redesign estrutural” → encaminhe a estratégia e a narrativa para
skill-premium-web-experience; intervenha aqui apenas no polimento focal.
Workflow
- Inspecione a superfície real, tokens existentes, componentes, rotas, estados e breakpoints antes de editar.
- Leia
PRODUCT.md e DESIGN.md se existirem. Se não existirem e o trabalho for amplo, proponha criá-los de forma compacta.
- Declare o alvo e a intervenção:
shape, critique, audit, polish, typeset, layout, colorize, animate, clarify, harden, adapt, distill, quieter ou bolder.
- Preserve rotas, comportamento, permissões, analytics, contratos e componentes compartilhados, salvo pedido explícito em contrário.
- Valide os estados afetados em pelo menos mobile e desktop; inclua loading, vazio, erro, foco, desabilitado e conteúdo longo quando aplicável.
- Verifique ortografia, acentuação, UTF-8, contraste, overflow, foco de teclado e ausência de padrões decorativos sem função.
Uso opcional da ferramenta externa
Se o projeto já tiver o CLI impeccable instalado, npx impeccable detect <alvo> pode ser usado como sinal determinístico adicional. Não instale dependências, não habilite hooks e não execute o modo live sem autorização explícita. A ferramenta externa não substitui inspeção visual, acessibilidade ou testes reais.
Guardrails
- Não force um redesign completo quando o pedido for uma correção localizada.
- Não introduza gradientes, glassmorphism, brilho, cards aninhados, ícones gigantes ou animações apenas para “embelezar”.
- Não troque a fonte, paleta ou biblioteca de ícones sem verificar tokens e convenções existentes.
- Não use screenshots ou caches como fonte de verdade sem distinguir artefatos temporários de arquivos do projeto.
Verification
Reporte o que foi alterado, quais viewports e estados foram verificados e qualquer risco visual restante. Para mudança de código, rode o gate disponível mais leve entre lint, typecheck, build, testes direcionados ou inspeção no navegador.
Related Skills
skill-frontend-ux-guardrails: qualidade, acessibilidade, responsividade e estados.skill-modern-ui-patterns: composição de interfaces SaaS e comportamento de componentes.skill-open-design-ui: direção visual, tokens e QA visual.skill-premium-web-experience: estratégia, narrativa e coordenação de experiências web premium.skill-webapp-testing: validação E2E e regressão visual quando o fluxo mudar.
1---2name: skill-impeccable3description: Orquestra melhorias de frontend inspiradas no Impeccable a partir de pedidos conversacionais de design, UX, acessibilidade, responsividade, tipografia, layout, cor, motion, clareza, hardening e polish.4---56# Skill Impeccable78Transforme pedidos vagos de melhoria visual em um fluxo pequeno, explícito e verificável. O usuário não precisa conhecer nomes de comandos: interprete a intenção, explique o foco escolhido em uma frase e encaminhe apenas as skills complementares necessárias.910## Conversational Routing1112Mapeie a linguagem natural para a menor intervenção útil:1314- “Está com cara de IA”, “está genérico” ou “deixe mais marcante” → critique a direção, reduza padrões genéricos e use `skill-open-design-ui`.15- “Deixe mais profissional”, “polir” ou “melhorar a tela” → preserve a função, refine hierarquia, tokens e estados com `skill-modern-ui-patterns` e `skill-open-design-ui`.16- “Audite”, “está quebrando no celular”, “corrija UX” ou “veja acessibilidade” → use `skill-frontend-ux-guardrails` e, se houver navegação ou interação relevante, `skill-webapp-testing`.17- “Tipografia”, “espaçamento”, “layout”, “cores”, “animação”, “texto confuso” ou “responsivo” → trate como intervenção focal; não faça redesign amplo sem autorização.18- “Criar uma tela nova” ou “começar do zero” → defina primeiro público, objetivo, produto versus marca e direção visual; só então implemente.19- “Site premium”, “site cinematográfico”, “storytelling no scroll” ou “redesign estrutural” → encaminhe a estratégia e a narrativa para `skill-premium-web-experience`; intervenha aqui apenas no polimento focal.2021## Workflow22231. Inspecione a superfície real, tokens existentes, componentes, rotas, estados e breakpoints antes de editar.242. Leia `PRODUCT.md` e `DESIGN.md` se existirem. Se não existirem e o trabalho for amplo, proponha criá-los de forma compacta.253. Declare o alvo e a intervenção: `shape`, `critique`, `audit`, `polish`, `typeset`, `layout`, `colorize`, `animate`, `clarify`, `harden`, `adapt`, `distill`, `quieter` ou `bolder`.264. Preserve rotas, comportamento, permissões, analytics, contratos e componentes compartilhados, salvo pedido explícito em contrário.275. Valide os estados afetados em pelo menos mobile e desktop; inclua loading, vazio, erro, foco, desabilitado e conteúdo longo quando aplicável.286. Verifique ortografia, acentuação, UTF-8, contraste, overflow, foco de teclado e ausência de padrões decorativos sem função.2930## Uso opcional da ferramenta externa3132Se o projeto já tiver o CLI `impeccable` instalado, `npx impeccable detect <alvo>` pode ser usado como sinal determinístico adicional. Não instale dependências, não habilite hooks e não execute o modo live sem autorização explícita. A ferramenta externa não substitui inspeção visual, acessibilidade ou testes reais.3334## Guardrails3536- Não force um redesign completo quando o pedido for uma correção localizada.37- Não introduza gradientes, glassmorphism, brilho, cards aninhados, ícones gigantes ou animações apenas para “embelezar”.38- Não troque a fonte, paleta ou biblioteca de ícones sem verificar tokens e convenções existentes.39- Não use screenshots ou caches como fonte de verdade sem distinguir artefatos temporários de arquivos do projeto.4041## Verification4243Reporte o que foi alterado, quais viewports e estados foram verificados e qualquer risco visual restante. Para mudança de código, rode o gate disponível mais leve entre lint, typecheck, build, testes direcionados ou inspeção no navegador.4445## Related Skills4647- `skill-frontend-ux-guardrails`: qualidade, acessibilidade, responsividade e estados.48- `skill-modern-ui-patterns`: composição de interfaces SaaS e comportamento de componentes.49- `skill-open-design-ui`: direção visual, tokens e QA visual.50- `skill-premium-web-experience`: estratégia, narrativa e coordenação de experiências web premium.51- `skill-webapp-testing`: validação E2E e regressão visual quando o fluxo mudar.
IAPro-Community