Render an HTML/CSS/JS template to a local MP4 video by capturing frames with headless Chromium (via Playwright) and encoding them with ffmpeg. Use when "render my animation as a video", "export HTML to MP4", "make a video from my web template", or "capture CSS animation as MP4". NOT for recording live browser interactions (use `agent-browser record start`); NOT for screen recording; NOT for AI video generation (use mk:multimodal).
The English summary is being prepared. Showing the original description.
Review the instructions the agent will receive before you install.
Render a local HTML/CSS/JS animation to MP4 with Playwright frame capture and ffmpeg encoding.
node .claude/skills/html-video/scripts/capture-frames.mjs <html-file> <frame-dir> <fps> <duration-seconds> <width> <height> [background-color].bash .claude/skills/html-video/scripts/render-html-to-mp4.sh <html-file> <output.mp4> [fps] [duration-seconds] [width] [height] [background-color].file://, codec, cleanup, or dimension failures: load troubleshooting.bash .claude/skills/html-video/scripts/render-html-to-mp4.sh template.html output.mp4 30 5 1920 1080
The final optional argument supplies a background colour. The script captures fps × duration PNG frames, encodes H.264 MP4 with yuv420p, cleans its temporary frame directory, and prints the output path.
ffmpeg and Playwright before rendering; install Chromium only when missing and only with user approval.window.onFrame hook for fast deterministic animation; otherwise capture runs at real time.ffprobe command in render workflow.No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Use this skill to generate well-branded interfaces and assets for MeowKit (AI Agent Toolkit for Claude Code), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
The English summary is being prepared. Showing the original description.
Turn a raw idea into ONE honest recommendation: interview one question at a time until confirmed, then give a verdict with trade-offs and a checklist. Not for options or debate.
The English summary is being prepared. Showing the original description.
Browser automation CLI for agents: navigate, click/fill, screenshot, extract data, test apps, Electron/Slack, cloud browsers. NOT for the user's real Chrome profile/cookies (mk:chrome-profile).
The English summary is being prepared. Showing the original description.
Detects the right agent and complexity tier at Phase 0 orient; runs first in every workflow. NOT for runtime agent routing inside a single skill.
The English summary is being prepared. Showing the original description.
Angular v20+ patterns: components, signals, services, forms, routing, HTTP, testing, SSR. Auto-activates on .ts files in Angular projects (angular.json detected).
The English summary is being prepared. Showing the original description.
Design and review durable REST, GraphQL, RPC, or event API contracts: shape, compatibility, pagination, error semantics. Discovers existing consumers first. Not implementation, schema, or release.
The English summary is being prepared. Showing the original description.