feat: add video skill for AI video production (#258)
* feat: add video skill for AI video production New skill covering programmatic video (Remotion, Hyperframes), AI video generation (Veo, Runway, Kling), AI avatars (HeyGen, Synthesia), and editing/repurposing workflows. Includes AI video prompting reference. New tool integrations: HeyGen (MCP-enabled), Hyperframes (open source). Updated tools registry with Video category expansion. Total skills: 39 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: apply accuracy fixes from Codex review - Hyperframes: Node.js requirement 18+ → 22+ (confirmed via npm) - Veo 3: soften 4K claim to "Up to 1080p (4K varies)" - Sora: replace shutdown claim with availability caveat - HeyGen: remove dollar amounts, link to pricing page - Remotion: soften license wording Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Corey Haines
@@ -0,0 +1,126 @@
|
||||
# HeyGen
|
||||
|
||||
AI avatar video generation platform. Create talking-head videos from text scripts with realistic lip-sync, expressions, and gestures.
|
||||
|
||||
## Capabilities
|
||||
|
||||
| Integration | Available | Notes |
|
||||
|-------------|-----------|-------|
|
||||
| API | Yes | REST API v2 for video generation, avatars, templates |
|
||||
| MCP | Yes | Official hosted MCP server — no local install needed |
|
||||
| CLI | - | - |
|
||||
| SDK | Yes | Node.js SDK available |
|
||||
|
||||
## Authentication
|
||||
|
||||
- **Type**: API Key
|
||||
- **Header**: `X-Api-Key: {api_key}`
|
||||
- **Get key**: Settings > API in HeyGen dashboard
|
||||
|
||||
## MCP Server Setup
|
||||
|
||||
HeyGen provides a hosted remote MCP server. No local installation required.
|
||||
|
||||
### Claude Code / Claude Desktop
|
||||
|
||||
Add to your MCP config:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"heygen": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "mcp-remote", "https://mcp.heygen.com/mcp"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
On first use, authenticates via browser OAuth. The MCP server exposes tools for:
|
||||
- Creating videos from scripts
|
||||
- Listing and selecting avatars
|
||||
- Managing templates
|
||||
- Checking video status
|
||||
|
||||
## API Quick Start
|
||||
|
||||
### Create a Video
|
||||
|
||||
```bash
|
||||
curl -X POST https://api.heygen.com/v2/video/generate \
|
||||
-H "X-Api-Key: YOUR_API_KEY" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"video_inputs": [{
|
||||
"character": {
|
||||
"type": "avatar",
|
||||
"avatar_id": "AVATAR_ID",
|
||||
"avatar_style": "normal"
|
||||
},
|
||||
"voice": {
|
||||
"type": "text",
|
||||
"input_text": "Your script goes here.",
|
||||
"voice_id": "VOICE_ID"
|
||||
}
|
||||
}],
|
||||
"dimension": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
### List Avatars
|
||||
|
||||
```bash
|
||||
curl https://api.heygen.com/v2/avatars \
|
||||
-H "X-Api-Key: YOUR_API_KEY"
|
||||
```
|
||||
|
||||
### Check Video Status
|
||||
|
||||
```bash
|
||||
curl https://api.heygen.com/v1/video_status.get?video_id=VIDEO_ID \
|
||||
-H "X-Api-Key: YOUR_API_KEY"
|
||||
```
|
||||
|
||||
## Common Marketing Use Cases
|
||||
|
||||
| Use Case | Approach |
|
||||
|----------|----------|
|
||||
| Product explainer | Script from features → avatar presents |
|
||||
| Feature announcement | Template with avatar + screen recording |
|
||||
| Multilingual content | Same script, different language/voice |
|
||||
| Personalized outreach | Dynamic variables (name, company) in script |
|
||||
| Weekly updates | Recurring template, swap script text |
|
||||
|
||||
## Custom Avatars
|
||||
|
||||
Upload a 2-5 minute video of yourself speaking to create a digital twin:
|
||||
- Looks and sounds like you
|
||||
- Generates unlimited videos from text scripts
|
||||
- Available on Creator plan and above
|
||||
|
||||
## Pricing
|
||||
|
||||
| Plan | Videos/mo | Max Duration |
|
||||
|------|-----------|-------------|
|
||||
| Free | 3 | 3 min |
|
||||
| Creator | Unlimited | 5 min |
|
||||
| Business | Unlimited | 20 min |
|
||||
| Enterprise | Unlimited | Custom |
|
||||
|
||||
Check [heygen.com/pricing](https://www.heygen.com/pricing) for current prices — they change frequently.
|
||||
|
||||
## Rate Limits
|
||||
|
||||
- Free: 3 videos/month
|
||||
- Paid: Based on plan tier, concurrent generation limits apply
|
||||
- API rate limits: Check response headers for `X-RateLimit-*`
|
||||
|
||||
## Relevant Skills
|
||||
|
||||
- video
|
||||
- social-content
|
||||
- ad-creative
|
||||
- sales-enablement
|
||||
@@ -0,0 +1,180 @@
|
||||
# Hyperframes
|
||||
|
||||
Open-source programmatic video framework from HeyGen. Create videos from HTML/CSS/JS — no React, no proprietary DSL. Designed for AI agent workflows.
|
||||
|
||||
## Capabilities
|
||||
|
||||
| Integration | Available | Notes |
|
||||
|-------------|-----------|-------|
|
||||
| API | - | Library, not a hosted service |
|
||||
| MCP | - | - |
|
||||
| CLI | Yes | `npx hyperframes render` |
|
||||
| SDK | Yes | Node.js/TypeScript package |
|
||||
|
||||
## Why Hyperframes
|
||||
|
||||
- **LLM-native**: AI models generate better HTML than React components — plain web standards, no framework DSL
|
||||
- **Deterministic**: Same input always produces identical output (ideal for automation)
|
||||
- **Open source**: Apache 2.0 license, zero per-render fees
|
||||
- **Agent-friendly**: Any coding agent that can write HTML can create videos
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install hyperframes
|
||||
```
|
||||
|
||||
Requires: Node.js 22+, Chrome/Chromium (for rendering)
|
||||
|
||||
## Quick Start
|
||||
|
||||
```typescript
|
||||
import { render } from "hyperframes";
|
||||
|
||||
await render({
|
||||
frames: [
|
||||
{
|
||||
html: `
|
||||
<div style="display:flex; align-items:center; justify-content:center;
|
||||
height:100%; background:#000; color:#fff; font-family:system-ui;">
|
||||
<h1 style="font-size:64px;">Welcome to Acme</h1>
|
||||
</div>
|
||||
`,
|
||||
duration: 3,
|
||||
},
|
||||
{
|
||||
html: `
|
||||
<div style="display:flex; flex-direction:column; align-items:center;
|
||||
justify-content:center; height:100%; background:#000; color:#fff;
|
||||
font-family:system-ui;">
|
||||
<h2 style="font-size:48px;">Ship faster with AI</h2>
|
||||
<p style="font-size:24px; color:#888;">Try it free today</p>
|
||||
</div>
|
||||
`,
|
||||
duration: 3,
|
||||
},
|
||||
],
|
||||
output: "intro.mp4",
|
||||
width: 1080,
|
||||
height: 1920, // 9:16 vertical
|
||||
fps: 30,
|
||||
});
|
||||
```
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### Frames
|
||||
|
||||
Each frame is an HTML document rendered at a specific point in the timeline. Think of it as a slide with a duration.
|
||||
|
||||
```typescript
|
||||
{
|
||||
html: "<div>...</div>", // Full HTML content
|
||||
duration: 3, // Seconds to display
|
||||
css?: "body { ... }", // Optional external CSS
|
||||
}
|
||||
```
|
||||
|
||||
### Transitions
|
||||
|
||||
CSS transitions and animations work between frames:
|
||||
|
||||
```html
|
||||
<div style="animation: fadeIn 0.5s ease-in;">
|
||||
<h1>Slide In</h1>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Data-Driven Videos
|
||||
|
||||
Generate frames from data for batch production:
|
||||
|
||||
```typescript
|
||||
const features = ["Analytics", "Automation", "AI Insights"];
|
||||
|
||||
const frames = features.map((feature) => ({
|
||||
html: `
|
||||
<div style="display:flex; align-items:center; justify-content:center;
|
||||
height:100%; background:linear-gradient(135deg, #667eea, #764ba2);
|
||||
color:#fff; font-family:system-ui;">
|
||||
<h1 style="font-size:56px;">${feature}</h1>
|
||||
</div>
|
||||
`,
|
||||
duration: 2.5,
|
||||
}));
|
||||
|
||||
await render({ frames, output: "features.mp4", width: 1080, height: 1920 });
|
||||
```
|
||||
|
||||
## Common Marketing Templates
|
||||
|
||||
### Product Announcement
|
||||
|
||||
```typescript
|
||||
const frames = [
|
||||
{ html: hookSlide("Something new is here"), duration: 2 },
|
||||
{ html: featureSlide(title, description, screenshot), duration: 4 },
|
||||
{ html: ctaSlide("Try it free →", url), duration: 3 },
|
||||
];
|
||||
```
|
||||
|
||||
### Testimonial Video
|
||||
|
||||
```typescript
|
||||
const frames = [
|
||||
{ html: quoteSlide(testimonial.text), duration: 4 },
|
||||
{ html: attributionSlide(testimonial.author, testimonial.company), duration: 2 },
|
||||
{ html: ctaSlide("Join 1,000+ happy customers"), duration: 3 },
|
||||
];
|
||||
```
|
||||
|
||||
### Stats/Metrics Video
|
||||
|
||||
```typescript
|
||||
const metrics = [
|
||||
{ label: "Users", value: "10,000+" },
|
||||
{ label: "Uptime", value: "99.9%" },
|
||||
{ label: "NPS", value: "72" },
|
||||
];
|
||||
|
||||
const frames = metrics.map(m => ({
|
||||
html: metricSlide(m.label, m.value),
|
||||
duration: 2.5,
|
||||
}));
|
||||
```
|
||||
|
||||
## Aspect Ratios
|
||||
|
||||
| Platform | Width | Height | Ratio |
|
||||
|----------|-------|--------|-------|
|
||||
| TikTok/Reels/Shorts | 1080 | 1920 | 9:16 |
|
||||
| YouTube | 1920 | 1080 | 16:9 |
|
||||
| Instagram Feed | 1080 | 1080 | 1:1 |
|
||||
| Instagram Feed | 1080 | 1350 | 4:5 |
|
||||
|
||||
## Hyperframes vs. Remotion
|
||||
|
||||
| Factor | Hyperframes | Remotion |
|
||||
|--------|-------------|----------|
|
||||
| Language | HTML/CSS/JS | React/TypeScript |
|
||||
| Agent compatibility | Better (plain HTML) | Good (needs React knowledge) |
|
||||
| Animation | CSS transitions/keyframes | Spring physics, interpolation |
|
||||
| Cloud rendering | Not built-in | Lambda (AWS) |
|
||||
| License | Apache 2.0 (free) | Company license for commercial use |
|
||||
| Ecosystem | New, growing | Mature, large community |
|
||||
|
||||
**Use Hyperframes when:** AI agent is generating the video, simple animations, batch templated content, cost-sensitive.
|
||||
|
||||
**Use Remotion when:** Complex animations needed, already using React, need Lambda for massive scale, want larger ecosystem.
|
||||
|
||||
## Relevant Skills
|
||||
|
||||
- video
|
||||
- social-content
|
||||
- ad-creative
|
||||
Reference in New Issue
Block a user