{"id":"732cefca-418c-45c5-aaf3-9f74c07e89ff","shortId":"PYgUpw","kind":"skill","title":"Render HTML-native agent videos with slash-command workflows using HyperFrames","tagline":"Use agent-facing HyperFrames skills to turn prompts, PDFs, CSVs, or repo context into editable HTML video compositions and rendered MP4 outputs.","description":"# Render HTML-native agent videos with slash-command workflows using HyperFrames\n\nUse agent-facing HyperFrames skills to turn prompts, PDFs, CSVs, or repo context into editable HTML video compositions and rendered MP4 outputs.\n\n## Prerequisites\n\nNode.js 22+, FFmpeg\n\n## Installation\n\nUse the upstream install or setup path that matches your environment:\n- npx skills add heygen-com/hyperframes\n- Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration.\n- Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.\n- npx hyperframes init my-video\n\nRequirements and caveats from upstream:\n- <a href=\"https://nodejs.org\"><img src=\"https://img.shields.io/badge/node-%3E%3D22-brightgreen\" alt=\"Node.js\"></a>\n- **Requirements:** Node.js >= 22, FFmpeg\n\nBasic usage or getting-started notes:\n- ### Option 1: With an AI coding agent (recommended)\n- bash\n- This teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code, the skills re...\n\n- Source: https://github.com/heygen-com/hyperframes\n- Extracted from upstream docs: https://raw.githubusercontent.com/heygen-com/hyperframes/HEAD/README.md\n\n## Documentation\n\n- https://github.com/heygen-com/hyperframes\n\n## Source\n\n- [Agent Skill Exchange](https://agentskillexchange.com/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes/)","tags":["render","html","native","agent","videos","with","slash","command","workflows","using","hyperframes","skills"],"capabilities":["skill","source-agentskillexchange","skill-render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes","topic-agent-skills","topic-ai-agents","topic-ai-tools","topic-awesome-list","topic-claude-code","topic-codex","topic-cursor","topic-llm","topic-mcp","topic-npx-skills","topic-openclaw","topic-skills-catalog"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/agentskillexchange/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add agentskillexchange/skills","source_repo":"https://github.com/agentskillexchange/skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (1,521 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:12:04.952Z","embedding":null,"createdAt":"2026-05-18T13:18:50.228Z","updatedAt":"2026-05-18T19:12:04.952Z","lastSeenAt":"2026-05-18T19:12:04.952Z","tsv":"'/heygen-com/hyperframes':204,215 '/heygen-com/hyperframes/head/readme.md':211 '/hyperframes':95,108 '/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes/)':222 '1':158 '16':99 '22':75,148 '2x':120 '9':98 'adapt':193 'add':91,127 'agent':5,16,41,52,163,169,217 'agent-fac':15,51 'agentskillexchange.com':221 'agentskillexchange.com/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes/)':220 'ai':161 'anim':194 'bash':165 'basic':150 'bigger':121 'bounci':110 'browser':186 'browser-runtim':185 'caption':111 'caveat':143 'claud':170,196 'cli':174 'code':162,171,197 'codex':175 'com':94 'command':10,46 'composit':32,68,180 'context':27,63 'correct':179 'csvs':24,60 'cursor':172 'dark':124 'doc':208 'document':212 'edit':29,65 'end':134 'environ':88 'exchang':219 'extract':205 'face':17,53 'fade':130 'fade-out':129 'ffmpeg':76,149 'first':191 'first-parti':190 'gemini':173 'get':154 'getting-start':153 'github.com':203,214 'github.com/heygen-com/hyperframes':202,213 'gsap':181 'heygen':93 'heygen-com':92 'hook':103 'html':3,30,39,66 'html-nativ':2,38 'hyperfram':13,18,49,54,136 'init':137 'instal':77,81 'make':96,117 'match':86 'mode':125 'mp4':35,71 'my-video':138 'narrat':116 'nativ':4,40 'node.js':74,147 'note':156 'npx':89,135 'option':157 'output':36,72 'parti':192 'path':84 'pdfs':23,59 'prerequisit':73 'prompt':22,58 'raw.githubusercontent.com':210 'raw.githubusercontent.com/heygen-com/hyperframes/head/readme.md':209 're':200 'recommend':164 'render':1,34,37,70 'repo':26,62 'requir':141,146 'runtim':187 'setup':83 'skill':19,55,90,199,218 'skill-render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes' 'slash':9,45 'slash-command':8,44 'sourc':201,216 'source-agentskillexchange' 'start':155 'style':102,188 'swap':122 'sync':112 'tailwind':183 'teach':167 'tiktok':101 'tiktok-styl':100 'timelin':182 'titl':119 'topic':106 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome-list' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-llm' 'topic-mcp' 'topic-npx-skills' 'topic-openclaw' 'topic-skills-catalog' 'tts':115 'turn':21,57 'upstream':80,145,207 'usag':151 'use':12,14,48,50,78,107 'v4':184 'video':6,31,42,67,104,140 'workflow':11,47 'write':178","prices":[{"id":"206e4f34-7aaa-43bf-82e0-a4fa1c56e19e","listingId":"732cefca-418c-45c5-aaf3-9f74c07e89ff","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"agentskillexchange","category":"skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:18:50.228Z"}],"sources":[{"listingId":"732cefca-418c-45c5-aaf3-9f74c07e89ff","source":"github","sourceId":"agentskillexchange/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes","sourceUrl":"https://github.com/agentskillexchange/skills/tree/main/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes","isPrimary":false,"firstSeenAt":"2026-05-18T13:18:50.228Z","lastSeenAt":"2026-05-18T19:12:04.952Z"}],"details":{"listingId":"732cefca-418c-45c5-aaf3-9f74c07e89ff","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"agentskillexchange","slug":"render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes","github":{"repo":"agentskillexchange/skills","stars":8,"topics":["agent-skills","ai-agents","ai-tools","awesome-list","claude-code","codex","cursor","llm","mcp","npx-skills","openclaw","skills-catalog"],"license":"mit","html_url":"https://github.com/agentskillexchange/skills","pushed_at":"2026-05-18T19:02:17Z","description":"The open catalog of AI agent skills — 2,000+ security-scanned skills for Claude Code, Cursor, Codex, and more.","skill_md_sha":"24ca962f2d3ac9b2af2a0b9f795fbee4cd3a42cd","skill_md_path":"skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/agentskillexchange/skills/tree/main/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"Render HTML-native agent videos with slash-command workflows using HyperFrames","description":"Use agent-facing HyperFrames skills to turn prompts, PDFs, CSVs, or repo context into editable HTML video compositions and rendered MP4 outputs."},"skills_sh_url":"https://skills.sh/agentskillexchange/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes"},"updatedAt":"2026-05-18T19:12:04.952Z"}}