albertirgi/replica

Was macht replica?

Baue nach, worauf der Benutzer zeigt, und beweise es. capture verwandelt die Referenz in ein Blaupausen-Set gemessener Fakten. Du baust aus der Blaupause. compare bewertet den Bau auf vier Achsen (Layout, Stil, Pixel, Bewegung) und sagt dir, welche Korrektur die meisten Punkte bringt. Du bist fertig, wenn compare mit Exit-Code 0 endet, nicht wenn der Bau für dich gut aussieht.

<skill> bezeichnet das Verzeichnis, in dem sich diese SKILL.md befindet.

Regeln

1. Messen, nicht raten. Entnimm jede Größe, Farbe, Schriftart, jeden Abstand, jede Dauer und jedes Easing aus blueprint.md, blueprint.json oder einem Report. Verwende nicht dein Gedächtnis, wie ähnliche Seiten normalerweise aussehen.
2. Spiele nie die Bewertung. Bette keine Screenshots oder Videoframes der Referenz ein, öffne keinen Iframe oder Proxy zur Referenz, füge nicht ihren gerenderten HTML-Code vollständig ein, bearbeite nichts unter .replica/ und senke nicht --level, um einen Bestehenswert zu erreichen. Baue echte UI im Stack des Benutzers.
3. Verwende den Stack des Projekts. Lies zuerst package.json und die nächstgelegenen vorhandenen Komponenten. Passe das Framework, den Styling-Ansatz und die Animationsbibliothek an, die bereits verwendet werden. Füge nur dann eine Abhängigkeit hinzu, wenn die Referenz etwas benötigt, das das Projekt nicht kann.
4. Repariere in der Reihenfolge des Reports, einige auf einmal. Elemente oben verursachen oft Elemente weiter unten: Eine einzige Korrektur der Kaskade kann Dutzende von Elementen verschieben. Führe compare nach jedem Batch erneut aus. Staple niemals zehn spekulative Änderungen.
5. Respektiere Eigentumsrechte. Die Schriftarten, Bilder, Icons und Texte der Referenz gehören deren Eigentümern. Verwende die eigenen Assets und Texte des Benutzers, wo vorhanden. Frage andernfalls nach oder verwende Platzhalter mit denselben Abmessungen, markiert mit data-replica="placeholder": compare prüft weiterhin ihre Boxen, lässt aber ihre Pixel aus der Pixelbewertung heraus. Nenne in der abschließenden Nachricht, welche Referenz-Assets du wiederverwendet hast.

0. Umfang

Lege diese fest und teile sie in deiner ersten Nachricht mit:

• Ziel: die URL oder Datei, plus welcher Teil: ein CSS-Selektor für einen Abschnitt oder eine Komponente oder ein Zeitbereich für ein Video.

• Zielort: die Datei oder Route im Projekt des Benutzers und der Stack.

• Level, das die Messlatte für compare festlegt:

  Level	wenn der Benutzer sagt	Hürden (alle müssen bestanden werden)
  structure	„gleiches Layout/Gefühl, aber unsere Marke“, „wie X, aber mit unserem Inhalt“	Layout ≥ 90, Bewegung ≥ 85
  faithful (Standard)	„das klonen“, „neu erstellen“, „es so aussehen lassen wie“	Layout ≥ 95, Stil ≥ 95, Pixel ≥ 85, Bewegung ≥ 90
  exact	„pixelgenau“, „1:1“, „exakt“	Layout ≥ 98, Stil ≥ 98, Pixel ≥ 97, Bewegung ≥ 95

• Auslöser: Was startet die Bewegung (Seitenladung, Hover, Klick, Scrollen in den Sichtbereich, Scroll-Scrubbing). Dies wird zu --action.

Leite ab, was du aus der Anfrage und dem Repository kannst. Frage nur, wenn zwei Lesarten zu unterschiedlicher Arbeit führen würden.

1. Einrichtung (einmal pro Maschine)

npm install --prefix <skill>/scripts
node <skill>/scripts/replica.mjs doctor

Wenn doctor keinen Browser meldet, führe den Installationsbefehl aus, den es ausgibt. Falls Google Chrome installiert ist, verwendet Replica es als Fallback. Video- und GIF-Referenzen benötigen außerdem ffmpeg im PATH.

2. Erfasse die Referenz

Halte alles in .replica/<name>/ innerhalb des Projekts des Benutzers und füge .replica/ zur .gitignore hinzu.

node <skill>/scripts/replica.mjs capture <url|datei.html|bild|video> --out .replica/<name>/ref \
  --selector "<css des teils>" --viewports 1440x900,390x844 --action load --motion 1500

