Agent skill

Hyperframes Creative

by chmonitor in chmonitor/chmonitor

Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor.

GPL-3.0Auto-check passedMedia & Creative

Install Hyperframes Creative

skills CLI
$ npx skills add chmonitor/chmonitor --skill hyperframes-creative -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install chmonitor/chmonitor hyperframes-creative --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/chmonitor/chmonitor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/hyperframes-creative .claude/skills/hyperframes-creative && rm -rf skills-src

Use ~/.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/

Facts

Skill name
hyperframes-creative
GitHub stars
298
Used in
5 other repos
Token cost
~1.3k tokens
SKILL.md length
443 words
Files
79 (incl. scripts, references)
Skills in repo
53
Repo updated
First seen
Licence
GPL-3.0

At a glance

Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor.

  • 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
  • Calls python

What it does

Hyperframes Creative is an agent skill from chmonitor/chmonitor. Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 84 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, Design tokens and Text to speech and voice. It works with HeyGen. The repository describes itself as: Open-source operational advisor for ClickHouse — real-time monitoring plus AI-driven index/partition/materialized-view recommendations. The licence is GPL-3.0.

When your agent uses it

  • Design spec (frame.md / design.md) handling
  • Audio-reactive visuals
  • Composition patterns
  • Brand / style decisions

Example prompts

  • “/hyperframes-creative”

Requirements

  • Python 3

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints)…
  2. If no design spec exists and the user asks for visual direction, choose a route
  3. For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to…
  4. For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-animation for atomic rules.

What it can do on your machine

Read from SKILL.md and the folder at commit fc39ef0. 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.

    Shell commands in SKILL.md call:

    • python

    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 Creative loads about 1.3k tokens when it runs, and up to ~27k if it reads all its reference files. Until then it costs about 83 tokens; SKILL.md has 443 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~83
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~27k

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 chmonitor/chmonitor at commit fc39ef0, republished under its GPL-3.0 licence (© chmonitor). 443 words, ~1,345 tokens.

