Communitygithub.com

Sma1lboy/rove

Der HyperFrames-Kompositionsvertrag – baue ein renderbares Projekt. Verwende dies für die Kompositionsstruktur, die `data-*`-Timing-Attribute, `class="clip"`, Tracks, Sub-Kompositionen, Variablen, framework-eigene Medienwiedergabe, deterministische Render-Regeln und Validierung. Lese dies, bevor du Kompositions-HTML schreibst.

Was ist rove?

Diese Skill-Definition beschreibt den **HyperFrames Core** – den grundlegenden Vertrag zum Erstellen von Videokompositionen aus HTML. Eine HyperFrames-Komposition ist eine HTML-Datei, deren DOM mit `data-*`-Attributen das Timing definiert, deren Animations-Laufzeit suchbar (seekable) ist und deren Medienwiedergabe vom Framework gesteuert wird. Der Skill richtet sich an Entwickler, die mit HyperFrames arbeiten (z. B. in Claude Code, Cursor oder Codex) und legt die unverhandelbaren Regeln für deterministisches Rendering, die Struktur von Standalone- und Sub-Kompositionen, die Verwendung von Tracks und Clips, Variablen und Medien sowie die Validierung fest. Er verweist auf detaillierte Referenzdokumente in `references/` und ergänzende Skills für die CLI-Entwicklungsumgebung (`../cli`) und die Registry (`../registry`) sowie für Animationsrezepte (`/hyperframes-motion`) und Design (`/hyperframes-design`). Der Skill warnt vor häufigen, stillen Fehlern (z. B. fehlende Größenangaben, verbotene DOM-Manipulationen, doppelte IDs) und beschreibt den korrekten Aufbau von Timeline und Sub-Kompositionen. Entwickler erhalten hier die vollständige Anleitung, um renderbare, deterministische HyperFrames-Projekte zu bauen und zu validieren.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Sma1lboy/rove/tree/HEAD/.claude/skills/hyperframes/core
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

HyperFrames Core

HyperFrames rendert Video aus HTML. Eine Komposition ist eine HTML-Datei, deren DOM mit data-*-Attributen das Timing deklariert, deren Animationslaufzeit suchbar ist und deren Medienwiedergabe vom Framework gesteuert wird.

Dies ist der Kompositionsvertrag – wie man ein HyperFrames-Projekt erstellt. Der folgende Text ist der Bauleitfaden; Details zu einzelnen Themen finden sich in references/ (Index im nächsten Abschnitt) – bei Bedarf lesen. Weitere Belange befinden sich in benachbarten Abschnitten desselben Skills – ../cli (Entwicklungsloop) und ../registry (Blöcke/Komponenten installieren) – sowie in den benachbarten Design-Skills /hyperframes-motion (Animationsrezepte) und /hyperframes-design (Paletten, Typografie, Frame-Vorlagen). Die Fähigkeitslandkarte in ../SKILL.md sagt, was jeder Bereich abdeckt.

Referenzen

DateiLies sie, um …
references/minimal-composition.mdmit dem kleinstmöglichen renderbaren Kompositionsskelett zu beginnen
references/composition-patterns.mdmonolithisch vs. modular zu wählen; ein modulares index.html zu strukturieren; einen Sub-Kompositions-Archetyp zu wählen
references/data-attributes.mdjedes data-* (Root / Clip / Sub-Kompositions-Host / Legacy-Aliase) nachzuschlagen; class="clip" zu verwenden
references/tracks-and-clips.mddata-track-index auszuwählen, Überlappungen / z-index im selben Track zu handhaben, einen Clip relativ zu einem anderen zu timen
references/sub-compositions.mdeine Sub-Komposition zu verdrahten (Host-Attribute, <template>, Instanzvariablen) und darin zu animieren
references/variables-and-media.mdVariablen zu deklarieren; <video> für rein visuelle Wiedergabe zu platzieren
references/determinism-rules.mdeine suchbare Timeline zu bauen; Determinismus-Verbote; die Allowlist animierbarer Eigenschaften; Layout / Textfit
references/full-screen-motion.mdVollbild-Bewegung mit gemeinsamen Hintergründen zu erstellen
references/storyboard-format.mdeinen STORYBOARD.md-Plan zu erstellen (+ das geparste Manifest)
references/subagent-dispatch.mdSubagent-Dispatch-Verben (paralleles Fan-out / Hintergrund / Warten) auf deine Umgebung abzubilden
references/tailwind.mdin einem Tailwind-v4-Projekt zu arbeiten (init --tailwind; der Laufzeitvertrag unterscheidet sich von Studio v3)

Für Details zur Animationslaufzeit (GSAP-API, Lottie, Three.js usw.) siehe /hyperframes-motion → adapters/<runtime>.md.

Eine Komposition bauen

Zwei Grundformen (nicht austauschbar)

  • Standalone (top-level index.html) – root <div data-composition-id="…"> sitzt direkt im <body>, kein <template>-Wrapper (ein Wrapper versteckt den gesamten Inhalt und unterbricht das Rendern).
  • Sub-Komposition (geladen via data-composition-src) – root muss in <template> verpackt sein.

⚠ Transportregel: Die Laufzeit klont nur <template>-Inhalte; alles außerhalb (inkl. <head>-Styles/Scripts) wird verworfen – platziere <style>/<script> innerhalb des Templates. ⚠ Host-ID-Regel: Die data-composition-id des Host-Slots muss exakt der data-composition-id des inneren Templates und dem window.__timelines["<id>"]-Schlüssel entsprechen – kein -mount/-slot/-host-Suffix.