• --selector: Beschränke die Erfassung auf den Teil, den du klonst. Ganze Seiten erzeugen riesige Blaupausen.
• --viewports: Die Breiten, die du ausliefern wirst. Die erste ist primär; Bewegung wird dort aufgezeichnet.
• --action und --motion <ms>: Nur, wenn es eine zu klonende Bewegung gibt. Nimm die Aufzeichnung lang genug, um alles abzudecken; capture druckt einen Hinweis, wenn am Ende noch etwas in Bewegung war.
• --hide "<css>": Verstecke Cookie-Banner, Chat-Widgets und Entwickler-Overlays. Dies gilt für beide Seiten.

Rezepte für Bilder, Videos, Seiten mit Login-Wall, Iframes, Canvas und Dark Mode findest du in references/sources.md.

Lies dann ref/blueprint.md vollständig. Betrachte ref/<viewport>/shot.png und ref/motion/filmstrip.png mit deinem Bildbetrachter. Die Blaupausen-Syntax wird in references/blueprint.md erklärt. Bild- und Video-Referenzen haben keine Blaupause, also baue aus den Aufnahmen und Frames.

3. Bauen

Arbeite in dieser Reihenfolge: Tokens → Layout-Skelett → Typografie → Boxen und Farbe → Medien → Responsivität → Bewegung.

• Tokens: Füge die Farben, Schriftgrößen, Radien, Schatten und CSS-Variablen der Blaupause mit ihren exakten Werten in das Token-System des Projekts (CSS-Variablen oder Tailwind-Theme) ein.
• Layout: Reproduziere jede Umrisslinie mit ihren Werten für flex … / grid cols[…], gap und pad sowie die Breiten der Container.
• Typografie: Stimme Familie, Gewicht, Größe/Zeilenabstand und Buchstabenabstand exakt ab. Wenn eine Schriftart nicht verfügbar oder lizenziert ist, verwende die nächstgelegene verfügbare und dokumentiere sie als bekannte Abweichung.
• Bewegung: Wenn die Blaupause „Deklarierte Animationen“ enthält, kopiere deren Dauer, Verzögerung, Easing und Keyframes exakt. Verwende andernfalls den Start, die Dauer und das Easing der Zeitachse oder ihre Federparameter.
• Bereitstellen: Mache den Klon unter einer URL oder HTML-Datei erreichbar, die denselben Zustand rendert (eine Dev-Server-Route, eine Story oder eine statische Datei). Wenn sein Wurzelelement einen anderen Selektor als die Referenz benötigt, übergib --selector an compare.

Hinweise für jeden Stack (CSS, Tailwind, Framer Motion, GSAP) findest du in references/building.md.

4. Vergleichen, korrigieren, wiederholen

node <skill>/scripts/replica.mjs compare .replica/<name>/ref <clone url|datei> [--selector "<clone root css>"]

Es schreibt round-N/ mit report.md, issues.json, score.json und sheets/. Exit-Code 0 bedeutet Bestehen, 1 bedeutet noch nicht, und 2 bedeutet einen Fehler.

1. Lese round-N/report.md: die Bewertungstabelle, dann Als nächstes korrigieren. Jedes Element zeigt, wie viele Punkte seine Korrektur wert ist.
2. Betrachte round-N/sheets/*.png: die Referenz | deine | Diff-Übersicht, gezoomte Hotspots und der Bewegungsstreifen.
3. Korrigiere die obersten 3–5 Elemente, immer unter Einbeziehung eines Elements „Wahrscheinliche Ursache“. Führe dann compare erneut aus.

• Wenn der Report ▼ anzeigt (die Bewertung ist gesunken), mache deine letzte Änderung rückgängig, bevor du etwas anderes versuchst.
• Wenn zwei Runden hintereinander weniger als 1 Punkt gewinnen, höre auf zu flicken. Lies die Blaupause für den fehlerhaften Bereich erneut und überprüfe, ob Schriftarten geladen wurden und ob du den richtigen Selektor, Zustand und Viewport vergleichst.
• Höre nach 8 Runden auf und berichte, was übrig ist und warum.

References/fixing.md erklärt, was jede Art von Befund bedeutet und welche Änderung sie normalerweise behebt.

5. Ausliefern

Beende mit Folgendem, ausgefüllt:

Replica · <Ziel> → <geänderte Dateien>
Level <level> · Runde <N> · Bewertung <Gesamt> — BESTANDEN | NOCH NICHT
Layout <n> · Stil <n> · Pixel <n> · Bewegung <n>
Bekannte Abweichungen: <jede einzelne, mit ihrem Grund (lizenzierte Schriftart, eigener Text des Benutzers, …)>
Wiederverwendete Referenz-Assets: <Liste oder keine> · Platzhalter: <Liste oder keine>
Nachweise: .replica/<name>/round-<N>/report.md und sheets/

Wenn es nicht bestanden wurde, sage dies deutlich und liste die verbleibenden wichtigsten Befunde auf.