Download SKILL.mdSave it as .claude/skills/hyperframes-creative/SKILL.md (or your agent's skills folder). This skill also uses 78 other files; get the full folder from GitHub.
name
hyperframes-creative
description
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

HyperFrames Creative

Brand, pacing, style, narration, 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-animation — 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

  1. 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 in references/design-spec.md — resolve and load per that doc.
  2. If no design spec exists and the user asks for visual direction, choose a route:
    • Ready-made frame-preset (optional) → frame-presets/ (adopt a FRAME.md as frame.md; see references/design-spec.md)
    • Named style or mood → references/visual-styles.md
    • Fast defaults → references/house-style.md
    • Interactive selection → references/design-picker.md
  3. For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to hyperframes-animation/transitions/.
  4. For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-animation for atomic rules.
Show full SKILL.md (191 more words)Show less

Routing

TopicRead
Adopt a ready-made frame-preset as frame.md (optional)frame-presets/ · references/design-spec.md
Default palettes, motion, typography, lazy defaults to questionreferences/house-style.md
Named style presets, mood-to-style routingreferences/visual-styles.md
Palette-specific color tokenspalettes/*.md
Composition patterns — PiP, text-behind-subject, title card, slide showreferences/composition-patterns.md
Stats / infographic presentationreferences/data-in-motion.md
Structured expansion for open-ended promptsreferences/prompt-expansion.md
Video-medium density, scale, color, frame compositionreferences/video-composition.md
Per-beat direction, rhythm planning, transition timingreferences/beat-direction.md
Post-authoring spec verification (colors, type, corners, spacing, depth)references/design-adherence.md
High-level motion guardrails and GSAP-quality rulesreferences/motion-principles.md
Font selection, pairings, rendered-video type guardrailsreferences/typography.md
Script pacing, tone, openings, number pronunciationreferences/narration.md
Precomputed audio bands mapped to motionreferences/audio-reactive.md

Scripts

  • scripts/contrast-report.mjs — inspect contrast warnings from rendered frames.
  • scripts/extract-audio-data.py — pre-extract audio bands for audio-reactive compositions.
  • scripts/package-loader.mjs — support script for bundled creative tooling.

Run from the repo root with explicit paths, for example:

bash
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.

Boundaries

  • Do not override hyperframes-core technical rules.
  • Do not require a design system for a minimal technical composition.
  • Do not add extra scenes, narration, music, 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.

© chmonitor, GPL-3.0. 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 78 other files (scripts, references) in .agents/skills/hyperframes-creative of chmonitor/chmonitor.

  • 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 64 more

Open the folder on GitHubat commit fc39ef0

Used in 5 other repositories

We found 5 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in chmonitor/chmonitor, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Hyperframes Creative 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.

Hyperframes Creative compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Hyperframes Creative this skillchmonitor/chmonitor2985 repos~1.3kAutomated safety check: PassGPL-3.0
Create VideoCuongyd196/auto-compare-video210—~2.8kAutomated safety check: NotesCustom licence
Figma to HyperFramesheygen-com/hyperframes58k3 repos~4.5kAutomated safety check: NotesApache-2.0
Hyperframes DesignSma1lboy/rove146—~1.2kAutomated safety check: PassMIT
Hyperframesboraoztunc/skills3939 repos~7.6kAutomated safety check: PassApache-2.0
Hbg Life SimulationMr-funny/hbg-life-simulation140—~5.8kAutomated safety check: PassMIT

Similar skills

  • 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…

    210 GitHub stars~2.8k tokensUpdated 14 days ago
    Media & CreativeAuto-check: notes
  • 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.

    58k GitHub starsUsed in 3 repos~4.5k tokens
    Media & CreativeAuto-check: notes
  • Hyperframes Design

    Sma1lboy/rove

    Non-animation creative direction for HyperFrames videos. An agent skill from Sma1lboy/rove.

    146 GitHub stars~1.2k tokensUpdated today
    Media & CreativeAuto-check passed
  • Hyperframes

    boraoztunc/skills

    Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.

    393 GitHub starsUsed in 9 repos~7.6k tokens
    Media & CreativeAuto-check passed
  • Hbg Life Simulation

    Mr-funny/hbg-life-simulation

    Create Chinese HBG “模拟人生 / 人生副本” narrative videos with a consistent comic IP, a rapid multi-life opening, continuous natural-speed narration, synchronized short captions, dense static manga…

    140 GitHub stars~5.8k tokensUpdated 2 mo ago
    Media & CreativeAuto-check passed
  • Hyperframes

    scott-fryxell/brayness

    Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.

    124 GitHub stars~3.2k tokensUpdated 9 days ago
    Media & CreativeAuto-check passed

More from chmonitor/chmonitor

All 53 skills in this repo
  • Hyperframes Media

    chmonitor/chmonitor

    Audio and media assets for HyperFrames compositions, produced by one shared audio engine (scripts/audio.mjs) — multi-provider TTS (HeyGen / ElevenLabs / Kokoro local), background music + sound…

    298 GitHub starsUsed in 1 repo~2.8k tokens
    Auto-check: notes
  • Remotion To Hyperframes

    chmonitor/chmonitor

    Port an existing Remotion (React) composition to HyperFrames HTML.

    298 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • 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.

    298 GitHub starsUsed in 1 repo~4k tokens
    Auto-check: notes
  • Hyperframes Animation

    chmonitor/chmonitor

    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…

    298 GitHub starsUsed in 2 repos~1.8k tokens
    Auto-check passed
  • Faceless Explainer

    chmonitor/chmonitor

    turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video, up to ~3 min (sweet spot 30-90s), where every visual is invented (typography, abstract graphics…

    298 GitHub stars~4.5k tokensUpdated yesterday
    Auto-check: notes
  • Product Launch Video

    chmonitor/chmonitor

    turn a product or marketing URL, pasted script, or brief into a product launch video, including SaaS promos, feature reveals, app launches, company promos, and product marketing videos.

    298 GitHub stars~4.4k tokensUpdated yesterday
    Auto-check: notes

Works with

Questions about Hyperframes Creative

What does Hyperframes Creative do?

Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor. Hyperframes Creative is an agent skill from chmonitor/chmonitor. Non-animation creative direction for HyperFrames videos.

When should I use Hyperframes Creative?

Hyperframes Creative fits situations like: design spec (frame.md / design.md) handling; audio-reactive visuals; composition patterns; brand / style decisions.

How do I install Hyperframes Creative in Claude Code?

Run `npx skills add chmonitor/chmonitor --skill hyperframes-creative -a claude-code`. Or copy the skill folder (.agents/skills/hyperframes-creative in chmonitor/chmonitor) into .claude/skills/hyperframes-creative in your project. Claude Code loads it when a task matches its description.

How do I install Hyperframes Creative in Codex?

Run `npx skills add chmonitor/chmonitor --skill hyperframes-creative -a codex`. Or copy the skill folder (.agents/skills/hyperframes-creative in chmonitor/chmonitor) into .agents/skills/hyperframes-creative in your project. Codex loads it when a task matches its description.

Can I use Hyperframes Creative 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 chmonitor/chmonitor --skill hyperframes-creative -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-creative, .gemini/skills/hyperframes-creative, .github/skills/hyperframes-creative and .opencode/skills/hyperframes-creative in your project.

What does Hyperframes Creative need to run?

Going by SKILL.md and its folder, Hyperframes Creative needs the command-line tools its instructions call (python). Our summary lists: Python 3.

Does Hyperframes Creative 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 Creative 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 Creative use?

Hyperframes Creative is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Hyperframes Creative use?

About 1.3k tokens (SKILL.md is roughly 5.4k 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 25k tokens, read only when the agent opens those files.

What are the alternatives to Hyperframes Creative?

Skills that share tags, products or a category with Hyperframes Creative: Create Video (Cuongyd196/auto-compare-video, 210 stars), Figma to HyperFrames (heygen-com/hyperframes, 58k stars), Hyperframes Design (Sma1lboy/rove, 146 stars) and Hyperframes (boraoztunc/skills, 393 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hyperframes Creative?

chmonitor (a GitHub organization) maintains it in chmonitor/chmonitor, which has 298 GitHub stars. The repository holds 53 skills in this directory. The repository was last updated on October 5, 2026.

Source: chmonitor/chmonitor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.