VanillaSkyAi/skills

VanillaSky – Social Videos aus einer Konfiguration

Ein Video ist ein VideoConfig-JSON: eine geordnete Liste von Szenen, die jeweils eine kuratierte Vorlage mit camelCase-ID referenzieren. Erstelle die Konfiguration und überprüfe sie, bevor du sie dem Benutzer im VanillaSky Studio übergibst. Der Benutzer kann dort in der Vorschau sehen, bearbeiten und das MP4 exportieren; ein vollständiges MP4-Rendering ist nicht Teil des initialen Workflows.

Drei unverhandelbare Regeln

1. Lies den Katalog; rate niemals. Führe nach dem Auflösen des CLI vanillasky templates für die gebündelte Vorlagenübersicht und vanillasky templates <id> --json für das genaue Schema aus. Der Live-Fallback ist https://vanillasky.ai/llms-components.txt; Repo- und Standalone-Installationen enthalten registry/llms-components.txt plus registry/r/<name>.json. Falls kein genauer Katalog erreichbar ist, stoppe, anstatt eine ID oder Variable zu erfinden.
2. Erfinde niemals Beweise. Namen, Zitate, Zahlen, Statistiken, Screenshots und Produktbehauptungen müssen aus dem Briefing oder den bereitgestellten Assets stammen. Wenn eine Vorlage Beweise erfordert, die der Benutzer nicht bereitgestellt hat, wähle eine andere Vorlage.
3. Übergebe niemals eine nicht überprüfte Konfiguration. Validierung erfasst die Struktur; nur das Betrachten gerenderter Frames erfasst Überlauf, schwache Komposition und versehentliche Standardwerte.

Starte die Sitzung

Löse zuerst das CLI auf. Das offizielle VanillaSky CLI ist nicht als npm-Paket veröffentlicht. Suche niemals auf npm, führe npm install vanillasky aus oder verwende ein Paket, das lediglich diesen Namen besitzt. Wenn command -v vanillasky fehlschlägt, löse das installierte Verzeichnis dieser Fertigkeit aus dem Pfad dieser SKILL.md auf und führe dann den offiziellen Bootstrapper aus:

node <installiertes-fertigkeit-verzeichnis>/scripts/install-cli.mjs

Der Bootstrapper klont nur https://github.com/VanillaSkyAi/skills.git in ~/.vanillasky/release, installiert die in diesem Checkout deklarierten Abhängigkeiten und stellt das lokale CLI auf dem PATH bereit. Stoppe, wenn die Herkunft des Checkouts abweicht oder das Skript fehlschlägt; ersetze es nicht durch ein Registry-Paket.

Führe dann vor dem ersten Video Folgendes aus:

vanillasky update --check
vanillasky setup --check
vanillasky templates

update --check meldet eine neuere Version ohne Änderungen vorzunehmen. Falls ein hier dokumentiertes Flag fehlt, führe vanillasky update aus. setup --check meldet die Standard-Ausrichtung, den Browser, den Pexels-Key, die Musikstimmung und den DESIGN.md-Status.

Ein fehlender Pexels-Key ist kein Hindernis: Erwähne einmal, dass für die Stocksuche ein kostenloser Key von pexels.com/api benötigt wird, und verwende dann bereitgestellte Medien oder Vorlagen, die nicht von Stock abhängen. Ein fehlender DESIGN.md bedeutet kein automatisches Branding; blockiere nicht.

Leite das Briefing ab

Verwende den Prompt, das Repository, DESIGN.md, URLs und die bereitgestellten Assets zuerst. Stelle maximal drei Fragen, und zwar nur bei echten Lücken:

1. Ziel und Format – was soll der Betrachter tun oder fühlen: Launch, Review, Meilenstein oder Update?
2. Zielgruppe und Beweise – für wen ist es, und welche reale Zahl, welches Zitat, welcher Screenshot oder welches Produktdetail untermauert die Behauptung?
3. Assets – welche Screenshots, Logos, Clips oder URLs müssen erscheinen?

Leite die Ausrichtung aus dem Ziel ab: TikTok/Reels/Shorts → Hochformat; YouTube-Video oder ein explizit breiter X/LinkedIn-Post → Querformat. Ansonsten verwende die konfigurierte Standardeinstellung oder verwende eine der drei Fragen dafür.

Speichere das Ergebnis als video-brief.md neben video.json. Lese es bei späteren Durchläufen erneut und aktualisiere es, anstatt dieselben Fragen erneut zu stellen.

Standard-Workflow: Übergabe im Studio

1. Komponiere video.json aus dem Briefing und dem gebündelten Katalog. Überprüfe die genauen Schemas der in die engere Wahl gezogenen Vorlagen mit vanillasky templates <id> --json, bevor du ihre Variablen schreibst.

2. Löse Stock-Medien auf, wenn die Konfiguration mediaKeyword enthält:

   vanillasky resolve video.json
   

   Dies wählt ein Pexels-Ergebnis aus und schreibt die exakte mediaUrl in die Konfiguration, wodurch Validierung und Neu-Renderings deterministisch werden. Falls kein Pexels-Key verfügbar ist, verwende bereitgestellte Medien, eine direkte URL oder mediaType: "gradient" stattdessen. Verlasse dich nicht auf eine Suche zur Renderzeit, da dies der Übergabestatus ist.