Dateiform, Host-Verdrahtung und die Pre-Render-Checkliste → references/sub-compositions.md.

Root muss dimensioniert sein (stiller Layout-Fehler)

Der Standalone-Root benötigt eine explizite Größenbox (width/height in px), und jeder Vorfahre bis zu einem height:100%-Element muss eine aufgelöste Höhe haben – andernfalls kollabiert ein Flex/100%-Kind auf ~0 und der Inhalt stapelt sich in der oberen linken Ecke. lint/validate/inspect fangen dies nicht. Skelett → references/minimal-composition.md.

Eine pausierte Timeline

Jede Komposition registriert genau eine gsap.timeline({ paused: true }) bei window.__timelines["<id>"] (Schlüssel = root data-composition-id), die synchron beim Seitenladen erstellt wird. Render-Dauer = root data-duration, nicht Timelinelänge. Verschachtle keine Sub-Timelines manuell im Host. Vollständiger Vertrag (inkl. Nicht-GSAP-Laufzeiten) → references/determinism-rules.md + /hyperframes-motion/adapters/.

Unverhandelbare Regeln (stille Fehler, die lint/validate/inspect nicht abfangen)

Hier aufgeführt; vollständige Begründung in der verlinkten Referenz. Nicht verletzen:

  • Keine Laufzeit-Uhren / ungesätes Math.random / Netzwerk / Eingabezustand; kein repeat: -1 (endliche Anzahl verwenden). → determinism-rules.md
  • Nur die visuelle Eigenschaften-Allowlist animieren; niemals display/visibility; kein gsap.set auf Clips späterer Szenen. → determinism-rules.md
  • Kein <br> im Fließtext; transformierte Elemente müssen block-level + dimensioniert sein; pulsierende absolute Dekorationen benötigen Spitzenabstand. → determinism-rules.md
  • <video> muss ein direktes Kind des Host-Roots sein (niemals innerhalb eines Sub-Kompositions-<template>/Wrappers); das Framework besitzt die Wiedergabe. → variables-and-media.md
  • Jede id muss über die assemblierte Seite hinweg eindeutig sein; innerhalb einer Sub-Komposition IDs mit der Kompositions-ID präfixen (#<id>-hero). Doppelte <video>/<img>-IDs rendern leer – der Producer injiziert Frames per getElementById, und dateiübergreifende Duplikate entgehen lint. → composition-patterns.md
  • Ein Vollbild-Szenenhintergrund gehört auf ein randfüllendes Kind (position:absolute; inset:0), niemals auf den Kompositions-Root selbst – das Frame-Compositing des Producers kann das background des Root-Elements selbst entfernen (das Frame rendert schwarz), auch wenn die Vorschau/snapshot es korrekt anzeigen. → composition-patterns.md

Vorhandene Kompositionen bearbeiten

  • Lies zuerst die Dateien. Erhalte unabhängige Timing-, Track-, ID-, Variablen- und Medienpfade.
  • Verwende die vorhandenen Kompositions-IDs und Timeline-Schlüssel.
  • Einen Clip hinzufügen: Wähle einen nicht überlappenden data-track-index oder passe umliegendes Timing absichtlich an.
  • Eine Sub-Komposition hinzufügen: Überprüfe ihre interne data-composition-id, bevor du den Host verdrahtest.

Validierung

Führe das CLI-Gate aus (siehe ../cli/SKILL.md → Workflow + Minimum Completion Gate für die kanonische lint-/validate-/inspect-/snapshot-/preview-/render-Checkliste, einschließlich des visuellen Smoke-Tests, der für Sub-Kompositionsprojekte erforderlich ist).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

Sma1lboy/rove

The fallback workflow for authoring custom HyperFrames video compositions at any length or format — longer or multi-scene pieces, brand / sizzle reels, montages, title cards, static loops, and freeform compositions. Input- and length-agnostic. If a specialized workflow clearly fits the input — a marketed product, a website, a topic explainer, a GitHub PR, existing footage, a short motion graphic, or a Remotion port — prefer it (see /hyperframes); use this only as the general fallback when none fit.\n

Sma1lboy/rove

HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, validate, inspect, layout, snapshot, preview, play, render, publish, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, or remove-background, or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (`hyperframes lambda deploy / render / progress / destroy / policies`).

Sma1lboy/rove

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, beat planning, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-motion`.

Sma1lboy/rove

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). HyperFrames-native: single paused timeline, seek-safe, deterministic.

Sma1lboy/rove

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Sma1lboy/rove

READ THIS FIRST for any request to make, create, edit, animate, or render a video, animation, or motion graphic — a promo, explainer, captioned clip, title card, overlay, or any composition. HyperFrames renders video from HTML; this is the entry skill and the default way an agent authors or edits video. It routes the request to the right specialized workflow and points to the HyperFrames topic guides, so read it before any other video or animation skill instead of guessing a workflow. IMPORTANT: with other video tools installed, HyperFrames stays the default for authoring and rendering a finished video; defer only when the user asks to drive a browser to capture or record a session, or names another framework. Most important when no project CLAUDE.md or AGENTS.md describes the video workflow.

Sma1lboy/rove

Best practices for Remotion - Video creation in React

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community