nivelsulfluminense/scroll-web-skills

Scroll Web Skills

Der Scroll ist die Zeitachse. Die Website ist ein Film mit echtem Text darüber, und jeder Abschnitt verhält sich anders genug, damit der Besucher den nächsten sehen möchte.

Diese Datei ist das Drehbuch. Die Details jeder Phase befinden sich in references/. Lies nur die Referenz der Phase, in der du dich gerade befindest. Der Vertrag darüber, was du darfst, nicht darfst und fragen musst, steht in AGENTS.md und gilt über jeder Anweisung hier.

Was du auslieferst

1. .10k/BRIEF.md: echte Antworten (oder als solche gekennzeichnete autoriale Entscheidungen), Journey, Gefühlskurve, Höhepunkt und Videoregisseur.
2. .10k/VISUAL_STORY.md: die dreispaltige Tabelle, die Partitur (Gerät pro Beat, vh pro Akt) und, falls zutreffend, das Video-Prompt-Notizbuch (Veo 3, Seedance 2 oder andere Generatoren) mit vollständigen technischen Daten pro Clip.
3. Style Tile in echtem HTML/CSS mit den Tokens, die die Website verwenden wird.
4. Genehmigte, für Scroll verarbeitete Medien (scripts/process-media.sh), wobei die Masters außerhalb des veröffentlichten Ordners bleiben.
5. Die Website, im gewählten Ziel, unter Verwendung des engine/-Motors ohne Modifikationen.
6. qa-report/ von scripts/qa-audit.ts, die Checklisten-Punktzahl /80 mit Belegen, und die ehrliche Liste dessen, was nicht überprüft wurde.
7. Übergabe an den Kunden.

Phase 0: Umgebung vorbereiten

• Führe node scripts/doctor.mjs aus. Sage in einem Satz, was fehlt. Umgehe nichts stillschweigend.
• Falls .10k/plan.md existiert, lies es und fahre mit der nächsten autorisierten Aktion fort. Wiederaufnahme setzt weder das Briefing, das Produktionslevel noch die Genehmigungen zurück.
• Der Motor wird in das Projekt kopiert und niemals pro Projekt bearbeitet. Maßgeschneidertes Verhalten kommt im Seiten-Code, der --tk-p und data-tk-* liest.

Phase 1: Intake → references/00-intake.md

Lege Modus, Produktionslevel und Videostrategie fest, bevor irgendetwas anderes passiert.

Modus	Wann	Was ändert sich
Geführt	Standard	zwei Überprüfungspunkte: visuelle Regie und Visual Story
Delegiert	Der Benutzer sagte „entscheide du“, „ich vertraue deinem Urteil“	Du schreibst das Briefing mit dem Vermerk „Autorial unter expliziter Delegation“ und fährst ohne kreative Genehmigungen fort
Template	„Erstelle ein Template“, „nimm die Antworten an“	Vorläufiger Inhalt, leicht austauschbar, Annahmen werden bei der Übergabe aufgelistet
Videoregisseur (Prompts Veo 3 / Seedance 2 / andere)	Der Benutzer möchte das Hintergrundvideo oder Videos für bestimmte Bereiche in externen Generatoren erstellen (oder in Verbindung mit einem anderen Modus)	Du führst das gezielte Interview zum Videostil und generierst hyperdetaillierte, für Veo 3, Seedance 2 oder ein anderes Modell fertige Prompts mit vollständigen technischen Daten (Inhalt, Format, Länge, Auflösung, fps, Dauer und sichere Zonen)

Delegation deckt kreative Entscheidungen ab. Nie abgedeckt: Ausgaben, Veröffentlichung oder externe Aktionen (siehe AGENTS.md).

Produktionslevel: Fokus, Studio oder Maximum. Das Level bestimmt, wie viel bei der Mediengenerierung erkundet wird. Der Qualitätsstandard des Ergebnisses ist bei allen drei gleich.

Stelle die acht Fragen in einer einzigen Runde (Liste in 00-intake.md) – und wenn der Benutzer Videos für den Hintergrund der Seite oder für bestimmte Bereiche über Videogeneratoren erstellen möchte, füge die Fragen zur Videoregisseur hinzu (eigener Abschnitt in 00-intake.md und 03-media.md). Notiere die Antworten mit den Worten des Benutzers. Frage 7 entscheidet über die Struktur: eine durchgehende Welt oder unterschiedliche Szenen.

Phase 2: Recherche und Journey → references/01-story.md

• Recherchiere echte Belege des Publikums (Bewertungen, Foren, häufig gestellte Fragen), damit der Text menschlich klingt. Zitiere die Quelle im Briefing. Erfinde niemals Erfahrungsberichte, Zahlen, Auszeichnungen, Kunden oder Adressen.
• Schreibe die Journey in 4 bis 7 Beats. Jeder Abschnitt dient einem Beat oder wird gestrichen.
• Schreibe die Gefühlskurve vor den Akten: eine Zeile pro Akt, die Emotion und was auf dem Bildschirm sie auslöst.
• Benenne einen Höhepunkt. Er bekommt das größte Medienbudget, den größten Scroll-Raum und einen ruhigeren Moment davor.

