replica-build
Liest replica/recon.md, replica/architecture.md, replica/design/. Aktualisiert replica/features.csv (die clone-Spalte) und führt replica/build-log.md.
Die Regeln
- Clean Room. Jede Codezeile wird hier geschrieben – basierend auf der Recon-Map und den Spezifikationen. Niemals das Original-HTML, -CSS, -JavaScript, -SVGs oder -Bilder einfügen, nichts von dessen Domain oder CDN laden, niemals „Quelltext anzeigen und anpassen“.
- Deine Worte. Schreibe jedes Label, jeden Button, jeden leeren Zustand und jede E-Mail neu. Dass ein Button das Gleiche tut, ist Gleichwertigkeit. Dass er denselben Satz zeigt, ist Kopieren.
- Nur Tokens. Keine rohen Hex- oder Pixelwerte in Komponenten. Fehlt ein Wert, füge ihn den Tokens hinzu.
Schritt 1: das Shell
Routing für jeden Bildschirm aus dem Inventar (Stub-Seiten sind in Ordnung), das Layout (Nav, Header, Sidebar), eingebundene Tokens, die Primitive aus replica-design und Seed-Daten, damit Bildschirme etwas Reales zeigen können. Commit.
Schritt 2: der vertikale Slice
Der Kern-Ablauf aus der Recon-Map, von Anfang bis Ende, bevor irgendetwas anderes kommt. Für eine Buchungs-App: Erstelle einen Event-Typen, öffne die öffentliche Seite, buche einen Slot, sieh ihn auf dem Dashboard. Hässlich ist in Ordnung. Funktionieren ist der Punkt. Wenn replica-backend noch nicht ausgeführt wurde, verwende die Seed-Daten und eine Fake-Daten-Schicht mit denselben Funktionssignaturen – so ändert sich beim Austausch gegen die echte Schicht kein Bildschirm-Code.
Schritt 3: Bildschirm für Bildschirm
Arbeite in der Reihenfolge von architecture.md. Für jeden Bildschirm:
- Lies seine Zeile in der Recon-Map: Zweck, Komponenten, Zustände, welche Abläufe durch ihn hindurchgehen.
- Schau dir den Referenz-Screenshot für Layout und Hierarchie an. Nicht für Pixel.
- Baue ihn mit den Primitiven. Echte Daten aus der Daten-Schicht.
- Jeder Zustand: leer, laden (Skelette, keine Spinner, wenn das Original das tut), gefüllt, Fehler, keine Berechtigung, lange Inhalte (ein 60 Zeichen langer Name), mobile Breite.
- Basics, jedes Mal: semantisches HTML, Labels auf Eingabefeldern, tastaturerreichbar, sichtbarer Fokus, Bilder mit Alt-Text.
- Setze die passenden Zeilen in
features.csvaufyesoderpartial(mit einem Hinweis). - Mache einen Screenshot mit demselben Viewport wie die Referenz und speichere ihn unter
replica/clone-screens/S07.pngfür replica-diff. - Ein Commit pro Bildschirm:
build: S07 Buchungsseite.
Definition of Done, pro Bildschirm
- jeder Zustand aus der Recon-Map plus leer, Fehler und laden
- funktioniert bei 390px und 1440px Breite
- nur Tastatur: der Ablauf kann vollständig durchgeführt werden
- keine Konsolenfehler
- keine hartcodierten Texte, die aus dem Original übernommen wurden
- features.csv aktualisiert
- Screenshot für den Diff gespeichert
Schritt 4: das Bauprotokoll
replica/build-log.md, eine Zeile pro Bildschirm: ID, Datum, erledigt oder teilweise, was fehlt, was schwieriger war als erwartet. Wenn eine Funktion größer ist, als sie aussah, sag es im Protokoll und im Chat. Liefere nicht stillschweigend die Hälfte davon aus.
Wenn du nicht weiterkommst, wie etwas funktioniert
Geh zurück zum Original als Benutzer: Lies seinen Hilfeartikel, sieh dir seinen öffentlichen Walkthrough an, verwende das eigene Konto des Nutzers. Durchsuche nicht seinen Code oder seine Netzwerkaufrufe. Baue dann deine eigene Version des Verhaltens.
Ausgabe
Erstellte Bildschirme, aktualisierte Feature-Matrix, Screenshots und eine Zusammenfassung: erledigte Bildschirme von insgesamt, erledigte Muss-Ziele von insgesamt, was als Nächstes kommt. Danach /replica-backend, wenn die Daten-Schicht noch Fake ist, sonst /replica-test.