taufiquebuilds/readmereel

Was macht readmereel?

Du verwandelst das Repository, in dem du dich befindest, in ein kurzes Launch-Video. Du schreibst die Worte; ein Skript rendert das Video. Schreibe niemals Animationscode: Die Szenen sind feste Vorlagen.

1. Das Repository lesen

Lies zuerst die README, dann das Paketmanifest (package.json, pyproject.toml, Cargo.toml, go.mod), den docs-Ordner und die Bilddateien im Repository. Suche nach:

• Wie heißt es und was macht es in einem Satz?
• Welches Problem löst es? Formuliere es aus Nutzersicht.
• Drei Dinge, die es für den Nutzer tut.
• Den ersten Befehl, den ein Nutzer ausführt (Installation oder Schnellstart).
• Echte Screenshots oder Diagramme (docs/, assets/, .github/, images/, screenshots/, Bildlinks in der README, die auf Dateien im Repository verweisen).
• Ein Logo (PNG oder SVG) und eine Markenfarbe (aus dem Logo, den README-Badges oder dem CSS).
• Die GitHub-URL (von git remote get-url origin) und, falls gh funktioniert, die Sternezahl: gh repo view --json stargazerCount -q .stargazerCount

2. launch-video/story.json schreiben

Erstelle den Ordner launch-video/ im Repository-Stammverzeichnis und schreibe launch-video/story.json. Pfade sind relativ zum Repository-Stammverzeichnis. Felder mit harten Grenzen, die das Skript durchsetzt:

Feld	Grenze	Schreibe es als
name	24 Zeichen	Der Produktname genau wie in der README
problem	70 Zeichen	Das Problem aus Nutzersicht, nicht das Produkt: „Jedes AI-Deck sieht gleich aus“. Ziel: etwa 6-9 Wörter, damit Zuschauer es lesen können
promise	60 Zeichen	Das Ergebnis, das der Nutzer erhält: „Folien, die wie von einem Menschen gestaltet aussehen“. Etwa 6-9 Wörter
features	genau 3	Jedes { "title", "detail", "image" }
feature title	40 Zeichen	Ein Ergebnis, kein Komponentenname: „Sendet nie zweimal im Monat“
feature detail	80 Zeichen	Ein einfacher Satz, wie oder warum, etwa 12 Wörter
feature image	optional	Pfad zu einem echten Screenshot im Repository, der dieses Feature zeigt: PNG, JPG, WebP oder SVG. Ein animiertes GIF wird als Einzelbild dargestellt, Videodateien werden nicht akzeptiert. Bevorzuge Bilder, deren Text auch in kleiner Größe lesbar ist; überspringe solche, die meist leer oder unleserlich sind. Lasse es weg, wenn es keins gibt. Erstelle oder hole niemals eines.
install	48 Zeichen	Ein Befehl, eine Zeile, genau wie in der README; falls länger, verwende den kürzesten echten ersten Befehl. Verwende niemals einen Platzhalter wie <your-username>: verwende einen echten Beispielwert, den die README selbst verwendet, z.B. repoheat dashboard --user ratatui
url	60 Zeichen	github.com/owner/repo: kein https://, kein .git. Wandle git remote-Ausgaben wie [email protected]:o/r.git oder https://github.com/o/r.git in github.com/o/r um
stars		Die Sternezahl oder null. Wird nur angezeigt, wenn 10 oder mehr
logo	optional	Pfad zu einem PNG- oder SVG-Logo
accent		Hex-Farbe wie #0f766e; die Markenfarbe, sonst weglassen
music	optional	Nur wenn der Nutzer dir eine Audiodatei gibt (mp3, m4a, wav oder ogg)
endCard		Nicht setzen (Standard: true). Setze false nur, wenn der Nutzer keine „made with readmereel“-Zeile wünscht

Beispiel:

