HyperFrames Best Practices
Trusted79/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 79/100 (Trusted) · 3 GitHub contributors · MIT license
The Problem
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
Hebrew composition from scratch
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.
Hebrew TikTok with captions
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.
Explainer with external voiceover
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.
Bilingual brand content
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
Community·69
Author: skills-ilv1.0.0PopularTrending
Build Telegram bots with grammY, Telegraf, or python-telegram-bot. Covers Bot API v9.5 webhooks vs polling, inline keyboards, commands, middleware patterns, payments API, Mini Apps, and Hebrew message handling with RTL support. Use when building a Telegram bot, setting up webhooks, handling Hebrew messages in a bot, or integrating Telegram payments. Do NOT use for WhatsApp bots (use israeli-whatsapp-business), voice bots (use hebrew-voice-bot-builder), or general chatbot design patterns (use hebrew-chatbot-builder).
0.029154
Claude CodeOpenClawCursor+4
Trusted·89
Author: skills-ilv1.0.2Popular
Guide Israeli startup operations including company formation, Innovation Authority grants, investment agreements, R&D tax benefits, and employee stock options (Option 102). Use when user asks about starting a company in Israel, IIA grants, "Innovation Authority", SAFE agreements (Israeli), convertible notes, Option 102, employee stock options in Israel, R&D tax benefits, preferred enterprise, or Israeli startup legal/financial setup. Do NOT use for non-Israeli company formation or international tax advice. Always recommend consulting with Israeli lawyer and accountant for binding decisions.
0.027623
Claude CodeCursorGitHub Copilot+5
Trusted·76
Author: skills-ilv2.0.0PopularTrending
Build and optimize n8n 2.0 automation workflows with Israeli API integrations including Morning (formerly Green Invoice), israeli-bank-scrapers, data.gov.il, SMS gateways, and payment processors (Cardcom, Tranzila, Grow by Meshulam). Covers AI Agent nodes, MCP integration, Israel Invoice Reform 2026, Bit payments, Hebrew data handling, Shabbat-aware scheduling, and self-hosting on Israeli cloud. Do NOT use for general n8n tutorials without Israeli context.
0.037269
Claude CodeCursorGitHub Copilot+4
Found an issue with this skill?
Want to build your own skill? Try the Skill Creator · Submit a Skill
Reviews (0)
No reviews yet. Be the first to write one!