Skip to main content
Category: Visual & Media · Version: 0.0.1 · Author: opendirectory · Compatibility: All targets (claude, codex, opencode, gemini, anti-gravity, openclaw, hermes)
A specialized AI agent skill designed for creating elite, premium product launch videos using the Hyperframes framework. This skill distills months of motion design expertise, brand DNA extraction, and technical debugging into a structured workflow that guides your AI agent.

​
Install

​
Purpose

When building complex motion graphics or product launch videos, AI agents need structured guidance to avoid common pitfalls and to hit premium quality benchmarks. This skill provides:
  • Step-by-step workflows for brand discovery and storyboarding
  • Premium motion design patterns (Apple-style zooms, glassmorphism, typewriter physics)
  • Best practices for combining Hyperframes with GSAP
  • Perfect sound design (SFX) synchronization rules

​
Architecture: Skill vs. Project

It is important to distinguish between the Skill Folder and the Project Folder:
  • Skill Folder (hyperframes-product-launch-video/): This is the “instruction manual” and template repository. It is read-only. It contains the logic, scripts, and references needed to build a video.
  • Project Folder (e.g., my-new-video/): This is where the actual video composition lives. All generated files—including brand_dna.json, ART_DIRECTION.md, and the final index.html—must be saved here, in the user’s workspace.
The agent uses the skill to inform its actions but always outputs the results into the user’s designated project directory.

​
Initialization and Setup

To get started with Hyperframes and this skill in a target project, follow these steps:
  1. Initialize Hyperframes: Run the following command in your project root:
  2. Install Dependencies: Ensure all required packages are installed:
  3. Development Mode: Launch the studio editor to preview your composition in real-time:
  4. Rendering: Once your composition is ready, render it to an MP4 file:

​
FFmpeg Requirement

FFmpeg is essential for the final video rendering process. Hyperframes uses FFmpeg to stitch screenshots and audio together. It expects the ffmpeg binary to be available in your system’s PATH.
  1. System-wide Installation (Recommended):
    • macOS: brew install ffmpeg
    • Linux: sudo apt install ffmpeg
    • Windows: choco install ffmpeg
  2. Local Fallback: If you cannot install FFmpeg globally, you can install the binary locally:
    Note: Ensure your build script is configured to resolve this local path using require('@ffmpeg-installer/ffmpeg').path.

​
Leveraging Official Skills

This “Product Launch Video” skill is designed to work in tandem with the official Hyperframes documentation skills. It acts as the Director and Architect, providing the high-level strategy and art direction, while the official skills provide the granular implementation details. Required Official Skills: Run the following command to add the official Hyperframes skill:
How to use them together:
  • Use this skill for: Brand DNA extraction, scene-by-scene storyboarding, and premium motion strategy.
  • Use the official /hyperframes skill for: Core composition rules, data-attribute semantics, and framework constraints.
  • Use the official /gsap skill for: Detailed timeline references, easing functions, and complex animation patterns.

​
What’s Inside & Key Features

  • Brand DNA Extraction: Automatically pulls colors and fonts from your site.
    • To run manually: Navigate to the scripts/ directory, run npm install (this installs playwright and automatically downloads the Chromium browser binary), and execute node extract_site_dna.js https://your-website.com.
  • Elite Workflow: From brand DNA extraction to final render.
  • Art Direction Template: A scene-by-scene planning guide.
  • Perfect SFX Sync: Generates a sound design shopping list and syncs it to the millisecond.
  • Premium Patterns: Code snippets for Apple-style zooms, glassmorphism, and more.
  • Technical Gotchas: Solutions to common Hyperframes and GSAP pitfalls.
Created for the Hyperframes community.