O que ui faz?
Uma skill para construir e reformular interfaces. Ela mescla as skills de Jakub Krehel, make-interfaces-feel-better, Impeccable e as referências próprias de Molveau (incluindo um guia de gosto destilado do trabalho de Emil Kowalski) em um único manual.
Comece aqui
Leia references/playbook.md primeiro, começando pelo bloco "Faça isto primeiro"; abra os arquivos de terceiros e as referências do Molveau apenas para aprofundamento ou exemplos práticos. O playbook é a doutrina mesclada (antes de começar, modelagem, layout, tipografia, cor, modo escuro, superfícies, ícones, componentes e estados, feedback e movimento, responsivo e nativo, revisões, passes de refinamento, desempenho, mockup-primeiro, prompts) com tags de origem e as decisões tomadas onde as fontes discordam. A tabela abaixo é o índice de profundidade.
Portão de direção
Faça isto antes de qualquer código para uma nova página, tela ou reformulação, mesmo quando o pedido for de uma linha. O resto desta skill remove erros; ela não dá caráter a uma tela. Se ignorado, o resultado é a página mediana que todo modelo faz: correta nos detalhes, mas sem dono.
- Cinco linhas. Produto: o que faz, para quem. Caráter: duas ou três palavras concretas (
calmo, exato, um pouco acolhedor), nunca limpo, moderno, elegante, minimalista ou premium. Mundo: o lugar ou material ao qual o produto pertence; ele tinge os neutros e define o acento. Momentos: o único ou dois lugares que recebem cor rica e detalhe. Assinatura: um pequeno detalhe que só este produto tem, usado consistentemente. Um momento é desenhado com cuidado, não apenas limpo: um gráfico redesenhado para o que deve dizer (linhas suaves, uma comparação espelhada, uma escala real), ou o próprio objeto do produto renderizado com peso e luz. - Inventário, depois a ideia. Liste de 8 a 12 coisas que nenhum concorrente compartilha (nome, rua, números no briefing, materiais, ferramentas, rituais, documentos que o ofício imprime). Escreva: "Nesta tela, [um item] se torna [o dispositivo]". Esse dispositivo é o momento.
- Recuse os padrões de segunda ordem a menos que a marca já os possua. Eles são o que um modelo alcança quando os óbvios são banidos:
- um fundo creme, pedra ou off-white quente com um acento laranja queimado, terracota, sálvia ou floresta, com ou sem título em serifa (o visual "papel e tinta" é o novo padrão, não uma direção);
- Fraunces, Instrument Serif, Playfair ou Georgia como face de título por reflexo; system-ui como a única face;
- Inter ou Geist sobre branco com um acento índigo ou azul;
- herói, três funcionalidades, depoimentos, chamada para ação, nessa ordem, sem argumento para isso; em uma tela de aplicativo, quatro cartões de estatísticas iguais sobre um gráfico de barras;
- uma sobrancelha centralizada, título e dois botões como a tela inteira inicial.
- Teste de troca. Substitua o nome e o ofício pelos de um concorrente. Se a tela ainda se encaixar, mude a afirmação, o momento e a assinatura, e teste novamente.
- Mostre e espere. Mostre as cinco linhas e a ideia, e espere pelo proprietário. Se não puder perguntar (o usuário disse para apenas construir, ou você executa sem uma pessoa), escreva-as como um comentário no topo do arquivo principal e construa exatamente isso.
Profundidade: playbook anti-slop §2 (direção) e §12 (telas de aplicativo); a skill design-inspiration-index para referências reais.
Sempre ativo
- Projeto primeiro. Seus tokens, componentes,
DESIGN.mde telas irmãs decidem antes de qualquer padrão aqui. - Uma autoridade de design por vez. Termine um passe antes de sobrepor outro.
- Um ponto focal e uma ação primária por tela, cada estado projetado (playbook §3, §9).
- Mockup antes da implementação para telas novas ou reformuladas quando o projeto trabalha mockup-primeiro, padrão da casa de Molveau (
references/mockup-first.md); caso contrário, o processo de revisão do próprio projeto. - Antes de considerar a UI pronta: a skill
anti-slope seu detector, depois verificação de tipo, lint e testes.
Vizinhas: a skill anti-slop é dona dos indicadores de código vibe e passes de des-AI; motion é dona de animação além de feedback de UI; ux é dona de texto, formulários, foco, alvos, profundidade de acessibilidade, erros, casos extremos e integração. Profundidade de revisão: design-grill é a auditoria profunda (sete lentes, relatório classificado), as linhas de crítica abaixo são o passe único mais leve, e anti-slop é o passe de aparência de IA.
O que ler para cada tarefa
Todos os caminhos são relativos à pasta desta skill.
| Tarefa | Leia |
|---|---|
| As regras mescladas, valores e chamadas de conflito | references/playbook.md |
| Tela nova ou reformulada que precisa de feedback (não um pequeno ajuste) | references/mockup-first.md |
| Padrões de gosto quando um projeto ainda não tem tokens | references/taste.md |
| Layout, agrupamento, alinhamento, espaçamento | references/vendor/jakub/better-layout.md, depois references/vendor/impeccable/layout.md |
| Tipografia: fontes, escala, comprimento de linha, OpenType | references/vendor/jakub/better-typography.md e references/vendor/impeccable/typeset.md |
| Cor: paleta, contraste, modo escuro, tokens | references/vendor/jakub/better-colors.md, mais references/vendor/impeccable/colorize.md para adicionar cor |
| Polimento final: raios, sombras, alinhamento óptico, estados de ícone | references/vendor/feel/make-interfaces-feel-better.md e references/vendor/impeccable/polish.md; references/vendor/jakub/better-ui.md para valores exatos |
Revisão classificada de tela inteira (acessibilidade e escrita estão na skill ux) | references/vendor/jakub/better-interface.md, o guarda-chuva |
| Revisar um branch ou PR para regressões de UI | references/vendor/jakub/interface-review.md |
| Auditoria de design completa com múltiplas lentes de um arquivo, componente ou rota (pesado: vários agentes) | a skill design-grill |
| Referências visuais ou inspiração para um herói, CTA, navbar, movimento, ícones | a skill design-inspiration-index |
| Crítica ou revisão de design de uma tela | references/vendor/impeccable/critique.md (heurísticas, carga cognitiva, personas); análise rápida: prompt 4 em references/prompts.md |
Auditoria: desempenho, tematização, responsivo (para acessibilidade, use a skill ux) | references/vendor/impeccable/audit.md, references/vendor/impeccable/optimize.md |
| Muito carregado ou pesado | references/vendor/impeccable/distill.md, references/vendor/impeccable/quieter.md |
| Muito insosso ou tímido | references/vendor/impeccable/bolder.md, references/vendor/impeccable/colorize.md, references/vendor/impeccable/delight.md |
| Efeitos tecnicamente ambiciosos | references/vendor/impeccable/overdrive.md |
| Planejar um novo design do zero | references/vendor/impeccable/shape.md; references/vendor/impeccable/new-work.md e os arquivos de modo (references/vendor/impeccable/mode-operate.md, mode-persuade.md, mode-read.md) para uma nova identidade visual |
| Profundidade de aplicativo, dashboard e configurações | references/vendor/impeccable/operate.md |
| Telas pequenas, toque, outras plataformas | references/vendor/impeccable/adapt.md; nativo: references/vendor/impeccable/ios.md, references/vendor/impeccable/android.md, references/vendor/impeccable/adapt.native.md |
Escrever ou atualizar DESIGN.md, extrair tokens e componentes | references/vendor/impeccable/document.md, references/vendor/impeccable/extract.md |
| Receitas de movimento de feedback (pressionar, entrar e sair, trocas de ícone, troca de tema) | references/vendor/jakub/better-ui/animations.md, references/vendor/jakub/better-ui/enter-exit.md, references/vendor/jakub/better-ui/icon-transitions.md; números de Emil em references/animation.md (fluxo completo: a skill motion). Algumas receitas lá são mais longas (~500ms um sheet, 400ms do Sonner): na UI o playbook limita overlays a 300ms (§10) |
| Checklist de componente interativo pronto (toasts, gavetas, menus) | references/components.md |
| Site de marketing público que deve ser citado por LLMs | references/discoverability.md |
| Prompts que forçam gosto em UI gerada por IA | references/prompts.md |
| A filosofia por trás das regras | references/quotes.md |
| UI parece feita por vibração ou genérica | a skill anti-slop |
| Texto, erros, estados vazios, profundidade de acessibilidade | a skill ux |
O ponto de entrada do Impeccable references/vendor/impeccable/impeccable.md descreve um conjunto completo de comandos com seus próprios arquivos de configuração e scripts; leia-o quando quiser todo esse fluxo de trabalho em vez de um passe único. Seus comandos de clarificar, endurecer e integrar são vendidos uma vez, na skill ux.
Notas sobre os arquivos de terceiros
Os arquivos sob references/vendor/ são copiados sem modificação de seus autores, portanto links relativos e nomes de comandos dentro deles (comandos de barra do Impeccable, scripts/impeccable, modo ao vivo, portões de componentes) podem não existir nesta instalação. Siga a orientação; ignore o que aponta para ferramentas ausentes. Onde um arquivo de terceiro pede capturas de tela do navegador, subagentes ou passes visuais automatizados, siga a regra do próprio projeto (conflito 14 do playbook). Licenças e fontes exatas estão em cada pasta de terceiro (LICENSE, SOURCE.md).
Créditos e licenças
references/vendor/jakub/são as skills de Jakub Krehel (https://github.com/jakubkrehel/skills), MIT.references/vendor/feel/é make-interfaces-feel-better por Jakub Krehel (https://github.com/jakubkrehel/make-interfaces-feel-better), MIT.references/vendor/impeccable/é Impeccable por Paul Bakaus (https://github.com/pbakaus/impeccable), Apache-2.0, com seu LICENSE e NOTICE mantidos. Arquivos realocados, SKILL.md renomeado,scripts/não incluído; veja seuSOURCE.md. O playbook parafraseia e condensa a orientação do Impeccable; essa adaptação é uma alteração ao original.- O guia de gosto (
references/taste.md,animation.md,components.md,quotes.md) é destilado do trabalho de design-engenharia de Emil Kowalski (https://emilkowal.ski), marcado como[Molveau/Emil]no playbook. As palavras e a estrutura são de Molveau (MIT); as ideias e números são dele.references/quotes.mdatribui cada citação.references/animation.mdtambém se baseia em devouringdetails.com de Rauno Freiberg. references/discoverability.mdé destilado da pesquisa de Suganthan Mohanadasan (suganthan.com).references/playbook.md,references/prompts.mdereferences/mockup-first.mdsão próprios de Molveau (MIT), creditando cada fonte por tag.