Padrão de Página HTML

O que Padrão de Página HTML faz?

Pipeline canônico para HTML estático daqui em diante. Esta skill é o roteador. Não implemente uma página inteira apenas a partir deste arquivo.

Declare antes de escrever arquivos:

HTML-PAGE-STANDARD: 1.0
PASS: A-clone | B-tokenize | C-repair | layout-pack

Carregue apenas o proprietário do passe atual. Nunca permita que screenshot-to-html e studio-web co-escrevam o primeiro rascunho.

Proprietários dos passes

Passe	Proprietário	Saída
A-clone	apenas screenshot-to-html	source.png + clone.html
B-tokenize	esta skill + references/tokenize-contract.md	core.css + theme-default.css
C-repair	studio-web 1.1 web.repair	index.html a partir do clone, semântica, a11y, animação
layout-pack	esta skill + references/layout-packs.md	opcional layout-*.css

Se o usuário fornecer uma URL ativa ou HTML existente (sem captura de tela para clonar), pule o A. Tokenize se faltarem tokens, depois vá para o C.

Se a captura de tela for apenas um mood, não uma fac-símile, pule o A e use o web.build do studio-web. Avise antes de escrever.

Regras rígidas

1. Um passe por turno, a menos que o usuário os encadeie explicitamente.
2. Toda nova página entrega TUNE + um arquivo de tema, mesmo quando há apenas um visual.
3. TUNE é dono do ritmo. Tema é dono da aparência. Pacotes de layout são donos do arranjo. HTML é dono do texto.
4. Após o Passe B, nenhum font-size, padding, margin ou gap brutos quando existir um token.
5. Sem breakpoints de largura de viewport para layout de componentes. Regiões usam @container + cqi.
6. Temas não devem alterar o DOM. Pacotes de layout não devem alterar a paleta.
7. Não adicione um segundo tema ou um pacote de layout na página um, a menos que seja solicitado.
8. Trabalho com Wix Velo está fora do escopo.

Contrato de pastas

<page>/
  source.png
  clone.html
  core.css
  theme-default.css
  index.html

Opcional posteriormente: theme-<name>.css, layout-<name>.css. Atributos raiz: data-theme="default" e data-layout="default".

Camadas: @layer reset, core, theme, layout, page;

Mapa de carregamento

• Passe A — carregue screenshot-to-html. Pare quando clone.html corresponder à imagem.
• Passe B — carregue references/tokenize-contract.md. Copie assets/core.template.css e assets/theme-default.template.css, depois preencha os números a partir do clone. Não redesenhe.
• Passe C — carregue studio-web 1.1, lane web.repair, mais references/page-anatomy.md dessa skill. CONGELADO: contrato visual, números TUNE, paleta de tema a menos que nomeado. MUDANÇA: ids de região, semântica, controles reais, contraste, animação que não altere a imagem.
• Pacote de layout — carregue references/layout-packs.md apenas quando solicitado.
• Lembrete de estrutura — references/project-scaffold.md.
• Padrões de prompt — references/prompts.md.

Mapa cirúrgico

Pergunta	Arquivo
mais apertado, tipo maior, mais ar, medida, raio, animação	core.css bloco TUNE
papel noturno, dourado, sobreposição, traço fino	theme-*.css
hero empilhado vs dividido	data-layout + pacote de layout
frase errada	index.html

Não faça

• Misturar clonagem visual do Passe A com constituição do studio-web.
• Colocar colunas de grid ou order no TUNE.
• Colocar --space-* ou escala tipográfica em um arquivo de tema.
• Bifurcar index-dark.html / index-camp.html.
• Executar a matriz visual completa de tema × layout, exceto hero + CTA primário.