{
  "name": "agencyrecap",
  "problem": "Monatliche Kundenberichte, per Hand erstellt und versendet",
  "promise": "Monatliche Kundenberichte, die sich selbst versenden",
  "features": [
    { "title": "Marken-PDF jeden Monat", "detail": "Ihr Logo und Farbe, am von Ihnen gewählten Tag an jeden Kunden gemailt", "image": "docs/images/report-page-2.png" },
    { "title": "Ein Dashboard", "detail": "Sehen Sie, welche Berichte rausgingen, und senden Sie sie mit einem Klick erneut", "image": "docs/images/dashboard.png" },
    { "title": "Sendet nie zweimal", "detail": "Hält an und wiederholt, wenn Google oder E-Mail fehlschlägt, und informiert Sie dann" }
  ],
  "install": "docker compose up -d",
  "url": "github.com/taufiquebuilds/agencyrecap",
  "stars": null,
  "accent": "#0f766e"
}

Jedes nicht in dieser Tabelle aufgeführte Feld wird abgelehnt, sodass ein Tippfehler erkannt wird. Kopierregeln: kurze Wörter, keine Übertreibungen („revolutionär“, „supercharged“, „nahtlos“, „freischalten“), keine Emojis, keine Ausrufezeichen, Satzanfang groß, Zahlen als Ziffern. Jede Behauptung muss durch das Repository belegbar sein.

3. Dem Nutzer die Szenen zeigen und warten

Zeige vor dem Rendern die sechs Szenen als nummerierte Liste und frage nach „ok“ oder Änderungen:

1. Hook (3 s): problem
2. Titel (3 s): name, promise
3. Feature 1 (4 s): Titel, Detail, Bilddatei oder „Textkarte“
4. Feature 2 (4 s): gleich
5. Feature 3 (4 s): gleich
6. Installation + Stern (7 s): install, „Stern auf GitHub“, url

4. Rendern

scripts/render.mjs befindet sich in dem Ordner, der diese SKILL.md enthält. Ermittle seinen absoluten Pfad und führe diesen Befehl vom Repository-Stammverzeichnis aus:

node <absoluter-pfad-zu-diesem-skill-ordner>/scripts/render.mjs launch-video/story.json

Es benötigt Node 22+ und ffmpeg und zeigt an, wie beides installiert wird, falls es fehlt. Es benötigt bei jedem Durchlauf Internetzugriff: npm (HyperFrames), einen einmaligen Chrome-Download, Google Fonts und das GSAP CDN. Das Rendern dauert 3-10 Minuten. Führe den Befehl daher mit einem Timeout von mindestens 15 Minuten aus, oder im Hintergrund und warte auf das Ende. Wenn die Sandbox das Netzwerk blockiert, bitte den Nutzer, es zu erlauben, oder gib ihnen den genauen obigen Befehl und bitte sie, ihn selbst auszuführen.

Füge --draft für eine schnellere, qualitativ niedrigere Renderausgabe hinzu, wenn der Nutzer nur einen schnellen Blick wünscht.

Wenn das Skript Story-Probleme oder Layout-Probleme ausgibt, korrigiere story.json (kürze den benannten Text) und führe es erneut aus. Wenn ein Rendern fehlschlägt, lies das Ende von launch-video/render.log.

5. Übergeben

Teile dem Nutzer mit, was erstellt wurde:

• launch-video/video-16x9.mp4: README, Product Hunt, Show HN, YouTube
• launch-video/video-9x16.mp4: X, LinkedIn, Instagram Reels, TikTok
• launch-video/video.gif: Füge oben in der README ein mit ![<name> Launch-Video](launch-video/video.gif)
• launch-video/wide/ und launch-video/tall/: Bearbeitbare HyperFrames-Projekte. Sie werden bei jedem Durchlauf neu erstellt. Kopiere daher eines an einen anderen Ort, bevor du es in HyperFrames Studio bearbeitest (cd launch-video/wide && npx --yes [email protected] preview)

Gib dem Nutzer den genauen absoluten Befehl, den du ausgeführt hast (mit dem Pfad zu launch-video/story.json), damit er ohne Agenten neu rendern kann. Um später Wörter zu ändern, bearbeiten sie story.json und führen denselben Befehl erneut aus. Schlage vor, launch-video/wide/, launch-video/tall/ und launch-video/render.log zu .gitignore hinzuzufügen. Wenn kein Feature ein echtes Bild hatte, sage, dass das Hinzufügen eines Screenshots zum Repository das Video verbessert.