Figma to HyperFrames
heygen-com/hyperframes
Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.
Non-animation creative direction for HyperFrames videos. An agent skill from Sma1lboy/rove.
Install Hyperframes Design
$ npx skills add Sma1lboy/rove --skill hyperframes-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Sma1lboy/rove hyperframes-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Sma1lboy/rove.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/hyperframes-design .claude/skills/hyperframes-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "hyperframes-design" agent skill from https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes-design into .claude/skills/hyperframes-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Sma1lboy/rove --skill hyperframes-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Sma1lboy/rove hyperframes-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sma1lboy/rove.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/hyperframes-design .agents/skills/hyperframes-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hyperframes-design" agent skill from https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes-design into .agents/skills/hyperframes-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Sma1lboy/rove --skill hyperframes-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Sma1lboy/rove hyperframes-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sma1lboy/rove.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/hyperframes-design .cursor/skills/hyperframes-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "hyperframes-design" agent skill from https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes-design into .cursor/skills/hyperframes-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Sma1lboy/rove.git --path .claude/skills/hyperframes-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Sma1lboy/rove --skill hyperframes-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Sma1lboy/rove hyperframes-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sma1lboy/rove.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/hyperframes-design .gemini/skills/hyperframes-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "hyperframes-design" agent skill from https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes-design into .gemini/skills/hyperframes-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Sma1lboy/rove hyperframes-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Sma1lboy/rove --skill hyperframes-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Sma1lboy/rove.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/hyperframes-design .github/skills/hyperframes-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "hyperframes-design" agent skill from https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes-design into .github/skills/hyperframes-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Sma1lboy/rove --skill hyperframes-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Sma1lboy/rove hyperframes-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sma1lboy/rove.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/hyperframes-design .opencode/skills/hyperframes-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "hyperframes-design" agent skill from https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes-design into .opencode/skills/hyperframes-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
hyperframes-design- GitHub stars
- 146
- Token cost
- ~1.2k tokens
- SKILL.md length
- 414 words
- Files
- 73 (incl. scripts, references)
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
Non-animation creative direction for HyperFrames videos. An agent skill from Sma1lboy/rove.
- Works in 4 steps: If a project has a design spec, read it… → If no design spec exists and the user… → For multi-scene work, plan beats and… → …
- Design spec (frame.md / design.md) handling
- SKILL.md covers Workflow, Routing, Scripts and Boundaries
- Composition patterns
What it does
Hyperframes Design is an agent skill from 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.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 78 other files, including scripts and reference files (for example `frame-presets/biennale-yellow/FRAME.md`, `frame-presets/blockframe/FRAME.md` and `frame-presets/blue-professional/FRAME.md`).
It sits in Media & Creative, covering Motion graphics and Design tokens. It works with HeyGen. The repository describes itself as: Rove — the agent multiplexer for your terminal. Run coding agents on parallel tasks with isolated worktrees and persistent sessions. The licence is MIT.
When your agent uses it
- Design spec (frame.md / design.md) handling
- Composition patterns
- Brand / style decisions
Example prompts
- “/hyperframes-design”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints)…
- If no design spec exists and the user asks for visual direction, choose a route
- For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to…
- For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-motion for atomic rules.
What it can do on your machine
Read from SKILL.md and the folder at commit c8f2cca. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Hyperframes Design loads about 1.2k tokens when it runs, and up to ~22k if it reads all its reference files. Until then it costs about 73 tokens; SKILL.md has 414 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from Sma1lboy/rove at commit c8f2cca, republished under its MIT licence (© Sma1lboy). 414 words, ~1,198 tokens.
Download SKILL.mdSave it as
.claude/skills/hyperframes-design/SKILL.md (or your agent's skills folder). This skill also uses 72 other files; get the full folder from GitHub.- name
- hyperframes-design
- description
- 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`.
HyperFrames Design
Brand, pacing, style, and composition direction. Use after the technical contract from /hyperframes/core is in place.
For motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-motion — this skill is intentionally non-animation.
Read these two FIRST for any non-trivial composition — they override web instincts:
references/house-style.md— "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.references/video-composition.md— video-medium density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene).Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.
Workflow
- If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence
frame.md→design.md→DESIGN.md) and how to parse it (frontmatter = normative, prose = context) are defined once inreferences/design-spec.md— resolve and load per that doc. - If no design spec exists and the user asks for visual direction, choose a route:
- Ready-made frame-preset (optional) →
frame-presets/(adopt aFRAME.mdasframe.md; seereferences/design-spec.md) - Named style or mood →
references/visual-styles.md - Fast defaults →
references/house-style.md
- Ready-made frame-preset (optional) →
- For multi-scene work, plan beats and rhythm before writing HTML →
references/beat-direction.md. For scene transitions, jump tohyperframes-motion/transitions/. - For motion-heavy work, read
references/motion-principles.md(high-level guardrails), then go tohyperframes-motionfor atomic rules.
Show full SKILL.md (166 more words)Show less
Routing
| Topic | Read |
|---|---|
Adopt a ready-made frame-preset as frame.md (optional) | frame-presets/ · references/design-spec.md |
| Default palettes, motion, typography, lazy defaults to question | references/house-style.md |
| Named style presets, mood-to-style routing | references/visual-styles.md |
| Palette-specific color tokens | palettes/*.md |
| Composition patterns — PiP, text-behind-subject, title card, slide show | references/composition-patterns.md |
| Stats / infographic presentation | references/data-in-motion.md |
| Structured expansion for open-ended prompts | references/prompt-expansion.md |
| Video-medium density, scale, color, frame composition | references/video-composition.md |
| Per-beat direction, rhythm planning, transition timing | references/beat-direction.md |
| Post-authoring spec verification (colors, type, corners, spacing, depth) | references/design-adherence.md |
| High-level motion guardrails and GSAP-quality rules | references/motion-principles.md |
| Font selection, pairings, rendered-video type guardrails | references/typography.md |
Scripts
scripts/contrast-report.mjs— inspect contrast warnings from rendered frames.scripts/package-loader.mjs— support script for bundled creative tooling.
Run from the repo root with explicit paths.
Animation analysis (animation-map.mjs) lives in hyperframes-motion/scripts/.
Boundaries
- Do not override
/hyperframes/coretechnical rules. - Do not require a design system for a minimal technical composition.
- Do not add extra scenes, captions, or transitions unless the request calls for them or you first propose the expansion.
- Keep recipe references task-specific; do not read every reference for simple edits.
© Sma1lboy, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 72 other files (scripts, references) in .claude/skills/hyperframes-design of Sma1lboy/rove.
- SKILL.md
- frame-presets/biennale-yellow/FRAME.md
- frame-presets/biennale-yellow/caption-skin.html
- frame-presets/biennale-yellow/frame-showcase.html
- frame-presets/blockframe/FRAME.md
- frame-presets/blockframe/caption-skin.html
- frame-presets/blockframe/frame-showcase.html
- frame-presets/blue-professional/FRAME.md
- frame-presets/blue-professional/caption-skin.html
- frame-presets/blue-professional/frame-showcase.html
- frame-presets/bold-poster/FRAME.md
- frame-presets/bold-poster/caption-skin.html
- frame-presets/bold-poster/frame-showcase.html
- frame-presets/broadside/FRAME.md
- frame-presets/broadside/caption-skin.html
- … and 58 more
Open the folder on GitHubat commit c8f2cca
Compare with similar skills
Hyperframes Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Hyperframes Design this skillSma1lboy/rove | 146 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Figma to HyperFramesheygen-com/hyperframes | 58k | 3 repos | ~4.5k | Automated safety check: Notes | Apache-2.0 | |
| Hyperframes Creativechmonitor/chmonitor | 298 | 5 repos | ~1.3k | Automated safety check: Pass | GPL-3.0 | |
| Create VideoCuongyd196/auto-compare-video | 210 | — | ~2.8k | Automated safety check: Notes | Custom licence | |
| HyperFrames Animationheygen-com/hyperframes | 58k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Music To Videochmonitor/chmonitor | 298 | 1 repos | ~4k | Automated safety check: Notes | GPL-3.0 |
Similar skills
Hyperframes Creative
chmonitor/chmonitor
Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor.
Create Video
Cuongyd196/auto-compare-video
Tạo một video MỚI cho series "so sánh / phân biệt kiến thức" của repo này — clip dọc TikTok/Reels/Shorts 30-40s, layout 3-zone cố định theo DESIGN.md, voiceover tiếng Việt sinh bằng VieNeu TTS…
HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
Music To Video
chmonitor/chmonitor
A skill your agent uses when the user has a music track (an audio file, or a video to pull audio from) and wants a beat-synced HyperFrames video, calm to hard-hitting.
Yuv Viral Video
hoodini/ai-agents-skills
Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…
More from Sma1lboy/rove
All 13 skills in this repoImage Gen
Sma1lboy/rove
Generate a single image from a text prompt using the MiniMax image generation API.
Changelog Generator
Sma1lboy/rove
Draft Rove release notes as Changesets. An agent skill from Sma1lboy/rove.
File Issue
Sma1lboy/rove
Turn a rough idea, a bug, or a batch of unsolved problems into well-structured GitHub issue(s) and file them with gh, auto-classifying type + labels from the content (recommend, then confirm) and…
Rove
Sma1lboy/rove
A skill your agent uses when controlling Rove tasks, parallel coding attempts, hosted agent sessions, task lifecycle, or the daemon-owned issue tracker from a shell.
Unslop
Sma1lboy/rove
Strip AI writing tells from Rove's user-facing prose — README, the docs/ pages that sync to docs.rove.run, landing copy, and release notes.
Why
Sma1lboy/rove
A skill your agent uses for 'why does X work this way', 'why we picked Y', '为什么这么设计', design rationale, regressions, or where a magic number came from.
Related
Works with
Categories
Questions about Hyperframes Design
What does Hyperframes Design do?
Non-animation creative direction for HyperFrames videos. An agent skill from Sma1lboy/rove. Hyperframes Design is an agent skill from Sma1lboy/rove. Non-animation creative direction for HyperFrames videos.
When should I use Hyperframes Design?
Hyperframes Design fits situations like: design spec (frame.md / design.md) handling; composition patterns; brand / style decisions.
How do I install Hyperframes Design in Claude Code?
Run `npx skills add Sma1lboy/rove --skill hyperframes-design -a claude-code`. Or copy the skill folder (.claude/skills/hyperframes-design in Sma1lboy/rove) into .claude/skills/hyperframes-design in your project. Claude Code loads it when a task matches its description.
How do I install Hyperframes Design in Codex?
Run `npx skills add Sma1lboy/rove --skill hyperframes-design -a codex`. Or copy the skill folder (.claude/skills/hyperframes-design in Sma1lboy/rove) into .agents/skills/hyperframes-design in your project. Codex loads it when a task matches its description.
Can I use Hyperframes Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Sma1lboy/rove --skill hyperframes-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hyperframes-design, .gemini/skills/hyperframes-design, .github/skills/hyperframes-design and .opencode/skills/hyperframes-design in your project.
What does Hyperframes Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Hyperframes Design is instructions for the agent only.
Does Hyperframes Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Hyperframes Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Hyperframes Design use?
Hyperframes Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Hyperframes Design use?
About 1.2k tokens (SKILL.md is roughly 4.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 20k tokens, read only when the agent opens those files.
What are the alternatives to Hyperframes Design?
Skills that share tags, products or a category with Hyperframes Design: Figma to HyperFrames (heygen-com/hyperframes, 58k stars), Hyperframes Creative (chmonitor/chmonitor, 298 stars), Create Video (Cuongyd196/auto-compare-video, 210 stars) and HyperFrames Animation (heygen-com/hyperframes, 58k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Hyperframes Design?
Sma1lboy (a GitHub user) maintains it in Sma1lboy/rove, which has 146 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 7, 2026.
Source: Sma1lboy/rove on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.