Communitygithub.com

Sma1lboy/rove

Nicht-animierte kreative Regie für HyperFrames-Videos. Verwenden für Design-Spezifikationen (frame.md / design.md), Paletten, Typografie, Beat-Planung, Kompositionsmuster und Marken-/Stilentscheidungen. Für atomare Bewegungsmuster und Szenen-Blaupausen 'hyperframes-motion' verwenden.

Was ist rove?

Dieser Skill ist der zentrale Anlaufpunkt für das visuelle Design von HyperFrames-Videos, wenn es um nicht-animierte kreative Entscheidungen geht. Er deckt alles von Farbpaletten und Typografie über Beat-Planung bis hin zu Kompositionsmustern und Markenrichtlinien ab. Der Skill liest Design-Spezifikationen (frame.md, design.md), wendet vordefinierte Stil-Vorlagen an und stellt sicher, dass die Ausgabe den spezifischen Video-Kompositionsregeln (Dichte, Maßstab, Vordergrund-Metadaten) folgt. Für Bewegungsmuster und Szenenübergänge ist der Skill 'hyperframes-motion' zuständig. Er wird von Claude Code oder ähnlichen KI-Agenten implementiert, die auf die im Skill enthaltenen Referenzdokumente und Skripte zugreifen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Sma1lboy/rove/tree/HEAD/.claude/skills/hyperframes-design
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 Design

Marken-, Takt-, Stil- und Kompositionsrichtung. Verwenden, nachdem der technische Vertrag von /hyperframes/core abgeschlossen ist.

Für Bewegungsmuster, Szenen-Blaupausen, Übergänge und CSS-Markereffekte hyperframes-motion verwenden – dieser Skill ist bewusst nicht-animiert.

Diese beiden zuerst lesen JEDE nicht-triviale Komposition – sie überschreiben Web-Instinkte:

  • references/house-style.md — "interpretiere den Prompt, generiere echten Inhalt", die träge Standard-Liste und das Hintergrund-/Vordergrund-Ebenen-Rezept. Das verwandelt eine bloße Umgestaltung in ein Konzept.
  • references/video-composition.md — Video-Medium-Dichte, Maßstab, Vordergrund-Metadaten (die "produziert, nicht generiert"-Detailierung: Datenbalken, Registrierungsmarken, Monospace-Ausgaben, 8-10 Elemente/Szene).

Diese zu überspringen ist der häufigste Grund für generische, webseitenartige Ausgaben. Sie sind keine optionalen Zeilen in der Routing-Tabelle unten – für alles, was über eine einzeilige Bearbeitung hinausgeht, beide öffnen, bevor Sie Farben wählen oder HTML schreiben.

Arbeitsablauf

  1. Wenn ein Projekt eine Design-Spezifikation hat, lesen Sie sie zuerst und behandeln Sie ihre Frontmatter-Token als Markenwahrheit (Farben, Schriftarten, Abstände, Ton, Einschränkungen). Welche Datei zu lesen ist (Rangfolge frame.md → design.md → DESIGN.md) und wie sie zu parsen ist (Frontmatter = normativ, Prosa = Kontext) ist einmal in references/design-spec.md definiert – gemäß diesem Dokument auflösen und laden.
  2. Wenn keine Design-Spezifikation existiert und der Benutzer nach visueller Richtung fragt, wählen Sie einen Pfad:
    • Vorgefertigte Frame-Voreinstellung (optional) → frame-presets/ (eine FRAME.md als frame.md übernehmen; siehe references/design-spec.md)
    • Benannter Stil oder Stimmung → references/visual-styles.md
    • Schnelle Standardeinstellungen → references/house-style.md
  3. Für Arbeiten mit mehreren Szenen Beats und Rhythmus planen, bevor HTML geschrieben wird → references/beat-direction.md. Für Szenenübergänge zu hyperframes-motion/transitions/ springen.
  4. Für bewegungsintensive Arbeiten references/motion-principles.md lesen (übergeordnete Leitplanken), dann zu hyperframes-motion für atomare Regeln gehen.

Routing

ThemaLesen
Eine vorgefertigte Frame-Voreinstellung als frame.md übernehmen (optional)frame-presets/ · references/design-spec.md
Standard-Paletten, Bewegung, Typografie, träge Standardeinstellungen hinterfragenreferences/house-style.md
Benannte Stil-Voreinstellungen, Stimmungs-zu-Stil-Routingreferences/visual-styles.md
Palettenspezifische Farb-Tokenpalettes/*.md
Kompositionsmuster – PiP, Text-hinter-Subjekt, Titelcard, Slideshowreferences/composition-patterns.md
Statistiken / Infografik-Präsentationreferences/data-in-motion.md
Strukturierte Erweiterung für offene Promptsreferences/prompt-expansion.md
Video-Medium-Dichte, Maßstab, Farbe, Frame-Kompositionreferences/video-composition.md
Pro-Beat-Richtung, Rhythmusplanung, Übergangs-Timingreferences/beat-direction.md
Post-Authoring-Spezifikationsprüfung (Farben, Typ, Ecken, Abstände, Tiefe)references/design-adherence.md
Übergeordnete Bewegungsleitplanken und GSAP-Qualitätsregelnreferences/motion-principles.md
Schriftartauswahl, Paarungen, gerenderte-Video-Typ-Leitplankenreferences/typography.md

Skripte

  • scripts/contrast-report.mjs – Kontrastwarnungen aus gerenderten Frames prüfen.
  • scripts/package-loader.mjs – Support-Skript für gebündelte kreative Werkzeuge.

Vom Repository-Stammverzeichnis mit expliziten Pfaden ausführen.

Animationsanalyse (animation-map.mjs) befindet sich in hyperframes-motion/scripts/.

Grenzen

  • Nicht die technischen Regeln von /hyperframes/core überschreiben.
  • Kein Designsystem für eine minimale technische Komposition verlangen.
  • Keine zusätzlichen Szenen, Untertitel oder Übergänge hinzufügen, es sei denn, die Anfrage verlangt danach oder Sie schlagen die Erweiterung zuerst vor.
  • Rezeptreferenzen aufgabenspezifisch halten; nicht jedes Referenzdokument für einfache Bearbeitungen lesen.

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

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=\"clip\"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

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