{
  "markdown": "# framecraft\n\n[![✅ Merged — alirezarezvani/claude-skills](https://img.shields.io/badge/%E2%9C%85%20Merged-alirezarezvani%2Fclaude--skills-green?style=flat-square)](https://github.com/alirezarezvani/claude-skills)\n\nAn LLM skill & plugin for creating polished demo videos. You describe what you want — your LLM writes the HTML scenes, narration, and config, then framecraft renders everything.\n\n**Not a framework.** A pipeline that gives your LLM the tools to produce real video.\n\n[![framecraft demo](output/framecraft-demo-preview.gif)](https://github.com/vaddisrinivas/framecraft/releases/download/v0.5-demo/framecraft-demo.mp4)\n\n> *This demo was made with framecraft itself — one prompt, zero screen recording. [Watch with audio](https://github.com/vaddisrinivas/framecraft/releases/download/v0.5-demo/framecraft-demo.mp4).*\n\n## Prerequisites\n\n| Requirement | Install |\n|-------------|---------|\n| Python 3.11+ | [python.org](https://www.python.org/downloads/) |\n| `uv` | `brew install uv` or `pip install uv` |\n| Node.js + npx | [nodejs.org](https://nodejs.org/) |\n| `ffmpeg` binary | `brew install ffmpeg` |\n| Internet access | Required for Edge TTS (no API key needed) |\n\n## Install\n\n```bash\nclaude plugin marketplace add vaddisrinivas/framecraft\nclaude plugin install framecraft\n```\n\nThen install Playwright's Chromium browser (one-time):\n\n```bash\nuv run playwright install chromium\n```\n\nThat's it. The plugin auto-configures everything — the skill that teaches your LLM how to make demos, plus all 4 MCP servers (Playwright, FFmpeg, Edge TTS, and the framecraft pipeline).\n\n## Usage\n\n```\nYou: \"Make a demo video for my tab organizer extension\"\n```\n\nYour LLM handles the rest — writes custom HTML scenes, generates voiceover, captures frames, composites the video. You get a polished 1920x1080 MP4 with transitions and narration.\n\n## What the plugin provides\n\n| Component | What it does |\n|-----------|-------------|\n| **Skill** (`skills/demo-video/SKILL.md`) | Teaches your LLM story structure, visual design, narration craft, pacing |\n| **Pipeline** (`framecraft.py serve`) | Validation, rendering, export, project scaffolding — as MCP tools |\n| **MCP config** (`.mcp.json`) | Auto-configures all 4 MCP servers on install |\n| **Format** (`scenes.json`) | Scene schema with screenshots, callouts, zoom, custom HTML, voice per scene |\n| **Templates** | Reusable HTML scenes — title cards, browser mockups, end cards |\n\n## MCP servers (auto-configured)\n\n| Server | Purpose | Powered by |\n|--------|---------|-----------|\n| `framecraft` | Pipeline: render, validate, export, scaffold | bundled |\n| `playwright` | Captures HTML scenes as frames | [@playwright/mcp](https://github.com/microsoft/playwright-mcp) |\n| `ffmpeg` | Video compositing, transitions, audio mixing | [ffmpeg-mcp-lite](https://github.com/kevinwatt/ffmpeg-mcp-lite) |\n| `edge-tts` | Neural voiceover — 10 voices, free, no API key | [edge-tts-mcp](https://github.com/yuiseki/edge_tts_mcp_server) |\n\nAll 4 auto-start when the plugin is installed. Override any in your Claude settings.\n\n## Voices\n\n10 neural voices via Edge TTS — free, no API key:\n\n| Name | Accent | Personality |\n|------|--------|------------|\n| `andrew` | US | Warm, conversational — product demos (default) |\n| `jenny` | US | Clear, upbeat — tutorials |\n| `davis` | US | Deep, authoritative — serious tone |\n| `brian` | US | Professional, measured |\n| `emma` | US | Friendly, enthusiastic |\n| `aria` | US | Expressive, natural |\n| `guy` | US | Casual, relaxed |\n| `amber` | US | Warm, approachable |\n| `ryan` | British | Polished — premium positioning |\n| `sonia` | British | Professional, clear |\n\n## Templates\n\nReusable HTML scenes from the [gTabs](https://github.com/vaddisrinivas/gtabs) demo:\n\n| Template | What it shows |\n|----------|--------------|\n| `title-card.html` | Product name + tagline + version badge |\n| `browser-mockup.html` | Chrome window with 24 messy tabs |\n| `browser-groups.html` | Chrome window with color-coded tab groups |\n| `end-card.html` | Logo + GitHub URL + CTA badges |\n\nYour LLM can use these as starting points or write entirely custom HTML scenes.\n\n## Self-demo\n\nThe `scenes/framecraft-demo/` directory contains the scenes used to create framecraft's own demo video — portal animations, chat mockups, pipeline diagrams, and a meta self-reference. A working example of what the plugin produces.\n\n## Example demos (auto-generated)\n\nEvery push to master generates a demo video from a single prompt — no screen recording, no editing. Each run is verifiable via the linked CI logs.\n\n| Product | Preview | Duration | Mode | CI Run | Full video |\n|---------|---------|----------|------|--------|------------|\n| VaultKey | ![password-manager](output/examples/password-manager.gif) | 14s | plugin | [run](https://github.com/vaddisrinivas/framecraft/actions/runs/23930802124) | [Watch](https://github.com/vaddisrinivas/framecraft/releases/download/examples/password-manager.mp4) |\n| SkyPulse | ![weather-app](output/examples/weather-app.gif) | 14s | plugin | [run](https://github.com/vaddisrinivas/framecraft/actions/runs/23931058867) | [Watch](https://github.com/vaddisrinivas/framecraft/releases/download/examples/weather-app.mp4) |\n| turbotest | ![cli-tool](output/examples/cli-tool.gif) | 16s | MCP-only | [run](https://github.com/vaddisrinivas/framecraft/actions/runs/23931398647) | [Watch](https://github.com/vaddisrinivas/framecraft/releases/download/examples/cli-tool.mp4) |\n| PingCraft | ![api-monitor](output/examples/api-monitor.gif) | 11s | plugin | [run](https://github.com/vaddisrinivas/framecraft/actions/runs/23930509050) | [Watch](https://github.com/vaddisrinivas/framecraft/releases/download/examples/api-monitor.mp4) |\n\n*Latest: turbotest | Mode: MCP-only | Cost: $1.06 | 49 turns | 14 min | 1.8M tokens*\n*Generated by [test-plugin.yml](.github/workflows/test-plugin.yml) — click any \"run\" link to verify.*\n\n## Featured In\n\n### ✅ Merged\n\n| Project | What | PR |\n|---------|------|----|\n| [alirezarezvani/claude-skills](https://github.com/alirezarezvani/claude-skills) | framecraft skill | [#475](https://github.com/alirezarezvani/claude-skills/pull/475) |\n| [alirezarezvani/claude-skills](https://github.com/alirezarezvani/claude-skills) | code-tour skill | [#476](https://github.com/alirezarezvani/claude-skills/pull/476) |\n| [affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code) | code-tour (native port) | [da813d4](https://github.com/affaan-m/everything-claude-code/commit/da813d4) |\n| [xyNNN/awesome-chrome](https://github.com/xyNNN/awesome-chrome) | gTabs | [#31](https://github.com/xyNNN/awesome-chrome/pull/31) |\n\n## Origin\n\nBuilt while creating the demo video for [gTabs v0.4](https://github.com/vaddisrinivas/gtabs). The `examples/` and `templates/` come from that project.\n\n## License\n\nMIT\n\n---\n\n**Author:** Srinivas Vaddisrinivas ([GitHub](https://github.com/vaddisrinivas))\n**Contact:** vaddisrinivas170497@gmail.com\n**Contributors:** [CONTRIBUTORS.md](CONTRIBUTORS.md) — Integration status, maintainers, distribution\n",
  "bytes": 7046,
  "sha": "c617fa9ffe76de0a7b75385238c8360f3c46e1d9990dad0c3d87a6f9b8a8975d",
  "repo_slug": "vaddisrinivas/framecraft",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_vaddisrinivas_framecraft_framecraft_3a40fec5/readme"
}