Plugin-Installation: Führen Sie vor dem Einrichten oder Aktualisieren die Plugin-Ausführungsregeln aus, wenn sich diese Skill innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen gelten die unten stehenden Aktualisierungshinweise.
HyperFrames Creative
Marke, Tempo, Stil, Erzählung und Kompositionsrichtung. Verwenden Sie dies, nachdem der technische Auftrag von hyperframes-core erteilt wurde.
Verwenden Sie für Bewegungsmuster, Szenenbaupläne, Übergänge und CSS-Markereffekte hyperframes-animation – diese Skill ist bewusst nicht-animatorisch.
Lesen Sie diese beiden ZUERST bei jeder nicht-trivialen Komposition – sie überschreiben Web-Instinkte:
references/house-style.md– „Interpretiere den Prompt, generiere echten Inhalt", die Liste der faulen Standardeinstellungen und das Rezept für Hintergrund-/Vordergrund-Schichten. Dies macht aus einer buchstäblichen Umgestaltung ein Konzept.references/video-composition.md– Maßstab, Tiefe und Vordergrunddetails im Video-Medium. Es erklärt, wie man leere Webseiten-Layouts vermeidet, ohne eine universelle Elementanzahl vorzugeben.Diese zu überspringen ist der häufigste Grund für generische, webseitenartige Ausgaben. Sie sind keine optionalen Zeilen in der unten stehenden Routing-Tabelle – öffnen Sie für alles, was über eine einzeilige Bearbeitung hinausgeht, beide, bevor Sie Farben wählen oder HTML schreiben.
Arbeitsablauf
- Wenn ein Projekt eine Design-Spezifikation hat, lesen Sie sie zuerst und behandeln Sie ihre Frontmatter-Token als Markenwahrheit (Farben, Schriften, Abstände, Ton, Einschränkungen). Welche Datei gelesen werden soll (Priorität
frame.md→design.md→DESIGN.md) und wie sie zu parsen ist (Frontmatter = normativ, Prosa = Kontext) wird einmalig inreferences/design-spec.mddefiniert – suchen und laden Sie entsprechend diesem Dokument. - Wenn keine Design-Spezifikation existiert und der Benutzer nach visueller Richtung fragt, wählen Sie einen Pfad:
- Vorgefertigtes Frame-Preset (optional) →
frame-presets/(übernehmen Sie eineFRAME.mdalsframe.md; siehereferences/design-spec.md) - Benannter Stil oder Stimmung →
references/visual-styles.md - Schnelle Standardeinstellungen →
references/house-style.md - Interaktive Auswahl →
references/design-picker.md
- Vorgefertigtes Frame-Preset (optional) →
- Bei Multi-Szenen-Arbeiten planen Sie Beats und Rhythmus, bevor Sie HTML schreiben →
references/beat-direction.md. Für Szenenübergänge springen Sie zuhyperframes-animation/transitions/. - Bei bewegungsintensiven Arbeiten lesen Sie
references/motion-principles.md(Leitplanken auf hoher Ebene), gehen Sie dann zuhyperframes-animationfür atomare Regeln.
Routing
| Thema | Lesen |
|---|---|
Übernehmen Sie ein vorgefertigtes Frame-Preset als frame.md (optional) | frame-presets/ · references/design-spec.md |
| Standardpaletten, Bewegung, Typografie, faule Standardeinstellungen hinterfragen | references/house-style.md |
| Benannte Stil-Presets, Stimmung-zu-Stil-Routing | references/visual-styles.md |
| Palettenspezifische Farb-Token | palettes/*.md |
| Kompositionsmuster – PiP, Text hinter Motiv, Titelcard, Diashow | references/composition-patterns.md |
| Statistiken / Infografik-Präsentation | references/data-in-motion.md |
| Strukturierte Erweiterung für offene Prompts | references/prompt-expansion.md |
| Dichte, Maßstab, Farbe, Rahmenkomposition im Video-Medium | references/video-composition.md |
| Beat-für-Beat-Richtung, Rhythmusplanung, Übergangs-Timing | references/beat-direction.md |
| Spezifikationsprüfung nach der Erstellung (Farben, Schriftart, Ecken, Abstände, Tiefe) | references/design-adherence.md |
| Bewegungsleitplanken auf hoher Ebene und GSAP-Qualitätsregeln | references/motion-principles.md |
| Schriftauswahl, Kombinationen, Typografie-Leitplanken im gerenderten Video | references/typography.md |
| Geschichtsdoktrin – Haken-Sprache, Wert vor Beweis, Storyboard als Vorschlag, quellennachvollziehbare Visuals | references/story-spine.md |
| Skript-Tempo, Ton, Eröffnungen, Zahlenaussprache | references/narration.md |
| Vorberechnete Audio-Bänder, auf Bewegung abgebildet | references/audio-reactive.md |
Skripte
scripts/contrast-report.mjs– Kontrastwarnungen aus gerenderten Frames prüfen.scripts/extract-audio-data.py– Audio-Bänder für audiovisuelle Kompositionen vorab extrahieren.scripts/package-loader.mjs– Hilfsskript für gebündelte kreative Werkzeuge.
contrast-report.mjs löst Hilfspakete zuerst aus dem aktuellen Projekt auf und kann dann die gebündelte HyperFrames-Paketversion bootstrappen. Setzen Sie HYPERFRAMES_SKILL_PKG_VERSION=<version> nur, wenn Sie die Skill außerhalb der gebündelten CLI/Skill-Installation ausführen und Sie diese Bootstrap-Version explizit festlegen müssen.
Führen Sie die Skripte vom Repository-Stammverzeichnis mit expliziten Pfaden aus, zum Beispiel:
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
Die Animationsanalyse (animation-map.mjs) befindet sich in hyperframes-animation/scripts/.
Grenzen
- Überschreiben Sie keine technischen Regeln von
hyperframes-core. - Verlangen Sie kein Designsystem für eine minimale technische Komposition.
- Fügen Sie keine zusätzlichen Szenen, Erzählungen, Musik, Untertitel oder Übergänge hinzu, es sei denn, die Anfrage fordert sie an oder Sie schlagen zuerst die Erweiterung vor.
- Halten Sie Rezeptverweise aufgabenspezifisch; lesen Sie nicht jeden Verweis für einfache Bearbeitungen.