social-motion-agent

Polimento de UI com Movimento

Problema: quadros codificados por um modelo compartilham marcas que os denunciam como gerados por máquina de imediato: gradiente indigo, quatro cartões iguais, um raio e uma sombra plana em toda parte, texto cinza minúsculo, emoji como ícones, uma barra colorida de um lado de um cartão. Esta skill os remove antes da renderização e mede o que pode ser medido.

A raiz do projeto está três níveis acima desta pasta. Fonte da doutrina: tools/repos/ux-ui-agent-skills (MIT, instantâneo em sources.lock.json). Leia apenas as partes que uma cena precisa.

Etapas

1. Copie templates/frame-tokens.css e templates/frame-starter.html para o diretório source/ do job. Altere apenas o bloco de marca no topo dos tokens (acento, superfícies; pegue as cores do briefing da marca de produção). Nunca codifique cores, tamanhos ou sombras diretamente em uma cena: use as variáveis.
2. Construa a cena a partir dos tokens. Movimento é uma função pura do tempo (window.seek(t), sem timers, sem Math.random), o contrato que vstudio e os renderizadores HTML esperam. Escolha os efeitos com a skill motion-effect-picker, não por tentativa e erro.
3. Avalie cada cena distinta em todos os formatos de saída, em um momento que mostre o layout finalizado:

python -S studio.py polish output/jobs/ID/source/scene.html --format 9:16 --seek 4.2 --shot output/jobs/ID/previews/scene-916.png

Ele falha em: texto fora do quadro, textos sobrepostos, texto abaixo do mínimo legível, emoji, e achados HIGH de slop_tells e taste_audit. Avisos (fora da área segura, hierarquia fraca, texto cortado) exigem uma decisão, não silêncio. 4. Abra a captura de tela e olhe para ela. As portas provam correção mensurável, não bom gosto. Em seguida, execute a lista de verificação adversarial abaixo e corrija o que um designer severo rejeitaria. 5. Só então renderize. Registre no arquivo HANDOFF.md do job quais cenas passaram em polish e em qual tempo de busca.

Regras internas para quadros de vídeo

1. Uma coisa lidera. Tipo de exibição com pelo menos 2,5x o tamanho do corpo. Quatro cartões iguais parecem gerados; dê a um item mais tamanho ou sua própria linha.
2. Escala tipográfica real (tokens): rótulo 2.1, corpo 2.8, destaque 3.6, título 6.4, exibição 9, hero 17 (cqmin, 1 cqmin = 1% do lado menor). Nada abaixo de 2% do lado menor. Números usam .num (tabular).
3. Ritmo de 4 px (--sp-*). Itens relacionados mais próximos que itens não relacionados.
4. Vários raios e sombras, cada um com uma função (chip, painel, cartão, pílula; --sh-1..3, duas camadas cada). Nunca um raio e uma sombra em todo lugar.
5. Bordas completas ou contraste de superfície. Nunca uma barra colorida de um lado de um cartão, alerta ou callout. Status = ícone mais palavras.
6. Cor por significado. Um acento. Perigo apenas para ações destrutivas ou negativas. Sem gradiente indigo-para-roxo codificado, sem texto ou fundo #000 puro (os tokens usam um preto quase preto matizado).
7. Sem emoji e sem pictogramas decorativos. Use ícones SVG inline (currentColor) ou palavras. Sem caracteres traço no texto em tela (regra do espaço de trabalho).
8. Contraste: corpo 4.5:1, texto grande 3:1. Uma legenda sobre filmagem precisa de um scrim ou pílula (.pill-caption), nunca texto simples.
9. Áreas seguras. 9:16 mantém os 17% superiores e 30% inferiores da largura livres de texto (IU da plataforma), laterais 5.6%. 16:9 5.6% em toda a volta. Os tokens definem --safe-*; a porta verifica isso.
10. Pausas. Um bloco de texto permanece em repouso pelo menos 0,5 s mais 0,3 s por palavra antes de sair. Entradas de 0,4 a 0,7 s, entrada rápida e pouso suave (ease-out). Movimente apenas transform e opacity.
11. Dados extremos: nomes longos, 0, 100%, muitos itens. Uma cena não deve quebrar com eles; teste um caso extremo.

Lista de verificação adversarial (antes de aprovar)

• Cubra o título: o olho ainda pousa em algum lugar, ou em nada?
• Há algum elemento que seja apenas decoração? Remova-o.
• Aperte os olhos: há dois pontos focais concorrentes?
• Algum número é mostrado sem sua unidade, fonte ou comparação?
• A cena pareceria a mesma com o nome de outra marca? Então não tem direção: pegue uma estética de tools/repos/ux-ui-agent-skills/taste/aesthetic-systems.md ou uma especificação em design-systems/library/<nome>/DESIGN.md (138 delas) e resolva-a no bloco de tokens.

Referências mais profundas (carregue sob demanda)

Necessidade	Arquivo em tools/repos/ux-ui-agent-skills/
Doutrina anti-sujeira, padrões proibidos	taste/design-taste.md
Gramática de movimento (entradas, escalonamento, hover)	taste/motion-choreography.md
Gráficos e telas de dados densos	components/data-viz.md, tokens/data-viz.json, examples/terminal/
Paletas, escalas OKLCH, modo escuro	.claude/rules/tokens-and-color.md
Cópia de IU, rótulos, estados vazios	content/voice-tone.md
Rubrica de revisão com pontuação	workflows/design-review.md, .claude/agents/design-critic.md
Um visual nomeado (Stripe, Linear, Apple…)	design-systems/library/ + taste/aesthetic-systems.md

Execute as portas upstream diretamente apenas quando necessário (a partir dessa pasta, DS_REQUIRE_BROWSER=1, Chrome do sistema): node scripts/slop_tells.mjs <arquivo>, node scripts/taste_audit.mjs <arquivo>, node scripts/measure_render.mjs <arquivo> (contraste WCAG na renderização real). Seus resultados são heurísticas: um sinal forte, não um veredito. Não edite o checkout upstream.