cool-style

O que cool-style faz?

Destilado a partir de uma análise minuciosa de centenas de sites independentes — sites pessoais, net art, tipografias, arquivos, estúdios, pequenas ferramentas, diários — salvos por pessoas que colecionam os melhores cantos da web (references/method.md). Nada aqui é um relatório de tendências. É o que esses sites realmente fazem, contado.

Um template responde "como é a aparência de um site?" Cada um desses sites responde "sobre o que é este site?" — e então deixa a resposta decidir o layout, a tipografia, a cor e a única coisa que se move.

O cânon vai do tosco ao preciso — um santuário no Neocities com fundo de GIF ladrilhado e uma tipografia projetada ao pixel estão ambos incluídos. Ambos são interessantes. O que falta é o meio: o site que poderia ser sobre qualquer coisa.

Antes de começar

1. Encontre a ideia primeiro (próxima seção). Nenhum layout, nenhuma paleta, nenhuma fonte até que você possa dizer a ideia em uma frase.
2. Escolha um arquétipo na tabela abaixo e, para uma construção nova, comece pelo seu inicializador: node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetype> <dir>.
3. Veja exemplos reais. node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag ou palavra> imprime sites estudados que fazem um movimento, melhores primeiro (--tags lista o vocabulário; --random 5 para um estímulo).
4. Se outro estilo de casa estiver em vigor (ex.: magnus-style), ele vence em tokens — faces, cores, temporizações. Use este skill para a ideia, a estrutura e os movimentos.

Encontre a ideia

Pergunte (a si mesmo ou à pessoa — uma pergunta de cada vez):

1. O que é isso, em uma frase simples? Não o que serve para. "Um registro de cada música que um microfone num poste ouviu." "Notas de uma revista movida a energia solar."
2. Com o que se parece? O objeto, lugar ou sistema que já lembra: um calendário, uma loja com horário, uma planilha, um jardim, um rádio, uma página de livro, um anel, uma mesa. Isso se torna o recipiente (Lei 1).
3. O que é verdade sobre ele que um template esconderia? Seu peso, sua idade, seu horário, seus dados, o clima onde é feito, o número de coisas nele, quem o fez.
4. Qual é a única coisa que se move ou muda? Escolha uma. Tempo, uma leitura, o ponteiro do visitante, o acaso, outros visitantes.
5. O que faria alguém enviar o link para um amigo? Esse é o movimento principal. Tudo o mais fica mais silencioso para que ele possa ser visto.

Escreva as respostas no topo do projeto (um comentário em index.html é suficiente). Se uma resposta for "nada", o site não está pronto para design — precisa de conteúdo.

As doze leis

