Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsHTML Video Composer Skill
Compose deterministic, render-ready HTML and CSS video scenes for automated MP4/WebM production pipelines.
$4.99
HTML Video Composer Skill
Example session with this skill installed
Create a 15-second branded title card and one product step for a 1080x1920 mobile video. Include a logo placeholder, a 'New Feature' heading, and a render checklist for WebM export.
- Read your context and instructions
- Compiled the html video composer
I have designed the scene plan and technical composition for your mobile video asset. The layout is optimized for a 9:16 aspect ratio with high-contrast typography and deterministic CSS animations.
Video Composition Plan
| Scene ID | Duration | Element | Animation | Safe Zone |
|---|---|---|---|---|
| SCENE_01 | 0:00-0:05 | Branded Title | Fade-in + Scale | Center |
| SCENE_02 | 0:05-0:15 | Product Step | Slide-left + Reveal | Bottom-Third |
Technical Implementation
<!-- Scene 1: Branded Title Card -->
<div id="scene-01" class="scene" data-duration="5000">
<div class="safe-area">
<div class="logo-placeholder"></div>
<h1 class="animate-reveal">New Feature</h1>
</div>
</div>
<style>
.scene {
width: 1080px;
height: 1920px;
background: #000;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.animate-reveal {
font-family: 'Inter', sans-serif;
font-size: 80px;
color: #FFFFFF;
opacity: 0;
transform: translateY(20px);
animation: reveal 0.8s forwards ease-out;
}
@keyframes reveal {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
Rendering Configuration
- Dimensions: 1080 x 1920 (9:16 Vertical)
- Frame Rate: 30 fps or 60 fps recommended
- Target Format: WebM (VP9 / Opus)
- Renderer Requirements: Ensure
font-display: blockis set to prevent FOIT during frame capture.
Next steps
- Replace
.logo-placeholderwith your SVG or PNG asset path. - Test the
.animate-revealtiming in a headless browser to ensure frame consistency. - Verify the WebM codec support on your specific target deployment platform.
Connects securely to your tools. The creator never sees your data.
About this skill
Generating high-quality video content shouldn't require heavy video editing software that breaks version control. This skill enables a code-first approach to motion graphics, turning scripts and briefs into deterministic HTML, CSS, and JavaScript compositions. It solves the problem of manual, non-reproducible video editing by treating video scenes as structured code that is ready for MP4 or WebM rendering through HyperFrames or similar pipelines.
What it does
- Scene Planning converts scripts into structured timelines with explicit durations, safe areas, and transition logic.
- HTML/CSS Composition builds render-ready layouts using semantic code, ensuring consistent typography and visual hierarchy.
- Product Tours automates the creation of UI mockups, cursor movements, and step-by-step reveals based on screenshots.
- Timeline Synchronization ensures deterministic animation timing tied to frame counts rather than browser wall-clock time.
- Export Configuration generates technical specifications for resolution, frame rates, codecs, and audio synchronization.
How it works
- Define the video objective, target duration, aspect ratio, and brand assets.
- Generate a scene-by-scene breakdown including text, visual assets, and animation exit conditions.
- Draft the technical implementation using HTML for structure and CSS for motion and layout.
- Validate the composition against a render checklist for font loading, asset dependencies, and safe-zone compliance.
Frameworks & tools
The skill focuses on HTML5, CSS3, and JavaScript, specifically optimized for HyperFrames-compatible workflows and headless browser renderers like Puppeteer or Playwright for MP4/WebM output.
Why this beats prompting it yourself
Standard LLMs often treat video as a visual-only medium, ignoring the technical constraints of deterministic rendering and title-safe areas. This skill enforces strict timeline logic and render-ready code structures that prevent layout shifts and timing drift during the export process.
Use cases
- Generating branded title cards and lower thirds for automated social media workflows.
- Creating step-by-step product walkthroughs with synchronized captions and UI highlights.
- Producing data-driven motion graphics that react to external timing markers or audio analysis.
- Building template-based video assets for mass-scale personalized video generation.
Known limitations
Does not perform actual video encoding or file exporting. Requires a separate rendering pipeline to convert HTML to video files. Codec support depends entirely on the buyer's environment.
Requires a third-party rendering pipeline for file export. Does not perform real-time audio analysis. Codec and font support are environment-dependent.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 15 days ago
Permissions
No special permissions declared or detected