leosssvip-dot/remotion-ad-video-skill

This project is a skill, meaning a packaged set of instructions and helper scripts, that lets an AI coding agent turn a product URL into a draft ad video. Instead of asking a video model to generate footage from a prompt, the workflow plans the ad in code, gathers assets, builds a storyboard, and then renders the video using one of two engines: Remotion (a React and TypeScript path) or Hyperframes (an HTML, CSS, and GSAP path). The agent chooses the engine based on what the user asks for, what the existing project already uses, and what is installed locally. The README explains why the authors took this route. Sending one prompt to a video model gives an opaque result. Working through a structured pipeline keeps the output editable, repeatable, and safer for brand work, because the product details, calls to action, claims, format, and asset rights are written down in a file called ad-brief.json before any rendering starts. The skill covers ecommerce products, mobile games, social and content apps, SaaS or API products, local services, and generic mobile apps. It includes an asset harvester for ecommerce pages that stops and asks the user for images if it cannot confidently fetch them, a fast Remotion lab for low-resolution previews and draft renders, and a Hyperframes flow with lint, inspect, preview, and render commands. There is also a synthetic URL example that builds an ad with no third-party media, so users can see the full pipeline without legal concerns. To run it, you need Node.js 20 or higher, npm, and Chrome or Chromium for the harvester. Remotion output needs Remotion installed and a valid Remotion license for commercial use. Hyperframes output needs Node.js 22 or higher and FFmpeg. The README says the skill is agent-agnostic: Codex, Claude Code, Cursor, Windsurf, or any agent that can read files and run Node scripts can use it by loading SKILL.md as the playbook.