1. Faça a forma representar o assunto. Os sites mais fortes usam a própria forma do assunto como recipiente. Um ensaio sobre ondas rola para sempre, cada parágrafo subindo e voltando (#214). Um guia para conjuntos de dados de aprendizado de máquina é organizado como uma planilha (#481). Uma história das interfaces fica dentro de uma janela Mac de 1984 reconstruída (#501). Um registro musical de vigilância é um LCD de duas cores (#76). O arquivo de uma tira cômica diária é um calendário anual (#21). Teste: este layout poderia conter um assunto diferente inalterado? Então é um template.
2. Uma ideia, levada a todas as camadas. A metáfora atinge a navegação, os cabeçalhos, as imagens, até o peso da página. Our Networks (#232) imprime o mapa do site como um comando tree, desenha o laptop em ASCII e pesa 39 KB. Frequentemente a ideia toda é um mecanismo barato, totalmente comprometido: 36 tiles CSS que escondem um poema (#228), espaçamento entre letras orientado por um dia de dados de vento (#669).
3. Um site é um lugar, não um folheto. Quartos, mesas, cidades, jardins, estantes, cafés com horário de funcionamento (#828), rádios, quiosques. A navegação vira mobília: uma placa (#197), um anel (#203), uma estante (#652), uma cebola que se descasca (#789). Até o domínio é um nome de lugar — cerca de 1 em cada 6 usa um TLD expressivo (.world .garden .cafe .town .computer .zone).
4. Use uma tinta. Uma cor sobre um fundo, e o trabalho fornece todas as outras cores. Um quarto dos sites usa três cores hexadecimais ou menos; depois dos cinzas, as cores mais usadas em todo o cânon são o puro #ffff00, #ff0000 e #0000ff. Tire o acento do assunto — o vermelho da capa do livro sendo arquivado (#3). → colour.md
5. Tipografia com um motivo — ou a do navegador, de propósito. 69% hospedam uma fonte própria (Neue Haas, ABC Diatype, Monument Grotesk, Space Mono lideram); 23% usam apenas fontes do sistema e 9% não declaram nenhuma — Times e azul padrão como postura. Monoespaçada aparece em 55% das pilhas. Fontes de template estão quase ausentes (Inter ou Geist em ~4%). As faces mais declaradas pelos exemplares são Arial, Times e Helvetica. Escala é contraste: metade vai até 11px ou menos, um quarto vai acima de 100px, um terço usa quatro tamanhos ou menos. → type.md
6. O índice é a página inicial. Listas, tabelas, calendários e contagens superam heróis e cards. Regras (linha fina, pontilhada) em vez de caixas; cada item nos mesmos lugares; metadados reais como colunas; contagens ao lado de categorias; timestamps; pesos de arquivo. Um escritório de arquitetura como planilha (#535), dados de emissões com uma faixa de céu por linha (#522), pontuações como texto em caixa desenhada (#288).
7. Diga em uma frase. A interface escrita como prosa: a descrição é a navegação (#316, #282, #530), uma biografia com logotipos no lugar de nomes (#856), um rébus onde desenhos substituem substantivos (#547), uma página inteira como uma frase com o formulário de inscrição como sua última oração (#783). A voz é específica, humana, geralmente em minúsculas, às vezes engraçada, sempre honesta — um horário de fechamento rasurado (#828), um título que avisa que a página é lenta (#504). → voice.md
8. Deixe uma coisa viva. A maioria dos sites estudados (86%) faz alguma coisa — mas geralmente uma coisa só: a hora colore o fundo, o clima define um gradiente (#832), os quadros de uma webcam são pontuados como um instrumento (#12), letras derivam com o vento (#669), visitantes aparecem como animais anônimos (#95), o site fecha à noite. Um relógio precisa de um motivo (hora de quem? até quando?). → recipes.md
9. Padrões e objetos emprestados são material. Controles de formulário nativos como estrofes de um poema (#123), um frameset como layout (#616), um portal de ISP dos anos 2000 para um álbum (#631), um player de mídia de 2005 para uma banda (#116), Clippy como banner de cookies (#179). Citar um gênero dá ao site uma voz de graça. A aspereza parece intencional apenas quando a ideia é afiada.
10. Recompense os curiosos. Algo para o ponteiro, para o paciente e para a multidão que vê o código-fonte: revelações ao passar o mouse, palavras que desaparecem até tocá-las (#360), um filtro de piscina de bolinhas (#479), uma lente que você arrasta (#254), notas nos comentários HTML (#283), uma página diferente a cada visita. Nunca esconda o essencial ali.
11. Pequeno, estático, vinculado — feito para durar. Cerca de um terço dos sites salvos já estão mortos, redesenhados ou murados. Páginas simples autocontidas (frequentemente no GitHub Pages) sobreviveram; shells JavaScript, hosts aposentados e domínios expirados morreram primeiro. O peso mediano de primeira parte é ~250 KB e um quarto está abaixo de 50 KB. Crie links: um quarto carrega dez ou mais links externos na primeira página — amigos, webrings, diretórios, fontes.
12. Interessante e gentil. Os pontos cegos do cânon: apenas 17% honram movimento reduzido, a cobertura mediana de texto alternativo é 17%, 56% removem outlines de foco, 18% bloqueiam zoom, metade define texto a 11px ou menos. Faça cada movimento com sua barreira de segurança (never.md, recipes.md). Interessante que exclui pessoas é apenas barulho.

Escolha um arquétipo

O recipiente é a primeira decisão. Descrições completas, movimentos definidores, exemplares e armadilhas: references/archetypes.md.

arquétipo	o site é…	para	inicializador	veja
caderno	um caderno mantido em público	ensaios, diários, registros de pesquisa, zines	notebook	#34 #124 #214 #362
índice	um catálogo, um livro-razão, um banco de dados	portfólios, arquivos, coleções	index	#3 #522 #535 #288
frase	uma frase em que se pode clicar	estúdios, biografias, manifestos, pequenas organizações	sentence	#316 #282 #530 #783 #856
pôster	uma tela, uma palavra, uma tinta	estúdios, gravadoras, eventos, lançamentos	poster	#7 #776 #201 #599
sala	um lugar com coisas dentro	sites pessoais, lojas, coleções	room	#9 #277 #92 #793
almanaque	um calendário, um relógio, uma estação	diários, cronogramas, trabalhos datados	almanac	#21 #128 #243 #718
atlas	um mapa, um jardim, uma rede	páginas de links, diretórios, pesquisa	atlas	#81 #139 #578 #284
instrumento	algo que se toca	espécimes tipográficos, brinquedos, ferramentas, geradores	poster + recipes	#254 #615 #622 #353
transmissão	um feed ao vivo do mundo	webcams, rádios, dados, sensores	almanac + recipes	#12 #76 #51 #832
fantasia	uma interface emprestada de outra época	música, arquivos, paródia, lançamentos	—	#501 #116 #631 #61
exposição	uma edição, uma mostra, um objeto para virar	periódicos, mostras de graduação, catálogos	index	#263 #838 #677 #865
espécime	a tipografia é a interface	fundições, lettering, projetos tipográficos	poster	#776 #195 #254 #352
comum	feito por seus visitantes	livros de visitas, antologias, comunidades	notebook	#654 #423 #92 #249
santuário	uma carta de amor à velha web	sites de fãs, colagens, páginas pessoais	room	#586 #265 #441 #751

Arquétipos se combinam (um almanaque que também é um comum), mas um lidera.

Faça movimentos, não decoração

Um movimento é uma decisão que você pode nomear ("a navegação é a frase", "o fundo segue a hora"). Decoração é qualquer coisa que você não pode nomear. references/moves.md lista mais de 70 movimentos por dimensão — ideia, estrutura, tipografia, cor, imagem, interação, tempo, voz, detalhes — cada um com os sites que o fazem.

• Um movimento principal, levado até o fim (Lei 2). Dois ou três movimentos de apoio, mais silenciosos. Todo o resto simples. Os sites estudados raramente empilham mais.
• Prefira movimentos que vêm do conteúdo (o clima onde você está, a contagem das coisas, a forma do assunto) em vez de movimentos que vêm de uma biblioteca.
• Um movimento que funcionaria identicamente em qualquer site é decoração.

Fluxo de trabalho

1. Ideia. Responda às cinco perguntas. Escreva a frase única no topo de index.html.
2. Recipiente. Escolha o arquétipo; scripts/new.mjs se começar do zero. Construa a estrutura em HTML puro primeiro — os inicializadores mostram o nível de marcação (listas reais, tabelas, <time>, <details>).
3. Conteúdo antes do estilo. Coloque as palavras reais, imagens reais (texto alternativo escrito agora), contagens reais e datas. Sites interessantes são 80% conteúdo.
4. Tipografia e tinta. Escolha uma face com um motivo (ou a do sistema, de propósito) e uma tinta sobre um fundo. Quatro tamanhos ou menos, um deles muito grande se o arquétipo quiser. type.md, colour.md.
5. O movimento principal. Construa-o adequadamente a partir de recipes.md — com o caminho do teclado, o caminho do toque e a variante de movimento reduzido.
6. Detalhes. Favicon, título, cor de seleção, um colofão, última atualização, links externos, um 404 que permanece no personagem. moves.md § detalhes.
7. Auditoria. node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <dir> — corrija todos os erros; trate avisos como perguntas. No CI: a GitHub Action cool-check (README).
8. Olhe para ele. Desktop, um telefone de 390px, apenas teclado, movimento reduzido ativado, rede lenta. Então a pergunta que importa: alguém enviaria este link para um amigo? O que diriam que é?

Lista de verificação

• A ideia cabe em uma frase e o layout não poderia conter um assunto diferente inalterado.
• Um movimento principal, feito completamente; movimentos de apoio mais silenciosos; nenhuma decoração que você não pode nomear.
• Uma tinta sobre um fundo (ou uma paleta que o conteúdo fornece); cor significa algo.
• Tipografia: uma face com um motivo ou a do sistema de propósito; ≤ 4 tamanhos; texto pequeno ainda com tinta total.
• As palavras são reais, específicas e em voz humana; nenhum verbo de folheto, nenhum título de andaime.
• Algo é verdadeiro e vivo (tempo, dados, contagem, lugar) — ou a imobilidade é intencional.
• Links externos. Um favicon próprio. Um colofão ou um "sobre" que parece de uma pessoa.
• Teclado: cada movimento acessível; foco visível. Toque: nada depende de hover. Movimento reduzido: uma variante estática existe.
• Cada imagem tem texto alternativo (ou alt="" se for decoração). Zoom funciona. lang está definido.
• Leve: HTML+CSS+JS de primeira parte abaixo de ~250 KB, a menos que a ideia exija mais; funciona (ou diz algo) sem JavaScript.
• audit.mjs passa sem erros.

Referências

arquivo	leia quando
references/canon.md	quiser a evidência: o que os sites têm em comum, em números
references/archetypes.md	escolher ou desenvolver o recipiente
references/moves.md	escolher o movimento principal e os de apoio
references/recipes.md	construir um movimento — 30 trechos prontos para copiar com suas barreiras de segurança
references/type.md	escolher faces, tamanhos e o trabalho da tipografia
references/colour.md	escolher a tinta, o fundo e quando a cor se move
references/voice.md	escrever títulos, navegação, biografias, páginas sobre, colofões, erros
references/never.md	revisar: indícios de template e os maus hábitos do próprio cânon
references/catalogue.md	navegar pelos sites mais fortes por arquétipo
references/method.md	de onde isso vem e o quão certo ter certeza
data/sites.json	notas de cada site (consulte com scripts/examples.mjs)