Communitygithub.com

Sma1lboy/rove

Direction créative non-animée pour les vidéos HyperFrames. Utilisez-le pour la gestion des spécifications de design (frame.md / design.md), les palettes, la typographie, la planification des battements, les motifs de composition et les décisions de marque/style. Pour les motifs de mouvement atomiques et les plans de scène, utilisez `hyperframes-motion`.

Qu'est-ce que rove ?

Ce skill fournit une direction créative complète pour les vidéos HyperFrames, en se concentrant sur les aspects non-animés tels que la palette de couleurs, la typographie, le rythme et la composition. Il est conçu pour être utilisé après avoir mis en place le contrat technique avec `/hyperframes/core`, et évite intentionnellement toute animation, qui est gérée par le skill `hyperframes-motion`. L'utilisateur commence par lire une spécification de design (frame.md, design.md, ou DESIGN.md) pour établir la vérité de la marque via le frontmatter. En l'absence de spécification, il peut choisir parmi des préréglages de cadre prêts à l'emploi, des styles nommés, ou les valeurs par défaut rapides de la maison. Le skill inclut un routage détaillé via des fichiers de référence pour des sujets comme les motifs de composition, la direction des battements, et les vérifications de conformité après rédaction. Il prend en charge les scripts pour les rapports de contraste et le chargement de packages, et insiste sur la lecture de deux références clés—`house-style.md` et `video-composition.md`—pour éviter les résultats web génériques.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Sma1lboy/rove/tree/HEAD/.claude/skills/hyperframes-design
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Conception HyperFrames

Direction de la marque, du rythme, du style et de la composition. À utiliser après la mise en place du contrat technique de /hyperframes/core.

Pour les motifs de mouvement, les plans de scène, les transitions et les effets de marqueur CSS, utilisez hyperframes-motion — ce skill est intentionnellement non-animé.

Lisez ces deux EN PREMIER pour toute composition non triviale — ils remplacent les instincts web :

  • references/house-style.md — « interpréter la consigne, générer du contenu réel », la liste des paresseux par défaut, et la recette des couches avant-plan/arrière-plan. C'est ce qui transforme un restyle littéral en un concept.
  • references/video-composition.md — densité du média vidéo, échelle, métadonnées de premier plan (le détail « produit, pas généré » : barres de données, repères d'enregistrement, affichages à chasse fixe, 8-10 éléments/scène).

Sauter ces fichiers est la plus grande cause unique de sortie générique, semblable à une page web. Ils ne sont pas des lignes optionnelles dans la table de routage ci-dessous — pour tout ce qui dépasse une modification d'une ligne, ouvrez les deux avant de choisir des couleurs ou d'écrire du HTML.

Flux de travail

  1. Si un projet a une spécification de design, lisez-la en premier et traitez ses jetons de frontmatter comme la vérité de la marque (couleurs, polices, espacement, ton, contraintes). Le fichier à lire (priorité frame.md → design.md → DESIGN.md) et la manière de l'analyser (frontmatter = normatif, prose = contexte) sont définis une fois dans references/design-spec.md — résolvez et chargez conformément à ce document.
  2. Si aucune spécification de design n'existe et que l'utilisateur demande une direction visuelle, choisissez une route :
    • Préréglage de cadre prêt à l'emploi (optionnel) → frame-presets/ (adoptez un FRAME.md comme frame.md ; voir references/design-spec.md)
    • Style ou ambiance nommé → references/visual-styles.md
    • Valeurs par défaut rapides → references/house-style.md
  3. Pour un travail multi-scène, planifiez les battements et le rythme avant d'écrire le HTML → references/beat-direction.md. Pour les transitions de scène, passez à hyperframes-motion/transitions/.
  4. Pour un travail lourd en mouvement, lisez references/motion-principles.md (garde-fous de haut niveau), puis allez dans hyperframes-motion pour les règles atomiques.

Routage

SujetLire
Adopter un préréglage de cadre prêt à l'emploi comme frame.md (optionnel)frame-presets/ · references/design-spec.md
Palettes par défaut, mouvement, typographie, paresseux par défaut à remettre en questionreferences/house-style.md
Préréglages de style nommés, routage ambiance-à-stylereferences/visual-styles.md
Jetons de couleur spécifiques à une palettepalettes/*.md
Motifs de composition — PiP, texte-derrière-sujet, carte de titre, diaporamareferences/composition-patterns.md
Présentation de statistiques / infographiesreferences/data-in-motion.md
Expansion structurée pour les consignes ouvertesreferences/prompt-expansion.md
Densité du média vidéo, échelle, couleur, composition de cadrereferences/video-composition.md
Direction par battement, planification du rythme, chronométrage des transitionsreferences/beat-direction.md
Vérification de la conformité après rédaction (couleurs, type, coins, espacement, profondeur)references/design-adherence.md
Garde-fous de mouvement de haut niveau et règles de qualité GSAPreferences/motion-principles.md
Sélection de polices, associations, garde-fous de type vidéo renduereferences/typography.md

Scripts

  • scripts/contrast-report.mjs — inspecter les avertissements de contraste à partir des cadres rendus.
  • scripts/package-loader.mjs — script de support pour les outils créatifs groupés.

Exécutez depuis la racine du dépôt avec des chemins explicites.

L'analyse d'animation (animation-map.mjs) se trouve dans hyperframes-motion/scripts/.

Limites

  • Ne remplacez pas les règles techniques de /hyperframes/core.
  • N'exigez pas un système de design pour une composition technique minimale.
  • N'ajoutez pas de scènes, légendes ou transitions supplémentaires sauf si la demande le nécessite ou si vous proposez d'abord l'expansion.
  • Gardez les références de recettes spécifiques à la tâche ; ne lisez pas chaque référence pour des modifications simples.

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

Skills associés

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