Framecraft

Create polished demo videos from screenshots and scene descriptions. Think like a video producer — story arc, pacing, emotion, visual hierarchy. Orchestrates playwright, ffmpeg, and edge-tts MCPs or falls back to an atomic pipeline.

8 stars 2 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add vaddisrinivas/framecraft --skill framecraft

Manual install

git clone --depth 1 https://github.com/vaddisrinivas/framecraft.git /tmp/framecraft
mkdir -p ~/.claude/skills
cp -r /tmp/framecraft/. ~/.claude/skills/framecraft

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# framecraft

You are a video producer. Not a slideshow maker. Every frame has a job. Every second earns the next.

## Your Mindset

Before touching any tool, think like this:

1. **What's the one thing the viewer should feel?** "Wow, I need this" — not "huh, interesting features."
2. **What's the story?** Every good demo is: problem → magic moment → proof → invite.
3. **What's the pace?** Fast enough to keep attention. Slow enough to land each point. Never boring.

You are NOT making a documentation video. You are making something someone watches and immediately shares.

---

## The Toolbox

Check which MCPs are available. Use what's there.

| MCP | Tools | Purpose |
|-----|-------|---------|
| **playwright** | `browser_navigate`, `browser_screenshot` | Render HTML scenes to PNG frames |
| **ffmpeg** | `ffmpeg_convert`, `ffmpeg_merge`, `ffmpeg_extract_frames` | Composite, transitions, audio mix |
| **edge-tts** | TTS tools | Neural voiceover (free, no API key) |
| **framecraft** | `render_video`, `preview_scene`, `generate_tts` | Atomic pipeline fallback |

### Three ways to render

**Mode A — MCP Orchestration** (most control):
Write HTML → playwright screenshots → edge-tts audio → ffmpeg composite

**Mode B — Pipeline** (most reliable):
`framecraft.render_video(scenes_json, auto_duration=true)` — one call, everything

**Mode C — CLI** (always works):

Read the full skill on GitHub

Details

Skill name: framecraft
Repository: vaddisrinivas/framecraft
Repo updated: 28 July 2026

FAQ

What does the Framecraft skill do?

How do I install the Framecraft skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add vaddisrinivas/framecraft --skill framecraft. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Framecraft popular?

It lives in vaddisrinivas/framecraft, which has 8 GitHub stars and 2 forks.

Related skills

Riffkit

riffkit/skill

Riff winning short videos — give one source (a TikTok link, an uploaded video, or an analyzed template) and the backend riffs its emotion formula into your own AI video (post-ready short-form or UGC-style ad creative), with optional digital character, product placement, and language. You riff the formula, not the video.

Images, Video & Audio

Consensus

GoodLadTom/consensus

Find out what YouTube actually agrees on about a topic, and what it has quietly stopped saying. Searches YouTube for a topic, pulls ~100 transcripts across both the top-ranking and the most recent videos, extracts every specific claim, clusters claims that say the same thing, then weights them by age to separate settled advice from current advice from expired advice. Produces a self-contained HTML report where every position is traceable to a timestamped source. Use when the user types /consensus, or asks what the consensus is on a topic, what most people/creators say about something, whether

Images, Video & Audio

Video to Skill

brenoepics/video-to-skill

Convert a video (local file or YouTube/URL) into structured, evidence-grounded knowledge — and ultimately into an installable agent skill. Use when the user provides a video file or video URL and wants it analyzed, summarized into steps, or turned into a skill; triggers include "watch this video", "learn from this tutorial", "video to skill", or a path/URL to .mp4/.mkv/.webm/.mov or youtube.com/youtu.be.

Images, Video & Audio

Vsdx Trace

ZJUZhiyuCai/vsdx-trace

Reconstruct raster references as high-fidelity, independently editable Microsoft Visio VSDX files. Use when a user asks to 复刻、临摹、重绘 a screenshot, paper figure, flowchart, system diagram, or model architecture as editable Visio, especially when iterative visual matching matters. Do not use for ordinary image generation or flat image embedding.

Images, Video & Audio

Yt Digest

tga-cheetung/yt-digest

Turn a YouTube URL into a vault-ready research digest — transcript, key learning moments with timestamp deep-links, and screenshots of visual moments (slides, demos, dashboards). Use when the user pastes a YouTube link they're researching, says "summarize this video", "/yt-digest <url>", "youtube digest", or asks to extract key points from a YouTube talk. Output goes to vault/research/youtube/<slug>.md with screenshots in vault/attachments/youtube/<slug>/. Source MP4 is auto-deleted after frame extraction.

Images, Video & Audio

Notebook Video

hyt315/notebook-video

Turn a topic into a Chinese 16:9 teaching video (flat / cel component themes, or the journal / papercut / archive hand-made skins driven by a metaphor-first director layer) with React, TypeScript and Remotion. Every shot is a code-drawn component scene — consoles, diffs, checklists, stat rows, funnels, progress rings, kinetic numbers, stamp seals, verdict bars, or a real screenshot / screen recording in a MediaFrame — moved by an engine-level virtual camera that pushes in on whatever the narration names. Weak-model friendly: five teaching blueprints with per-shot component picks, golden exampl

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.