getrdone/html-page-standard – Standard für HTML-Seiten

HTML-Seitenstandard

Kanonische Pipeline für statisches HTML ab sofort. Dieses Skill ist der Router. Implementiere eine ganze Seite nicht allein aus dieser Datei.

Vor dem Schreiben von Dateien deklarieren:

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

Lade nur den Besitzer des aktuellen Durchlaufs. Lasse screenshot-to-html und studio-web niemals den ersten Entwurf gemeinsam erstellen.

Besitzer der Durchläufe

Durchlauf	Besitzer	Ausgabe
A-clone	nur screenshot-to-html	source.png + clone.html
B-tokenize	dieses Skill + references/tokenize-contract.md	core.css + theme-default.css
C-repair	studio-web 1.1 web.repair	index.html aus dem Klon, Semantik, Barrierefreiheit, Bewegung
layout-pack	dieses Skill + references/layout-packs.md	optional layout-*.css

Wenn der Benutzer eine Live-URL oder vorhandenes HTML angibt (kein Screenshot zum Klonen), überspringe A. Tokenisiere, falls Token fehlen, dann C.

Wenn der Screenshot nur eine Stimmung (Mood) und kein exaktes Abbild ist, überspringe A und verwende stattdessen studio-web web.build. Sage dies vor dem Schreiben.

Harte Regeln

1. Ein Durchlauf pro Runde, es sei denn, der Benutzer verknüpft sie explizit.
2. Jede neue Seite liefert TUNE + eine Theme-Datei, selbst wenn es nur eine einzige Darstellung gibt.
3. TUNE besitzt Rhythmus. Theme besitzt das Aussehen. Layout-Packs besitzen die Anordnung. HTML besitzt den Text.
4. Nach Pass B keine rohen font-size-, padding-, margin- oder gap-Angaben, wenn ein Token existiert.
5. Keine Viewport-Breiten-Breakpoints für Komponenten-Layout. Regionen sind @container + cqi.
6. Themes dürfen das DOM nicht ändern. Layout-Packs dürfen die Palette nicht ändern.
7. Füge auf Seite eins kein zweites Theme oder ein Layout-Pack hinzu, es sei denn, darum gebeten.
8. Wix-Velo-Arbeiten sind nicht zulässig.

Ordnervertrag

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

Später optional: theme-<name>.css, layout-<name>.css. Root-Attribute: data-theme="default" und data-layout="default".

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

Ladeplan

• Pass A – lade screenshot-to-html. Stoppe, wenn clone.html dem Bild entspricht.
• Pass B – lade references/tokenize-contract.md. Kopiere assets/core.template.css und assets/theme-default.template.css, fülle dann die Zahlen aus dem Klon. Keine Neugestaltung.
• Pass C – lade studio-web 1.1, Spur web.repair, plus references/page-anatomy.md aus diesem Skill. GEFROREN: visueller Vertrag, TUNE-Zahlen, Theme-Palette (sofern nicht benannt). ÄNDERN: Regions-IDs, Semantik, echte Steuerelemente, Kontrast, Bewegung, die das Bild nicht verändert.
• Layout-Pack – lade references/layout-packs.md nur auf Anfrage.
• Scaffold-Erinnerung – references/project-scaffold.md.
• Prompt-Muster – references/prompts.md.

Chirurgischer Plan

Frage	Datei
Enger, größere Schrift, mehr Luft, Maß, Radius, Bewegung	core.css TUNE-Block
Nachtpapier, Gold, Overlay, Haarlineal	theme-*.css
Gestapelter vs. geteilter Hero	data-layout + Layout-Pack
Falscher Satz	index.html

Nicht tun

• Mix aus Pass A visuellem Klonen und studio-web-Zusammenstellung.
• Grid-Spalten oder order in TUNE setzen.
• --space-* oder Schriftgrößen-Skala in eine Theme-Datei setzen.
• index-dark.html / index-camp.html forken.
• Die vollständige Theme-×-Layout-Visual-Matrix ausführen, außer Hero + primärem CTA.