What you get

Editable JSON, an H.264 MP4 and a self-contained animated HTML page ready to share.

live-panel-skill: Architecture Diagrams in Motion

Added 2026-10-16

Turn one JSON config into an animated system diagram, with terminal or light infographic themes. Export an MP4 or a looping web page.

Design & VideoEngineering
View on GitHub ↗
live-panel-skill: Architecture Diagrams in Motion preview

Place the repo in your agent’s skills directory and invoke live-panel. Start from an example, set nodes, wires and logs, then render and check overflow, overlaps and replay consistency. Ring, funnel and nested-loop views are ready, with 4:5, 3:4 and 1:1 presets. Rendering needs Python 3.8+, Chrome/Chromium and ffmpeg, with no API key. Runs on macOS and Linux; Windows needs WSL. Built for explaining flows; animated counters are illustrative, not live telemetry.

Related skills

Taste Skill v2: Art Direction and Browser ReviewArt direction, reference images and browser review for coding agents building websites and portfolios.Design & Video · Engineering95.7K starsRemotion's Own Twelve Video SkillsOne each for creating a project, writing markup, driving the Studio and rendering, plus maps, captions, interactivity, multimedia and upgrades — with an umbrella best-practices skill when you cannot tell which fits.Design & Video · Engineering4.5K starsStitch Design Skills, Behind an MCP GateThree plugins bundle fifteen skills covering code-to-design, static HTML extraction, a five-page site from one sentence, and walkthrough video. The hard prerequisite is a registered Stitch MCP server.Design & Video · Engineering7.9K starsEmil's Nine Design-Engineering SkillsDesign-engineering experience from Vercel and Linear, split into nine skills: build, review and improve motion, then sharpen vocabulary, Apple-inspired principles, library choice and multi-option prototyping.Design & Video · Engineering27.4K stars