suxrobGM/logistics-app

Teaser-Video

Produzieren Sie ein Launch-Qualität-Teaser-Video (~30-45s) einer laufenden App: Storyboard erstellen, es durch Bedienung der echten UI filmen, mit ffmpeg schneiden und ein MP4 sowie ein GIF für die README ausliefern.

Das Ergebnis muss wie ein Produktvideo aussehen, nicht wie eine Bildschirmaufnahme. Der Unterschied liegt in der Regie – Inszenierung, Bildausschnitt und Rhythmus – nicht in der Auflösung.

Referenzimplementierungen befinden sich in reference/; es sind funktionierende ESM-Module, kein Pseudocode. Richten Sie diese in einem Scratch-Verzeichnis ein – niemals innerhalb des Projekts:

cp -r <skill>/reference/* "$SCRATCH/" && cd "$SCRATCH" && npm install
export TEASER_BASE_URL="https://the-app.example.com"

reference/package.json deklariert "type": "module" und die drei Abhängigkeiten. Jedes Skript liest TEASER_BASE_URL, sodass nichts auf eine App fest codiert ist.

Vor allem anderen: Die zwei harten Regeln

1. Lösen Sie niemals reale Seiteneffekte ohne explizite, aufgelistete Zustimmung aus.

Das Filmen einer echten App bedeutet, echte Schaltflächen zu klicken. Einige davon senden E-Mails, veröffentlichen Beiträge, verlangen Geld oder senden Formulare an Dritte. Bevor Sie die App berühren:

• Zählen Sie jede Aktion in Ihrem Storyboard auf, die den Rechner verlässt.
• Teilen Sie dem Benutzer genau mit, was jede tut und wie oft, und holen Sie sich die Zustimmung zur Anzahl.
• Bevorzugen Sie einen Modus, der kurz vor dem irreversiblen Schritt stoppt (eine Vorschau, ein Probelauf, eine Bestätigungsabfrage, die Sie filmen und dann ablehnen können).

Es gibt keinen schreibgeschützten Test gegen ein Live-System. Ein „diagnostischer" Klick, der in einer bereits laufenden Session landet, wird real ausgelöst. Wenn Sie debuggen, warum eine Aktion nicht funktioniert hat, gehen Sie davon aus, dass Ihr nächster Klick funktionieren wird, und seien Sie darauf vorbereitet.

Wenn etwas ausgelöst wird, das Sie nicht beabsichtigt haben: Stoppen Sie den Prozess sofort an seiner Quelle (killen Sie die Session/den Worker, nicht nur die UI-Schaltfläche, die möglicherweise nicht wirksam wird), überprüfen Sie den gestoppten Zustand durch Rücklesen und teilen Sie dies dem Benutzer klar in Ihrer abschließenden Nachricht mit – einschließlich der Anzahl.

2. Gehen Sie davon aus, dass jedes Bild öffentlich und voller personenbezogener Daten (PII) ist.

Echte Konten enthalten Namen, E-Mails, Adressen und Dokumente. Legen Sie die Richtlinie vorab mit dem Benutzer fest:

• Rahmen Sie es ein (Standard) – komponieren Sie Aufnahmen, die die Identität ausschließen. Schneiden Sie persistente UI-Elemente (Sidebars, Avatare, Kontomenüs) im ffmpeg-Schritt aus.
• Verstecken Sie vor dem Dreh – page.evaluate ein visibility: hidden auf den betreffenden Karten bevor die Kamera läuft. Filmen Sie es niemals und hoffen Sie, es später herausschneiden zu können.
• Verwenden Sie ein eingerichtetes Demo-Konto – am saubersten, wenn eines existiert.

Überprüfen Sie jedes Bild des endgültigen Schnitts in voller Auflösung vor der Auslieferung. Nicht das Kontaktblatt – die Einzelbilder.

Arbeitsablauf

1. Erkunden und Storyboard

Machen Sie zuerst authentifizierte Screenshots von jedem Kandidaten-Bildschirm (reference/scout.js). Sehen Sie sie sich an. Schreiben Sie dann eine Storyboard-Tabelle: Beat, Aufnahme, was der Betrachter fühlen soll, und Länge. Eine Aufnahme ohne zugewiesene Aufgabe wird gestrichen, bevor sie gefilmt wird.

Ein Bogen, der funktioniert: Spannung (das Problem) → Enthüllung (das Produkt) → Beweis (es tut wirklich das Ding) → Maßstab (die Ergebnisse) → Vertrauen (wo es läuft) → Abschluss.

Notieren Sie im Storyboard, welche Bildschirme PII enthalten und welche sicher sind.

2. Den Set vorbereiten

Kuratieren Sie vor dem Dreh, niemals danach:

• Wählen Sie Ansichten, in denen die Daten am besten aussehen – vollständige Diagramme, aktive Listen, erkennbare Namen, Werte ungleich Null. Filmen Sie niemals einen Spinner, einen leeren Zustand oder ein halb gerendertes Diagramm.
• Stellen Sie den UI-Zustand gezielt ein (Panelbreiten, eingeklappt/ausgeklappt, Filter, Scrollposition) über localStorage in einem Init-Skript oder einem Pre-Roll page.evaluate.
• Entfernen Sie Hinweise (Toasts, Banner, Cookie-Bars) außerhalb des Bildes.
• Lassen Sie die Daten zur Ruhe kommen: networkidle plus ein paar Sekunden.

3. Filmen

Verwenden Sie CDP Screencast (Page.startScreencast), keine Bildschirmaufnahme. Es erfasst die Seite außerhalb des Bildschirms mit ~100fps, sodass nichts, was der Benutzer tut, im Bild erscheint und der Rechner nutzbar bleibt. Playwright steuert; CDP filmt. reference/rig.js implementiert dies.

• Ein Motiv pro Aufnahme. Rahmen Sie das Ding ein, nicht „die ganze App".
• Kamerabewegungen erfolgen über skriptgesteuertes, abgerundetes Scrollen innerhalb der Seite (cameraScroll), niemals über einen Filter. Beachten Sie die zoompan-Warnung unten.
• Der Cursor ist ein Schauspieler: Verwenden Sie den injizierten SVG-Cursor (cursorClick), der mit Easing gleitet und beim Drücken abkippt, oder blenden Sie ihn aus. Kein zielloses Driften.
• Probieren Sie jede Einstellung, extrahieren Sie Bilder, sehen Sie sie sich an, passen Sie an, dann filmen Sie richtig.

Filmen eines externen Fensters (eines Browsers, den die App selbst öffnet, einer Desktop-App) erfordert OS-Capture – gdigrab/x11grab/avfoundation (recordDesktop im Rig). Dies erfasst alles auf dem Bildschirm, einschließlich der eigenen Arbeit des Benutzers. Warnen Sie den Benutzer, bitten Sie ihn, wegzutreten, und überprüfen Sie das Ergebnis Bild für Bild; löschen Sie es, wenn es private Daten erfasst hat.

4. Titelbilder

Animierte HTML/CSS, im Browser gefilmt, keine statischen Bilder. Injizieren Sie das Karten-Markup auf einer leeren Seite auf dem eigenen Ursprung der App, damit ihre Webfonts und Palette aufgelöst werden, und screencasten Sie es. Ziehen Sie den tatsächlichen Anzeigefont von der Live-Seite (getComputedStyle) und legen Sie einen bekannten, guten Mono-Stack fest, anstatt einen zu ermitteln.

Passen Sie die Bewegungssprache der App an (ihre eigenen Easing-Kurven und -Dauern). Laden Sie das frontend-design-Skill, bevor Sie sie entwerfen, falls das Projekt keinen etablierten Kartenstil hat.

5. Schneiden

reference/build.js normalisiert jedes Segment auf eine gemeinsame Größe/Bildrate und überblendet dann die Kette. Halten Sie Schnitte alle ~2,5-4s. Geben Sie dem Höhepunkt Raum bei normaler Geschwindigkeit, während Sie das Routine dahinter komprimieren.

6. Überprüfen, dann ausliefern

• Generieren Sie ein Kontaktblatt und sekundengenaue Bilder in voller Auflösung.
• Überprüfen Sie die Bilder auf PII, abgeschnittene Panels und unlesbaren Text.
• Überprüfen Sie Dauer und Abmessungen mit einem Probe.
• Liefern Sie ein MP4 plus, für READMEs, ein paletteoptimiertes GIF (GitHub wird kein eingechecktes MP4 inline abspielen). Halten Sie das GIF unter ~10 MB.
• Lassen Sie es still, es sei denn, es wird danach gefragt; Sie können keine Musik lizenzieren. Sagen Sie dies.

Hart erarbeitete Besonderheiten

Verwenden Sie niemals zoompan für Push-Ins. Es berechnet den Zoom pro Bild neu und rundet das Zuschneidefenster auf ganze Pixel, sodass das Bild hin und her springt – es wirkt wie ein Erdbeben. Verwenden Sie stattdessen feste Einstellungen plus echtes In-Page-Scrolling. Wenn Sie unbedingt einen Push-In brauchen, skalieren Sie die Quelle zuerst 4x vor und überprüfen Sie mit einer Framedelta-Messung (reference/jitter.js): Eine feste, statische Aufnahme sollte ein mittleres Delta weit unter 1,0 messen; sichtbares Wackeln liest 3+.

Screencast stoppt die Ausgabe von Bildern, wenn die Animation zur Ruhe kommt. Eine Karte, deren Animation nach 1,2s endet, ergibt einen 1,2s Clip. Polstern Sie mit tpad=stop_mode=clone:stop_duration=N und schneiden Sie auf die gewünschte Länge mit -t.

Erstellen Sie zeitgestempelte Bilder, keine feste Rate. Screencast-Bilder enthalten metadata.timestamp; schreiben Sie eine ffmpeg-Concat-Liste mit echten Dauern pro Bild, dann resamplen Sie auf konstante 60fps. Die Annahme eines festen Intervalls führt zu Ruckeln.

ffmpeg-static als Entwicklungsabhängigkeit, aufgelöst über den Modulpfad. Verlassen Sie sich niemals darauf, dass ffmpeg im PATH ist. (ffprobe ist nicht in diesem Paket – parsen Sie stattdessen ffmpeg -i stderr.)

Authentifiziertes Capture: Melden Sie sich einmal angemeldet an, speichern Sie storageState, verwenden Sie es für jede Aufnahme wieder (reference/login.js). Sitzungen laufen ab – beenden Sie die Dreharbeiten am selben Tag oder führen Sie sie erneut aus. Seed-Sie auch alle localStorage UI-Einstellungen dort.

Localhost von einer bereitgestellten Domäne wird blockiert durch Chromes lokale Netzwerkzugriffsrichtlinie. Wenn die Seite einen lokalen Dienst erreichen muss, starten Sie mit --disable-features=LocalNetworkAccessChecks,PrivateNetworkAccessChecks,BlockInsecurePrivateNetworkRequests.

Bilden Sie persistente Chrome mit einem festen Offset aus. Filmen Sie bei Viewport-Breite 1920 + railWidth, dann crop=1920:1080:railWidth:0, um die Sidebar zu entfernen und genau auf 1080p zu landen.

Liefergegenstände

Berichten Sie den Pfad, die Dauer und die Abmessungen; geben Sie klar an, was noch vom Benutzer benötigt wird (Musik, ein GitHub-natives Video-Upload); und legen Sie offen, was während der Dreharbeiten passiert ist, das sie wissen möchten.