← ClaudeAtlas

hyperframeslisted

Create AI videos with HyperFrames in Hermes using HTML, CSS, and JavaScript compositions, then validate and render them to MP4. Use for short video intros, cinematic trailers, product promos, subtitle animations, HUD/tech visuals, web-to-video work, and motion graphics.
988hj7tczd-oss/skill-tool · ★ 0 · AI & Automation · score 73
Install: claude install-skill 988hj7tczd-oss/skill-tool
# HyperFrames Use this skill when the user asks Hermes to make a video with HyperFrames, such as a 30-second vertical video, a short intro, a cinematic micro-trailer, a product promo, animated captions, HUD-style tech visuals, a website-to-video piece, or an HTML/CSS/JS motion graphics render. HyperFrames treats HTML as the video source of truth. Build video scenes as HTML compositions with CSS layout and JavaScript animation, validate the layout, then render the result to MP4. ## Setup If HyperFrames is not installed or the official skill is missing, install it first: ```bash hermes skills install official/creative/hyperframes ``` Use `npx hyperframes` for project operations. HyperFrames requires Node.js and FFmpeg. If rendering or preview fails, run: ```bash npx hyperframes doctor ``` ## Workflow 1. Convert the user's request into a short production brief: duration, aspect ratio, target platform, language, style, music or voiceover needs, and final output path. 2. For incomplete briefs, make reasonable defaults. Use 1080x1920 for vertical short video, 1920x1080 for horizontal video, 30 fps, and MP4 output. 3. Create or reuse a HyperFrames project: ```bash npx hyperframes init my-video --non-interactive ``` 4. Write the composition in HTML/CSS/JS. Make the static hero frame layout correct before adding animation. 5. Validate before rendering: ```bash npx hyperframes lint npx hyperframes inspect --samples 15 ``` 6. Preview when useful: ```bash npx hyperframes pr