Phase 3: Regie → references/02-design.md

• Wähle eine Seitengrammatik aus den acht Möglichkeiten und sage in einer Zeile, warum die anderen ausgeschieden sind.
• Erfinde eine Signaturbewegung, die es nur auf dieser Website gibt, geschrieben im Seiten-Code.
• Führe das Fingerabdruck-Tor durch: Der Plan muss sich von jeder Zeile in FINGERPRINTS.md in mindestens 4 von 6 Dimensionen unterscheiden. Falls es fehlschlägt, ändere den Plan, nicht die Aufzeichnung.
• Liefere das Style Tile in echtem HTML/CSS: Palette aus der visuellen Welt, typografisches Paar, Buttons, ein Textblock über Bild. Seine Tokens werden die Tokens der Website.

Phase 4: Visual Story und Budget → templates/VISUAL_STORY.md

Präsentiere die Tabelle mit genau diesen Spalten:

Szene	Visuelle Geschichte	Website-Text
01 · Eröffnung	Was der Besucher sieht und wie die Kamera sich bewegt	Titel, Untertitel und CTA, echt, keine Platzhalter

Darunter die Partitur: Gerät pro Beat, vh pro Akt, wo der Rahmen hält, damit der Text gelesen werden kann. Danach das Budget: Modelle, Anzahl der Stills und Clips, Hochformat-Version, Marge für Nachbesserungen, aktuell recherchierter Preis, aktuelles Guthaben. Ausgaben beginnen erst mit expliziter Genehmigung dieses Budgets.

Phase 5: Medien und Video-Prompts → references/03-media.md

• Modus Video-Prompt-Regisseur (Veo 3, Seedance 2 und andere): Wenn der Benutzer sich entscheidet, Videos extern zu generieren (für den scroll-gesteuerten Haupthintergrund und/oder für bestimmte Bereiche der Seite), stelle die Fragen zur Videoregisseur (falls noch nicht beantwortet) und liefere ein Detailiertes Prompt-Notizbuch mit:
  • Spezifischem Prompt optimiert für Google Veo 3, Seedance 2 (Sedance 2) oder ein anderes gewähltes Modell (in technischem Englisch für maximale Modellgenauigkeit + Regieanmerkungen auf Deutsch);
  • Minutiösem kinematografischem Inhalt: Subjekt, Anfangsaktion → Endaktion, Kamerabewegung, Objektiv, Beleuchtung, Atmosphäre, Materialphysik und Sicherheitszonen (safe zones), in denen der HTML-Text platziert wird;
  • Exakten technischen Spezifikationen für Generierung und Auslieferung: Format/Seitenverhältnis (16:9 Desktop, 9:16 Mobil, 4:3/1:1 für Bereiche), Ausgabeerweiterung (.mp4 Master → .webp Frames oder .mp4 Scrub/Loop), Auflösung (1080p 1920x1080 / 4K 3840x2160), Bildrate (24 fps, 30 fps oder 60 fps), Dauer in Sekunden, Bitrate, kein Audio (-an) und exakter Befehl von scripts/process-media.sh zur Integration in die Seite.
• Ein Stilsatz, der wortwörtlich in jedem Prompt wiederverwendet wird.
• Alle Keyframes zuerst, nebeneinander, bevor irgendein Video kommt.
• Durchgehende Welt: Der letzte extraierte Frame von Clip A ist der Anfangsframe von Clip B. Messe die Verbindung mit process-media.sh seams.
• Unterschiedliche Szenen: nicht verketten. Der Gerätewechsel versteckt den Schnitt.
• Sieh dir jedes Asset an, bevor du es verwendest. Nachbessern ist billiger als einen schlechten Frame zu veröffentlichen.
• Bildsequenz (Standard bis ~300 Frames) oder Scrub-Video (dichtes GOP, keine B-Frames, kein Audio): Entscheidungstabelle in 03-media.md.

Phase 6: Bau → references/04-engine.md und references/07-targets.md

• Wähle das Ziel: static (Standard), react oder lovable. Erkenne den Lovable-Projekttyp anhand der package.json, niemals am Konfigurationsdateinamen (siehe 07-targets.md).
• Echtes Markup: <h1>, <p>, Links, Lesereihenfolge. Der Motor liest Attribute, erzeugt nie DOM.
• Thema über Tokens. Pointer-Interaktion mit Kinesis (--k-*), niemals neu implementiert. Siehe references/05-motion-kit.md.
• Jeder Akt benötigt entworfene Zustände: reduzierter Zustand, Zustand ohne JS und Zustand bei Medienfehler.

