getrdone/estándar-página-html

Estándar de página HTML

Pipeline canónico para HTML estático en adelante. Esta skill es el enrutador. No implementes una página completa solo a partir de este archivo.

Declara antes de escribir archivos:

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

Carga solo el propietario del pase actual. Nunca permitas que screenshot-to-html y studio-web co-escriban el primer borrador.

Propietarios de pase

Pase	Propietario	Salida
A-clone	solo 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 del clone, semántica, a11y, movimiento
layout-pack	esta skill + references/layout-packs.md	opcional layout-*.css

Si el usuario proporciona una URL en vivo o HTML existente (sin captura para clonar), salta A. Tokeniza si faltan tokens, luego C.

Si la captura es solo una inspiración, no una reproducción exacta, salta A y usa studio-web web.build. Indícalo antes de escribir.

Reglas estrictas

1. Un pase por turno a menos que el usuario los encadene explícitamente.
2. Cada página nueva incluye TUNE + un archivo de tema incluso cuando solo hay un aspecto visual.
3. TUNE es dueño del ritmo. El tema es dueño del aspecto. Los paquetes de layout son dueños de la disposición. HTML es dueño del contenido.
4. Después del pase B, no uses font-size, padding, margin o gap en bruto cuando exista un token.
5. Sin breakpoints de ancho de viewport para el diseño de componentes. Las regiones son @container + cqi.
6. Los temas no deben modificar el DOM. Los paquetes de layout no deben modificar la paleta.
7. No añadas un segundo tema ni un paquete de layout en la página uno a menos que se solicite.
8. El trabajo en Wix Velo está fuera del alcance.

Contrato de carpeta

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

Opcional más adelante: theme-<name>.css, layout-<name>.css. Atributos raíz: data-theme="default" y data-layout="default".

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

Mapa de carga

• Pase A — carga screenshot-to-html. Detente cuando clone.html coincida con la imagen.
• Pase B — carga references/tokenize-contract.md. Copia assets/core.template.css y assets/theme-default.template.css, luego rellena los números a partir del clone. No rediseñes.
• Pase C — carga studio-web 1.1, carril web.repair, más references/page-anatomy.md de esa skill. CONGELADO: contrato visual, números TUNE, paleta de tema a menos que se nombre. CAMBIA: ids de región, semántica, controles reales, contraste, movimiento que no cambie la imagen.
• Paquete de layout — carga references/layout-packs.md solo cuando se solicite.
• Recordatorio de andamiaje — references/project-scaffold.md.
• Patrones de prompt — references/prompts.md.

Mapa quirúrgico

Pregunta	Archivo
más apretado, tipo más grande, más aire, medida, radio, movimiento	core.css bloque TUNE
papel noche, dorado, superposición, línea fina	theme-*.css
héroe apilado vs dividido	data-layout + paquete de layout
frase incorrecta	index.html

No hagas

• Mezclar clonado visual del pase A con constitución de studio-web.
• Poner columnas de cuadrícula o order en TUNE.
• Poner --space-* o escala tipográfica en un archivo de tema.
• Bifurcar index-dark.html / index-camp.html.
• Ejecutar la matriz visual completa de tema × layout excepto héroe + CTA principal.