3. Validiere und behebe jeden Fehler und jede Warnung:

   vanillasky validate video.json
   

   Das format der Konfiguration wählt den richtigen Slot-Vertrag; verwende nicht fest --format launch für jedes Video. Behandle Warnungen als zu lösende Aufgaben, nicht als Dekoration, und beschreibe die Validierung niemals als sauber, solange noch welche vorhanden sind.

4. Überprüfe einen Kontaktbogen:

   vanillasky render video.json --sheet --out ./sheet
   

   Öffne sheet/sheet.png und überprüfe die einzelnen Frames bei Bedarf. Stelle sicher, dass du sheet/sheet.png tatsächlich öffnest; die Existenz der Datei ist keine Überprüfung. Überprüfe auf Textüberlauf, unleserliche Schrift, nicht gesetzte/standardmäßig aussehende Werte, ungenutzte Assets, visuelle Wiederholungen und kritische Inhalte außerhalb der mittleren 75 % des Frames. Wiederhole nach jeder visuellen Änderung das Auflösen (bei Bedarf), die Validierung und den Kontaktbogen.

5. Übergabe im Studio:

   vanillasky studio video.json
   

   Das Studio folgt der Datei live. Bearbeite die Konfiguration weiter, während der Benutzer sie überprüft; seine ungespeicherten Änderungen erscheinen als Konflikt, anstatt überschrieben zu werden. Der Benutzer exportiert das MP4 aus dem Studio, wenn er zufrieden ist.

   Wenn der falsche Browser geöffnet wird, verwende --browser "Google Chrome" oder hinterlege den Browser dauerhaft in ~/.vanillasky/config.json. Verwende --no-open in einer Remote-Shell.

Rendere standardmäßig kein vollständiges MP4. Rendere es nur dann selbst, wenn der Benutzer explizit nach der Datei fragt oder wenn das Studio nicht verwendet werden kann (CI/headless):

vanillasky render video.json --open

Für diesen Fall überwache das Ergebnis und lies das Abschlussbanner: Bestätige die Gesamtlänge, Audioabdeckung, Ausrichtung und Laufruhe des Materials. Füge die Watch- und Studio-Links aus dem Abschlussblock hinzu. vanillasky link video.json gibt sie erneut aus, ohne zu rendern.

Komponiere den Standardpfad

Beginne mit dieser Form und verwende dann die genauen Schemas des Katalogs:

{
  "format": "launch",
  "orientation": "portrait",
  "style": {
    "font": "Inter",
    "preset": "bold",
    "brandKit": { "accent": "#6D5EF8", "secondary": "#F8B45E" }
  },
  "audio": { "trackId": "<from vanillasky tracks>" },
  "scenes": [
    {
      "id": "s0",
      "templateId": "media",
      "variables": { "texts": "Ship it today", "mediaType": "gradient" },
      "timing": { "fixedDuration": 3 }
    }
  ]
}

• brandKit gehört in style; wähle einen Stil-Preset bewusst.
• textArchetype und backgroundEffect sind Szenenfelder, keine Variablen.
• timing.fixedDuration legt die Länge einer eigenständigen Szene fest. Explizite Zeitpläne verwenden aufeinanderfolgende startTime + endTime; timing.duration ist kein Feld.
• Verwende vanillasky tracks, um Musik nach Stimmung und Energie auszuwählen. Stille ist gültig, aber für Social Videos normalerweise schwach.
• Bevorzuge eine echte HTTPS-URL oder einen lokalen Pfad für Medien. Base64-Medien machen Freigabelinks zu groß, und mediaKeyword-Ergebnisse müssen für deterministische Neu-Renderings auf mediaUrl festgelegt werden.

Lies references/config.md, wenn die Konfiguration Branding, Medienauflösung, explizites Timing, FPS-Anpassung oder Linkverhalten benötigt.

Wähle das Format nach der Geschichte

Format	Geschichtenform	Typische Länge
launch	Rahmung → Verständnis → Beweis	3–8 Szenen, meist 5
review	Zitat → Zuordnung → Ergebnis	4–7 Szenen, meist 5
milestone	Zahl → Kontext → Dankbarkeit	3–6 Szenen, meist 4
update	Änderung → Demonstration → Nutzen	4–7 Szenen, meist 5

Der Validator erzwingt Szenenanzahlen, verbotene Hooks, Platzierung des Abschlusses und Adjazenzregeln. references/formats.md enthält den generierten Vertrag. Deine Aufgabe ist das Urteilsvermögen, das der Validator nicht leisten kann.

Kreative Qualitätssicherung

Wahrheit und Assets

• Ersetze jeden Vorlagen-Standardwert mit briefingspezifischem Inhalt. Versende niemals Platzhalter-Statistiken wie 10K, 99.9% oder <50ms.
• Verwende jeden bereitgestellten Screenshot, der wichtig ist. Eine echte Produktoberfläche schlägt ein synthetisches Terminal, einen Editor, ein Telefon oder einen Browser, der dasselbe zeigt.
• Ordne Hochformat-Screenshots Telefon-Mockups und Querformat-Screenshots Browser-Mockups zu.