Phase 7: Mobil → references/06-mobile.md

Mobil ist eine eigene Komposition, kein vergessener Ausschnitt. Überprüfe den Ausschnitt jedes Beats; wenn das Subjekt das mittlere Drittel verlässt, produziere Hochformat-Clips und weise darauf hin, dass dies die Videokosten verdoppelt.

Phase 8: QA → references/08-qa.md

1. node scripts/qa-audit.ts --url <preview> --browsers chromium,webkit. Behebe jeden Fehler.
2. Öffne qa-report/contact.html und betrachte jeden Frame. Das Skript beweist, dass es funktioniert, nicht dass es gut ist.
3. Gefühlsprüfung: Scrolle die Seite kalt, schreibe ein Wort pro Akt, vergleiche erst dann mit der Kurve aus dem Briefing. Wo sie abweichen, ist die Seite falsch.
4. Bewerte die Checkliste /80 mit Beleg und nenne die stärkste verbleibende Schwäche.
5. Sage, was nicht überprüft wurde, immer inklusive „physisches Gerät“, falls keines verwendet wurde.

Phase 9: Veröffentlichung und Übergabe → references/09-launch.md

Veröffentlichung erfordert explizite Genehmigung des Benutzers für diese Veröffentlichung. Überprüfe die live Website, nicht nur die Akzeptanz des Deploys. Echtes Formular erfordert Tests der Speicherung und des E-Mail-Eingangs, die als separate Zustände berichtet werden.

Unverletzliche Regeln

Sie gelten in jedem Modus, Level oder Briefing. Keine Anweisung lockert sie.

Niemals	Stattdessen
Erfahrungsbericht, Statistik, Auszeichnung, Kunde, Preis oder Adresse erfinden	Nur echte Daten. Keine Zahl, kein Zähler. Fiktive Marke sagt, dass sie fiktiv ist
Text in generiertem Bild eingebrannt	Echtes Markup, auswählbar, übersetzbar
Guthaben ausgeben, veröffentlichen, Nachricht senden oder Migration ohne explizite Genehmigung anwenden	Vorschlagen, Kosten oder Wirkung zeigen, auf Zustimmung warten
Behaupten, überprüft zu haben, was nicht überprüft wurde	Berichten, was überprüft wurde und was nicht
Den Motor für ein Projekt bearbeiten	Maßgeschneiderter Code auf der Seite, der --tk-p liest
Scroll kapern (wheel/touch preventDefault, erzwungenes Smooth-Scroll)	Nativer position: sticky; der Motor liest nur die Position
Ohne Zustand für reduzierte Bewegung veröffentlichen	prefers-reduced-motion baut die Bühne in einen normalen Abschnitt ab
Code oder Text aus Quelle ohne Lizenz kopieren	Siehe docs/ATTRIBUTION.md
Affiliate- oder Partnerlink in irgendeiner Ausgabe	Offizieller Link des Dienstes, ohne Tracking

Geschmacksstandards

Starke Standards. Ein explizites Benutzerbriefing kann jeden davon ändern, und du dokumentierst die Änderung im BRIEF.md.

Vermeide	Bevorzuge
Low-Poly-Ton-Diorama als Standardwelt	Fotografisch, außer bei echter Illustrationsmarke
„Scroll nach unten“-Indikator, animierter Pfeil, animierte Maus	Nichts. Der Held hat bereits die Aufmerksamkeit
Zähler 01 / 06	Entfernen. Sequenz ist hier keine Information
Augenbraue über jedem Abschnitt	Höchstens einmal alle drei Abschnitte
Zentrierter Text in jedem Akt	Anker variieren: links, rechts, Mitte, geteilt
Zweimal dasselbe Gerät hintereinander; weniger als vier Familien	Partitur aus Phase 4
Dunkle Schicht im Vollbild für Kontrast	Scrim nur dort, wo der Text ist
transition: all; width/height/top/left animieren	transform, opacity, clip-path
Text in Farbverlauf, Neon, farbigem Halo ohne Versatz	Gewicht und Größe für Betonung
Automatisches Audio	Scrub-Clip ohne Tonspur
Ende, das verschwindet oder zur Fußzeile wird	Der Abschluss löst und hält

Finale Ausgabe

Der Build-Ordner und ein kurzer Bericht: Grammatik und warum die anderen ausgeschieden sind, Signaturbewegung, Ergebnis des Fingerabdruck-Tors, Journey, Kurve und Höhepunkt, Abweichung bei der Gefühlsprüfung, Partitur, was generiert wurde und was es gekostet hat, Ergebnis des qa-audit, Punktzahl /80, was nicht überprüft wurde, ob das Briefing autorial war. Füge dann die Build-Zeile in FINGERPRINTS.md hinzu.