EXPLAINER0:28A 7-step app idea checklist, animated with live-panel
A light-theme diagram walks through seven checks for an app idea, from discovery and demand to distribution and review, lighting up one step at a time.
/
Get Friday PicksSubmitlive-panel: animated architecture diagrams
Your agent writes one small JSON file and gets back a looping diagram where packets run along the wires, a log scrolls and counters tick, saved as an mp4 sized for X or as a web page.
In short: Your agent writes one small JSON file and gets back a looping diagram where packets run along the wires, a log scrolls and counters tick, saved as an mp4 sized for X or as a web page. It is a free skill for people who use Claude Code or Codex and want help with motion graphics.
Checked on · Added
Works with
| Agent / tool | Access / cost | Link |
|---|---|---|
| Claude Code | Paid Claude plan or API | claude.com/claude-code |
| Codex | ChatGPT plan or API | openai.com/codex |
| GitHub repo | Open source · ★ 782 | ythx-101/live-panel-skill |
Image: from the GitHub README, shown with credit.
Images from the project README on GitHub.
Reference videos (2)
Real videos made with this skill, credited to their creators. Hover to preview.
Try it in 60 seconds
git clone https://github.com/ythx-101/live-panel-skill && cd live-panel-skill python3 scripts/render.py --config examples/minimal/config.json --out minimal.mp4
Install command copied from the project README. Check the README for the latest version.
What it does
Your agent writes one small JSON file and gets back a looping diagram where packets run along the wires, a log scrolls and counters tick, saved as an mp4 sized for X or as a web page.
live-panel is an open-source agent skill and renderer that turns one JSON config into an animated architecture diagram: a terminal-style "live panel" (or a light pastel infographic) rendered to an H.264 mp4 or a…
Short excerpt from the README of ythx-101/live-panel-skill. Read the full README on GitHub.
Inside the repo
Quick start: a minimal JSON configWhat it looks likeInstall and useMake your ownViews: pick a diagram shape (视图)Themes and canvasConfig reference (short)How replay works (determinism)FontsSelf-test results (this repo, Chrome 154, ffmpeg 7FAQHow it compares
Step by step
- Open the GitHub repo and read the README.
- Install Python 3.8+, Chrome or Chromium and ffmpeg (Linux or macOS; on Windows use WSL).
- Clone the repo and copy the folder to ~/.claude/skills/live-panel/ (or your agent's skills folder).
- Ask: "make a live-panel of our agent setup, planner to coder to reviewer, 4:5 for X", then watch the mp4 it renders.
Watch out for
Some of the bundled examples recreate other people's designs (credited in the README), so make your own layout before you post. Moving numbers are only for show unless you give the agent real figures; keep the "illustrative" label on them.
Sources & credit
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
Related skills and use cases in Motion Graphics
- HyperFrames: write HTML, get a video Skill
- /brag: turn a finished project into a launch video Skill
- Anatomy: interactive isometric illustrations Skill
- huashu-art-motion: animate artwork in 35 art styles Skill
- GSAP official agent skills Skill
- lemo-opuscar: short films in 51 styles, no video model Skill
- anidoodle: hand-drawn illustrations and films, all in code Skill
- motion-skills: 50 packs (Reels, explainers, data-viz, Manim) Skill
Related
SKILL0:56HyperFrames: write HTML, get a video
Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k
SKILL0:34/brag: turn a finished project into a launch video
Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28Anatomy: interactive isometric illustrations
Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6k
SKILLhuashu-art-motion: animate artwork in 35 art styles
Brings paintings and illustrations to life with code, offering dozens of art styles and several narration patterns for art-explainer videos.
Claude Code +1★ 4.2k
SKILLGSAP official agent skills
Official skills from GreenSock that teach agents to write correct, smooth GSAP animations.
Claude Code +1★ 16.4k
SKILLlemo-opuscar: short films in 51 styles, no video model
A Claude Code skill that makes short films entirely in code, choosing from 51 film styles each backed by its own style recipe.
Claude Code★ 2.7kFree newsletter
Friday Picks
New AI tools you can use right away, in plain words. Every Friday.