claude-design-video-render

Q: How to install claude-design-video-render?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/claude-design-video-render.md https://raw.githubusercontent.com/Hectelion-SA/claude-design-video-render/main/SKILL.md. Finally, /claude-design-video-render in Claude Code.

Q: What is claude-design-video-render best for?

claude-design-video-render is categorized under General. It covers: design.

New

GitHub TrendingGeneralby Hectelion-SA

Skill Claude Code : transforme un export vidéo Claude Design (animation HTML/React) en vrai fichier MP4 (rendu image par image via Puppeteer puis encodage ffmpeg H.264).

First seen 6/19/2026

Summary

264 compression.

It streamlines the process of turning interactive design prototypes into shareable video assets for presentations, demos, or documentation.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/claude-design-video-render.md https://raw.githubusercontent.com/Hectelion-SA/claude-design-video-render/main/SKILL.md

Invoke in Claude Code

/claude-design-video-render

Use Cases

Export an animated UI prototype from Claude Design as a high-quality MP4 for client review.

Convert a React-based data visualization animation into a video file for embedding in a slide deck.

Generate a screen recording of a multi-step interaction flow without manual screen capture.

Create a video preview of a design iteration to share with team members who don't have access to the design tool.

Batch-render multiple animation exports into separate MP4 files for a design system showcase.

Produce a compressed H.264 video of a complex CSS animation for use in a marketing website.

Usage Examples

/claude-design-video-render convert my-animation.html to output.mp4

Render the latest Claude Design export as a 1080p MP4 video with 30fps

Take the React animation from /exports/demo and encode it as a high-quality H.264 video

View source on GitHub

design

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is claude-design-video-render?

This skill converts Claude Design exports (HTML/React animations) into real MP4 video files by rendering each frame with Puppeteer and encoding them with ffmpeg using H.264 compression. It streamlines the process of turning interactive design prototypes into shareable video assets for presentations, demos, or documentation.

How to install claude-design-video-render?

To install claude-design-video-render: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/claude-design-video-render.md https://raw.githubusercontent.com/Hectelion-SA/claude-design-video-render/main/SKILL.md. Finally, /claude-design-video-render in Claude Code.

What is claude-design-video-render best for?

claude-design-video-render is a skill categorized under General. It is designed for: design. Created by Hectelion-SA.

What can I use claude-design-video-render for?

claude-design-video-render is useful for: Export an animated UI prototype from Claude Design as a high-quality MP4 for client review.; Convert a React-based data visualization animation into a video file for embedding in a slide deck.; Generate a screen recording of a multi-step interaction flow without manual screen capture.; Create a video preview of a design iteration to share with team members who don't have access to the design tool.; Batch-render multiple animation exports into separate MP4 files for a design system showcase.; Produce a compressed H.264 video of a complex CSS animation for use in a marketing website..