Geschichte

• Der Hook erzeugt Spannung oder Neugier; er gibt die Auflösung nicht preis.
• Füge mindestens einen erklärenden Körper ein, der das konkrete Produkt, die Zielgruppe oder das Ergebnis benennt. Benachrichtigungen, Anrufe, Tweets und Zahlen können einrahmen oder beweisen, können aber das Produkt allein nicht erklären.
• Der Abschluss ist eine Adresse – Marke, URL oder Handlungsaufforderung –, keine Wiederholung des Beweises.

Abwechslung und Tempo

• Mach nicht jeden Körper zu einer Karte. Verwende mindestens zwei nicht-kartengeführte Register.
• Ein einfacher Satz auf einem einfarbigen Verlauf ist ein Fallback, nicht automatisch ein starker Hook. Bevorzuge ein im Briefing verankertes visuelles Mechanismus – eine Benachrichtigung für einen Alert, Terminal/Editor für einen Entwickler-Workflow, Chat für ein Gespräch, Gerät oder Browser für eine bereitgestellte Produktoberfläche. Selbst ein bewusst minimales Video braucht eine greifbare visuelle Idee; minimal bedeutet weniger Elemente, nicht denselben Verlauf und dieselbe Typografie in jeder Szene.
• Eine kohärente Palette ist keine Szenenvielfalt. Drei oder mehr Szenenreihen mit demselben flachen Hintergrund bestehen diese Hürde nicht, selbst wenn ihr Typ-Layout unterschiedlich ist. Ändere mindestens ein Register mit einem verankerten Asset, Stock-Hintergrund, einer Vorlage oder einem zurückhaltenden Effekt. Wenn das Briefing zu wenig genehmigten Text oder Beweise enthält, um viele unterschiedliche Szenen zu unterstützen, verwende das kürzeste gültige Format anstatt es zu wiederholen.
• Gib Filmmaterial mindestens 3 Sekunden, es sei denn, es ist bewusst eine kurze Überleitung. Variiere die Hintergrundbewegung, anstatt einen Effekt überall anzuwenden.
• Eine verlaufsbasierte Medienszene sollte ein bewusster Markenbeat sein, kein Fallback, der gewählt wurde, weil Stock oder bereitgestellte Medien unpraktisch waren.
• Überprüfe, was tatsächlich erscheint: zeitlich begrenzte Vorlagen können spätere Elemente auslassen, selbst wenn die Konfiguration sie enthält.

Text

• Hook: maximal 7 Wörter. CTA: maximal 4 Wörter, vorzugsweise ein Befehl.
• Bewahre jeden benutzergenehmigten Slogan oder jedes Zitat in mindestens einer Szene unverändert. Verwandle eine genehmigte Zeile nicht in mehrere pseudo-unterschiedliche Szenen, indem du ihre Fragmente separat zeigst; lass den visuellen Fortschritt die anderen Beats tragen.
• Vermeide Listen mit drei generischen Nomen, Kategorien oder Verben. Rhythmus braucht Spannung, Fortschritt oder eine Wendung – nicht drei Synonyme.
• Halte zusammengehörenden Text innerhalb eines nowrap-Spans; verlasse dich niemals auf NBSP für den SVG-Export.

Eskaliere nur, wenn Vorlagen versagen

Verwende die niedrigste Stufe, die das Briefing ausdrückt:

1. Vorlage mit zweckgeschriebenem Text.
2. Vorlage mit angepassten Variablen.
3. Ausgeworfene/benutzerdefinierte Szene basierend auf einem Registry-Element.
4. Benutzerdefinierte Szene, komponiert aus Sandbox-Szenenelementen.

Der Standardpfad endet auf Stufe 2. Bevor du Stufe 3 oder 4 verwendest, lies references/custom-scenes.md, references/libraries.md, references/motion.md und references/visual-rules.md. Verwende vanillasky scope und die generierte references/motion-api.md, anstatt APIs zu erfinden.

Referenz-Router

• references/config.md – Timing, Styling, Branding, Medien, Audio, FPS, DESIGN.md und Link-Verhalten.
• references/formats.md – Generierte Slot-Verträge und Vorlagenkategorien.
• references/custom-scenes.md – Auswurf, Herkunft, Sandbox-Vertrag und Validierungsregeln.
• references/libraries.md – Generierte Fünf-Bibliotheken-Karte, Zielgruppen-Hinweise, Abhängigkeiten, Installationsziele und genaue Exportgruppen.
• references/motion.md – Choreografie, Lesezeit, Fokus-Hierarchie und Schnittkontinuität.
• references/motion-api.md – Generierte Funktionen, Federn und Easing-Namen, die für benutzerdefinierte Szenen verfügbar sind.
• references/visual-rules.md – Typografie, Ausrichtungslayout, Farbe, Licht und Komposition für benutzerdefinierte Szenen.