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/squadcodercom/squadcoder/hyperframes-best-practicesnpx skills add squadcodercom/squadcoder --skill hyperframes-best-practicesgit clone --depth 1 https://github.com/squadcodercom/squadcoderWhat 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.00205 | $0.07051 |
| Opus 5 | $0.00102 | $0.03526 |
| Sonnet 5 | $0.00041 | $0.01410 |
| Haiku 4.5 | $0.00020 | $0.00705 |
Grade C, and why
hyperframes-best-practices scanned grade C with 1 finding 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.
Hidden instructionshighPrompt injection
Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.
- **Digits and percentages inside RTL runs.** Latin digits (years, percentages, prices) embedded in a Hebrew sentence are a common bidi bug: `2025` next to a Hebrew word can render as `5202` or jump to the wrong side. Wr How it starts
The opening of the file, as written. The whole thing — 407 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HyperFrames Best Practices
Adapted from the upstream HyperFrames v1.0.x skill at heygen-com/hyperframes (Apache-2.0). Hebrew and RTL adaptations by skills-il.
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.
Problem
Building HTML-based videos with Hebrew text requires the compiler to fetch Hebrew Google Fonts on demand, explicit dir="rtl" on Hebrew containers, mirrored GSAP entrance directions, and Hebrew caption sync via Whisper, none of which HyperFrames documents out of the box. Hebrew voiceover is a separate gap: the built-in Kokoro TTS does not support Hebrew (only 8 languages: en-us, en-gb, es, fr-fr, hi, it, pt-br, ja, zh), so Hebrew narration must be generated by an external TTS service and imported as an <audio> element.
Hebrew and RTL
For Hebrew and RTL compositions, load references/hebrew-rtl.md. It covers Hebrew font loading (the compiler auto-fetches from Google Fonts), dir="rtl" scoping, GSAP x-axis mirroring, Hebrew caption sync via hyperframes transcribe --language he, Hebrew voiceover via external TTS, and bidirectional text with <bdi>.
Approach
Before writing HTML, think at a high level:
- What, what should the viewer experience? Identify the narrative arc, key moments, and emotional beats.
- Structure, how many compositions, which are sub-compositions vs inline, what tracks carry what (video, audio, overlays, captions).
- Timing, which clips drive the duration, where do transitions land, what's the pacing.
- Layout, build the end-state first. See "Layout Before Animation" below.
- Animate, then add motion using the rules below.
For small edits (fix a color, adjust timing, add one element), skip straight to the rules.
What ships with it
42 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.2 KB
- house-style.md 4.5 KB
- LICENSE 11 KB
- metadata.json 2.6 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 2.7 KB
- references/audio-reactive.md 3.0 KB
- references/captions.md 5.3 KB
- references/css-patterns.md 8.1 KB
- references/dynamic-techniques.md 6.7 KB
- references/hebrew-rtl.md 8.4 KB
- references/motion-principles.md 3.8 KB
- references/transcript-guide.md 7.8 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.3 KB
- references/transitions/css-dissolve.md 2.4 KB
- references/transitions/css-distortion.md 1.8 KB
- references/transitions/css-grid.md 367 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/tts.md 2.5 KB
- references/typography.md 9.1 KB
- scripts/animation-map.mjs 19 KB runs code
- scripts/contrast-report.mjs 12 KB runs code
- SKILL_HE.md 17 KB
- visual-styles.md 9.6 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 · 407 lines · 205 tokens per session scan C 24347732d487
hyperframes-best-practices is a skill published in the GitHub repository squadcodercom/squadcoder (11 stars, last pushed 2mo ago), licensed MIT. It adds 205 tokens to every session and 7,051 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
impeccable-design
Visual design quality enforcement. 50 deterministic anti-pattern rules preventing AI design slop. Bans generic fonts, pure colors, nested cards, dated animations. Adapted for Tailwind CSS v4, shadcn/ui, and Framer Motion stacks.
Web Performance
ContextOS skill for Web Performance, Core Web Vitals, waterfall elimination, bundle size optimization, and caching strategies.
video-editing
AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
ollama
Local LLM generation via Ollama — image captioning, prompt generation, text enhancement, and creative writing. Use when captioning images for LoRA training datasets, generating image prompts, enhancing existing prompts, writing model descriptions, or producing creative text without requiring cloud API access.
fal-ai-media
Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.