Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/alecs5am/ralphy/hyperframesnpx skills add alecs5am/ralphy --skill hyperframesgit clone --depth 1 https://github.com/alecs5am/ralphyWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00173 | $0.07742 |
| Opus 5 | $0.00086 | $0.03871 |
| Sonnet 5 | $0.00035 | $0.01548 |
| Haiku 4.5 | $0.00017 | $0.00774 |
Grade A, and why
hyperframes scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
89% identical to hyperframes — 50 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 539 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HyperFrames
HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.
Approach
Discovery (exploratory requests only)
For open-ended requests ("make me a product launch video", "create something for our brand") where the user hasn't committed to a direction, understand intent before picking colors:
- Audience — who watches this? Developers? Executives? General consumers?
- Platform — where does it play? Social (15s), website hero, product demo, internal?
- Priority — what matters most? Motion quality? Content accuracy? Brand fidelity? Speed?
- Variations — does the user want options, or a single best shot?
For specific requests ("add a title card", "fix the timing on scene 3"), skip discovery.
For exploratory requests, consider offering 2-3 variations that differ meaningfully — not just color swaps, but different pacing, energy levels, or structural approaches. One safe/expected, one ambitious. Don't mandate this — it's a tool available when appropriate.
Step 1: Design system
If design.md or DESIGN.md exists in the project, read it first (check both casings — they're different files on Linux). It's the source of truth for brand colors, fonts, and constraints. Use its exact values — don't invent colors or substitute fonts. Any format works (YAML frontmatter, prose, tables — just extract the values).
If it names fonts you can't find locally (no fonts/ directory with .woff2 files, not a built-in font), warn the user before writing HTML: "design.md specifies [font name] but no font files found. Please add .woff2 files to fonts/ or I'll fall back to [closest built-in alternative]."
If no design.md exists, offer the user a choice:
- User named a style or mood? → Read visual-styles.md for the 8 named presets. Pick the closest match.
- Want to browse options visually? → Run the design picker: read references/design-picker.md for the full workflow. This serves a visual picker page. The user configures mood, palette, typography, and motion in the browser, then copies the generated design.md and pastes it back into the conversation.
- Want to skip and go fast? → Ask: mood, light or dark, any brand colors/fonts? Then pick a palette from house-style.md.
What ships with it
46 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- data-in-motion.md 1.3 KB
- house-style.md 4.9 KB
- palettes/bold-energetic.md 417 B
- palettes/clean-corporate.md 410 B
- palettes/dark-premium.md 389 B
- palettes/jewel-rich.md 394 B
- palettes/monochrome.md 454 B
- palettes/nature-earth.md 399 B
- palettes/neon-electric.md 380 B
- palettes/pastel-soft.md 392 B
- palettes/warm-editorial.md 411 B
- patterns.md 5.4 KB
- references/audio-reactive.md 3.0 KB
- references/beat-direction.md 6.0 KB
- references/captions.md 7.7 KB
- references/css-patterns.md 8.1 KB
- references/design-picker.md 12 KB
- references/dynamic-techniques.md 6.7 KB
- references/motion-principles.md 8.6 KB
- references/narration.md 3.4 KB
- references/playbook.md 26 KB
- references/prompt-expansion.md 5.4 KB
- references/techniques.md 11 KB
- references/transcript-guide.md 5.7 KB
- references/transitions.md 11 KB
- references/transitions/catalog.md 6.1 KB
- references/transitions/css-3d.md 421 B
- references/transitions/css-blur.md 1.7 KB
- references/transitions/css-cover.md 1.4 KB
- references/transitions/css-destruction.md 4.4 KB
- references/transitions/css-dissolve.md 2.4 KB
- references/transitions/css-distortion.md 1.8 KB
- references/transitions/css-grid.md 370 B
- references/transitions/css-light.md 2.3 KB
- references/transitions/css-mechanical.md 1.6 KB
- references/transitions/css-other.md 838 B
- references/transitions/css-push.md 1.2 KB
- references/transitions/css-radial.md 1.0 KB
- references/transitions/css-scale.md 715 B
- references/typography.md 9.1 KB
- references/video-composition.md 3.6 KB
- scripts/animation-map.mjs 19 KB runs code
- scripts/contrast-report.mjs 12 KB runs code
- scripts/package-loader.mjs 8.1 KB runs code
- templates/design-picker.html 43 KB
- visual-styles.md 11 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 539 lines · 173 tokens per session scan A 60e178a8d8ef
hyperframes is a skill published in the GitHub repository alecs5am/ralphy (128 stars, last pushed 7d ago), licensed Apache-2.0. It adds 173 tokens to every session and 7,742 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. It is 89% identical to hyperframes, differing in 50 lines, and is treated as a copy.
Other skills, from other repositories
fashion-campaign-production
Provider-independent production workflow for AI-assisted fashion campaigns, lookbooks, editorial fashion films, ecommerce/editorial hybrids, social cutdowns, virtual try-on assets, generated model/lifestyle ads, and retouched fashion visuals; use when an agent must plan, prompt, produce, review, localize, or deliver…
food-beverage-content-production
Provider-independent production guidance for AI agents creating or retouching appetizing food and beverage images, recipe videos, restaurant/menu visuals, CPG ads, ecommerce product images, beverage pours, packaging/lifestyle shots, and social food clips, including truthfulness, labeling/claims discipline, styling…
podcast-production
Produce audio-first podcast episodes with generative tools — design the show and episode format (interview, narrative, news brief, two-host conversational), write scripts for the ear, decide between fully-synthetic and hybrid (recorded human + synthetic) production and meet the disclosure duty each triggers, cast and…
product-ad-production
Diagnose, design, script, produce, adapt, and quality-control product video advertisements from evidence-backed briefs. Use for physical-product, software, app, service, ecommerce, direct-response, brand-response, demonstration, testimonial, launch, and variant ad work where product truth, legibility, claims, platform…
real-estate-content-production
Provider-independent real estate media production for listing photos, virtual staging, property videos, walkthrough reels, floor-plan explainers, neighborhood clips, renovation concepts, agent ads, and generated or retouched property visuals. Use when creating, editing, reviewing, prompting, packaging, or approving…
saas-product-demo-production
Provider-independent workflow for producing SaaS and software product demo videos, including app walkthroughs, feature launches, sales demos, onboarding clips, help-center explainers, website hero demos, and PLG assets. Use when an agent must plan, script, capture, synthesize, edit, localize, review, or QA…