HyperFrames Best Practices
Trusted88/100Best practices for programmatic video creation using HyperFrames, plain HTML compositions with GSAP animations rendered to MP4, with full Hebrew and RTL support. Covers composition authoring, data-* timing attributes, GSAP timeline contract, layout-before-animation methodology, visual identity gate, Hebrew fonts via Google Fonts auto-fetch (Heebo, Rubik, Assistant), RTL text with dir="rtl", Hebrew captions via Whisper, Hebrew voiceover via external TTS (Kokoro doesn't support Hebrew), audio-reactive visuals, scene transitions, and bidirectional text with <bdi>. Use when building HTML-based video content or Hebrew social/marketing videos without React. Do NOT use for Remotion or general React video work.
Trust score 88/100 (Trusted) · 3 GitHub contributors · MIT license
Building HTML-based videos with Hebrew text hits three gaps HyperFrames does not document. Hebrew Google Fonts (Heebo, Rubik, Assistant) work fine, but only if you skip the usual `<link>` or `@import`, the compiler fetches them itself. dir="rtl" does not propagate to every place that needs it, and GSAP entrance directions are not mirrored automatically. The built-in Kokoro TTS supports only 8 languages (en-us, en-gb, es, fr-fr, hi, it, pt-br, ja, zh) and Hebrew is not one of them, so Hebrew narration must come from an external TTS and load as a normal <audio> element.
skills-ilnpx skills-il add skills-il/developer-tools --skill hyperframes-best-practices -a claude-codeInstall on Claude.ai, Claude Desktop, ChatGPT, Manus, or other platforms
- 1. Click "Download ZIP" to download the skill files.
- 2. Open Claude Desktop and go to Customize > Skills.
- 3. Click "+" and select "Upload a skill", then upload the ZIP file.
- 4. Start a new conversation. The skill will activate automatically when relevant.
When to Apply
- Building HTML-based video content for Israeli audiences (social, marketing, explainer) without a React stack
- Generating Hebrew TikTok, Reels, or Shorts with word-highlighted captions
- Producing Hebrew explainer videos with AI voiceover that keeps deterministic rendering
- Producing bilingual Hebrew+English brand content that does not break on bidi
- Migrating from Remotion to an HTML-first video stack, without compilation or React
Try These Prompts
Create a HyperFrames composition in Hebrew at 1920x1080, 10 seconds long, with a title and subtitle. Use the Heebo font (the compiler auto-fetches from Google Fonts), apply dir="rtl" to .scene-content, and GSAP entrance animations coming from the right (positive x). Dark background, calm motion.
Build a vertical 1080x1920 Reel for TikTok with Hebrew narration (narration-he.wav) and word-highlighted captions. Transcribe with npx hyperframes transcribe narration-he.wav --model medium --language he. Show up to 3 words on screen at a time and highlight the active word in accent color. Captions in Rubik Black 900.
Produce a 60-second Hebrew explainer video. The built-in Kokoro does not support Hebrew, generate the narration with ElevenLabs (Hebrew voice, 22 kHz, mono), save as narration.wav, and load in HyperFrames as <audio data-start="0" data-duration="60" data-track-index="2">. Sync word-level captions and add 3 scenes with crossfades between them.
Create a composition with an English brand name (Acme) embedded inside Hebrew headlines. Wrap every English run with <bdi>, set font-family Heebo for Hebrew and Inter for English, and confirm punctuation stays on the correct side of each paragraph.
Frequently Asked Questions
Related Skills
Author: skills-ilHebrew override layer on top of browser-use/video-use. Two paths: (1) captions-only.sh, one command that takes a long video, transcribes via Scribe, and burns Hebrew captions on the original. Costs $1-3 regardless of video length, the cheap path for non-technical users with a webinar or lecture. (2) The full video-use cut workflow for editing raw footage into curated teasers, ~$25-300 depending on length. Also covers SUB_FORCE_STYLE override (Helvetica has no Hebrew glyphs), python-bidi pre-shape recipe (libass+SRT BiDi is silently broken on macOS), Scribe garbage-character sanitization (Devanagari and other non-Hebrew chars Scribe mixes into Hebrew transcripts), Hebrew filler-word lexicon, explicit fontsdir= for reliable font discovery, and frame-sampling self-eval protocol. Use for any Hebrew video that needs captions or editing with video-use. Do NOT use for non-Hebrew video-use sessions, Hebrew podcast audio-only post-production (use hebrew-podcast-postproduction), or generic FFmpeg work without video-use.
Author: skills-ilBest practices for authoring presentations with open-slide: the fixed 1920×1080 canvas, the slides/<id>/index.tsx file contract, type scale, DesignSystem tokens, the themes/ system, @slide-comment inspector markers, and Hebrew text rendering with full RTL support. Covers Hebrew Google Fonts (Heebo, Rubik, Assistant, Noto Sans Hebrew), logical CSS properties (paddingInlineStart over paddingLeft), bidirectional Hebrew+English text with <bdi>, Hebrew-aware type scale tuning, and RTL-friendly themes. Use whenever you are writing or editing code under slides/<id>/ in an open-slide project, or building a Hebrew or bilingual deck on the framework. Do NOT use for video creation (use remotion-best-practices or hyperframes-best-practices), or for generic Hebrew presentations outside open-slide (use presentation-generator).
Author: skills-ilAnalyze and optimize Hebrew chatbot performance with conversation flow analytics, Hebrew sentiment analysis, drop-off detection, user satisfaction scoring, A/B testing for response variants, and reporting dashboards.
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill