site-signature

Assinatura do site

Você está ajudando alguém a refazer seu site pessoal. O resultado almejado: uma primeira tela que não se vê em nenhum outro lugar, e uma página que fique correta em um pequeno telefone, um notebook, uma tela 21:9 e uma televisão.

Este skill descreve uma forma de decidir. Ele não fornece template, paleta ou cena pronta: tudo isso sai da pessoa e do seu conteúdo.

Como decidimos

Quatro escolhas, tomadas nesta ordem, cada uma validada pela pessoa antes da seguinte.

1. O conteúdo primeiro. Lemos o que o site já diz e identificamos o que é singular: uma frase, um número, uma trajetória, uma seção que outros sites não têm. A reforma dá mais espaço a isso.
2. Uma cena, tirada da sua vida. Um lugar, um objeto ou um fenômeno que a pessoa conhece de perto, transformado em uma atmosfera (uma hora do dia, uma luz, profundidade) em um único material gráfico.
3. Um dado verdadeiro na cena. Algo calculado ou medido, exato no momento em que se olha. É esse detalhe que faz voltar.
4. Faixas, nunca valores fixos. Cada tamanho tem um mínimo e um máximo, e a página reage à sua forma (estreita, larga, baixa).

Os números resolvem problemas. As capturas de tela, vistas pela pessoa, decidem.

Arquivos

• references/decouverte.md: identificar a pilha técnica, medir o site existente, registrar o que será mantido. A ser feito primeiro.
• references/scene.md: encontrar a cena com a pessoa e construí-la.
• references/responsive.md: as regras de layout e renderização em todas as telas.
• scripts/check-viewports.mjs: passa uma URL por dez tamanhos de tela, gera os defeitos mensuráveis e uma captura por tamanho.

Se o skill ai-patterns-audit estiver instalado, leia seu references/regles.md antes de escrever front-end e execute sua auditoria ao final.

Roteiro

1. Descobrir: pilha técnica, organização do repositório, comandos de desenvolvimento e deploy, funções existentes a preservar (references/decouverte.md).
2. Medir antes de tocar: execute o script no site online ou no servidor local e guarde as capturas como ponto de partida. Resuma para a pessoa o que já está bom e o que prende o site, com medições.
3. Encontrar a cena: faça as perguntas de references/scene.md, uma por mensagem. Em seguida, proponha três caminhos com duas frases cada. Nenhum código antes da escolha dela. Se o site já tem uma cena própria, mantenha-a: examine-a com base nas quatro condições e nas regras de desenho do mesmo arquivo, e corrija apenas o que falta (recorte em retrato, dado verdadeiro, pausa fora da tela).
4. Construir o início: a cena em tela cheia, o nome, duas frases, os links. O restante do conteúdo começa abaixo da primeira tela.
5. Revisar o resto da página, seção por seção, com references/responsive.md.
6. Verificar: script no servidor local, leitura das capturas uma a uma, depois navegação apenas com teclado, e em seguida movimento reduzido. Mostre as capturas, a pessoa decide visualmente.

O que não muda sem acordo

• Os textos da pessoa. Movemos e hierarquizamos; uma reescrita é solicitada.
• Os números: exatos, nunca arredondados ou inflados.
• O que já funciona: idiomas, temas claro e escuro, formulário, medição de audiência e seu consentimento, feed RSS, rotas de API, SEO.
• A pilha técnica em uso. Só mudamos se a pessoa pedir.

O que não podemos fazer

• Copiar a cena de outro site, mesmo que admirado. Um caminho que se pareça com uma referência conhecida é descartado.
• Um grid de cartas idênticas para uma lista de projetos ou artigos. Cada entrada deve ser lida como texto composto: o número ou ano em grande, o título, uma linha de consequência.
• Um rótulo em maiúsculas espaçadas acima de cada bloco. No máximo um por tela, quando traz informação.
• O mesmo efeito fade-up em cada seção, um hover que levanta, um brilho pulsante.
• Um gradiente ou brilho decorativo fora da cena.
• Uma dependência pesada para a cena. Um canvas 2D ou um shader curto bastam; uma biblioteca 3D apenas se o caminho escolhido for realmente volumétrico.
• Commitar, fazer push ou deploy sem que a pessoa tenha pedido.

Quando está pronto

• O script não indica nenhum overflow horizontal nos dez tamanhos.
• A 2560 e 3840 px de largura, a cena ocupa toda a tela e o texto mantém um comprimento de linha legível.
• A 375 px, o nome e a frase de chamada são legíveis sem rolagem, com eventuais barras abertas.
• Com prefers-reduced-motion, a cena mostra uma imagem fixa completa.
• Sem JavaScript, a primeira tela exibe o nome, a chamada e os links.
• Uma captura da cena sozinha, sem o texto, funciona como papel de parede.
• A pessoa viu as capturas e reconhece seu site.