unvibe

O que unvibe faz?

Esta skill transforma uma interface que parece gerada em uma que parece projetada. Ela não inventa um novo estilo: aplica um catálogo de pequenos detalhes medidos que interfaces profissionais compartilham e as geradas perdem, mapeados para as próprias cores do projeto. Foi extraída de um passe de polimento real de dois dias em um SaaS de produção (references/case-study.md); toda regra existe porque quebrá-la foi notado.

Mapeie suas cores, mantenha os números. As proporções (raios, paddings, tamanhos, durações, pesos) carregam a qualidade. Cores são a única coisa que você adapta.

Antes de começar

1. Leia references/tells.md (o que faz uma UI parecer gerada, com a substituição para cada um).
2. Leia os tokens de design do projeto e qualquer documento de design. Preencha a tabela de tokens em references/porting.md.
3. Pergunte ao proprietário quais telas mais o incomodam e o que ele gosta. Mantenha o que ele gosta; nunca remova o que ele entende ("Adoro isto, é compreensível — só formate melhor" significa reestilizar, não cortar).
4. Anote a stack: React ou não, Tailwind 3/4 ou CSS puro, uma biblioteca de componentes existente ou não, uma biblioteca headless (React Aria) ou não.

O fluxo de trabalho

Fase 1 · Fundações (uma passada, app inteiro)

Tokens (assets/css/unvibe.css seção 1, mapeados), resquícios nativos na cor da marca, números tabulares, movimento reduzido, curvas de movimento. Depois palavras: remova labels em maiúsculas com tracking, cabeçalhos com emoji, glifos ✓ em badges, pontos de exclamação (catálogo §0–§1). Rápido, visível, risco zero.

Fase 2 · Controles (uma passada, app inteiro)

Botões com relevo e um primário por tela (§2) · campos preenchidos, uma altura por linha (§3) · menus reais em vez de selects nativos (§4; audite cada ponto de chamada primeiro, references/pitfalls.md) · switches para cada sim/não, switch cards para os importantes, radio cards para escolhas visíveis, tags (§6) · controles segmentados cuja pílula desliza (§5).

Fase 3 · Reconstrua as telas mais visíveis com base em referências

Escolha as 3–5 telas que as pessoas mais veem e reconstrua cada uma no template profissional mais próximo, medido (references/method.md): visão geral de analytics → tiles de KPI (§9); tela de IA → thread de agente (§12); atividade → feed (§11); configurações → linhas (§7); listas em massa → grid de dados (§10); jobs longos → diário (§13); datas → predefinições + dois meses (§15).

Fase 4 · A varredura

Cada tela restante recebe os mesmos detalhes: uma faixa de cabeçalho de tabela, um estilo de campo, um menu, um estilo de badge, callouts como zonas preenchidas, listas como blocos emoldurados, a mesma altura de filtro em cada página de lista (§8, §10, §16). Inconsistência entre telas irmãs é por si só um indicador.

Fase 5 · Prove

Capturas de antes/depois da produção vs branch com scripts/capture.mjs e uma página lado a lado com scripts/compare.mjs. Mantenha apenas pares cuja diferença é óbvia à primeira vista. Depois execute o passe completo de não-regressão em references/verification.md antes de enviar.

Regras de ouro

1. Seleção ≠ ação. Uma cor calma marca o que está escolhido; a cor forte da marca é para a única ação primária por tela.
2. Hover ≠ selecionado. Hover é neutro; selecionado é um tom pálido mais um check.
3. Três superfícies: tela, branco para o que flutua, um preenchimento rebaixado mais escuro para campos e tiles.
4. Sem maiúsculas com tracking, sem cabeçalhos com emoji, sem glifos de check, sem barras laterais coloridas.
5. Todo controle em uma linha compartilha altura e preenchimento.
6. Todo sim/não é um switch; checkboxes são para listas e consentimentos.
7. Uma configuração é uma linha: o que faz à esquerda, o controle à direita; linhas bloqueadas dizem por quê em cinza.
8. Números são 24/34 em tiles preenchidos com um chip de ícone e uma pílula de delta colorida por significado (um custo subindo é vermelho).
9. Uma faixa de cabeçalho de tabela em todo lugar, em frase, em um frame de 16px; linhas selecionadas recebem uma barra interna de 3px.
10. Respostas de IA são texto em uma thread, com o que foi lido e o tempo real decorrido; nunca passos falsos.
11. Movimento segue uma mudança de estado, nunca um hover; pressionar escala para .985; menus e modais chegam.
12. Nunca um número chutado, nunca um controle decorativo. Se faltar dados, diga "Não determinado"; se um campo não faz nada, remova-o.
13. Faça os irmãos na mesma passada.
14. Mostre apenas diferenças visíveis, e prove que não há regressão.

O que está nesta skill

Caminho	Use para
references/catalogue.md	cada detalhe com seus valores exatos (§0 fundações → §17 nunca-lista)
references/tells.md	os indicadores de UI gerada e suas substituições
references/method.md	redesign orientado a referência: escolha, meça, mapeie, reconstrua, prove
references/pitfalls.md	os bugs que o polimento traz (menus em modais, chaves duplicadas, nomes perdidos, camadas CSS, testes)
references/verification.md	antes/depois e o passe de não-regressão
references/porting.md	mapeamento de tokens, Tailwind 3/4, outros frameworks, ordem de retrofit, estágios escuros
references/case-study.md	o passe real de onde isso veio, com as palavras do proprietário
assets/css/unvibe.css	a folha de estilo pronta (CSS puro, classes uv-, tokens em :root)
assets/react/*	Select, NativeSelect (substituto para <select>), Switch/SwitchCard, SettingsRow, Accordion, NumberField, Segmented (pílula deslizante), RollingNumber, ThinkingIndicator, DateRangePicker, useFlipToFit
scripts/capture.mjs	capturas headless Chrome de elementos [data-shot], ou telas do app com uma verificação de console
scripts/compare.mjs	a página lado a lado de antes/depois
demo/index.html	todo padrão, antes e depois, em dados fictícios

Usando os assets

• CSS: copie assets/css/unvibe.css para o projeto, mapeie a seção 1 para os tokens do projeto, importe-o após os estilos base. Use as classes como estão ou traduza-as para os nomes de classe do próprio projeto (mantenha os valores).
• React: copie os componentes que você precisa; eles dependem de react-aria-components (e @internationalized/date para o intervalo de datas). Eles não carregam classes Tailwind.
• Biblioteca de componentes existente: reestilize suas partes com os números do catálogo em vez de substituí-la.

O que entregar

1. A página de antes/depois (apenas diferenças visíveis).
2. Uma lista curta do que mudou, por família, e as telas tocadas.
3. O relatório de não-regressão: o que foi auditado, quais interações foram testadas em um navegador, status do console, testes, build. Diga claramente o que não foi verificado.