ythx-101 / live-panel-skill

# live-panel: animated architecture diagrams from one JSON file
**English** | 中文说明
| `loop` view · terminal-dark | `loop` view · light-pastel |
| --- | --- |
| | |
 Grok Bot 负责人 Lauren Tan 的每日 Loop. The workflow is from Lauren Tan @poteto; the visual grammar follows an infographic by @akshay_pachaar; icons are Lucide (ISC). Made with this repo: `examples/loop-poteto/config.json`. 
**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 self-contained web page.** The layout stays fixed while the system looks like it is running: packets flow along the wires, a log scrolls, counters tick, bars flip state and side triggers light up in turn.
> 中文一句话：**live-panel 把一个 JSON 配置渲染成会动的架构图**——终端监控面板风格的动态架构图 / agent 架构动图，或会动的浅色信息图，输出 mp4 视频或可循环的网页，画幅预设适配 X（4:5）和小红书（3:4）。
- **Input:** one JSON file (boxes, wires, packet paths, log wording, counters). Start from an example; the HTML template never needs editing.
- **Output:** H.264 mp4 (30 fps, silent AAC track) and/or a self-contained HTML page that loops live in any browser.
- **Looks:** `terminal-dark` (monitoring panel in a terminal window) and `light-pastel` (Xiaohongshu-style infographic). Canvas presets `4:5` 1200x1500 (X), `3:4` 1080x1440 (Xiaohongshu), `1:1` 1080x1080.
- **Use it for:** agent architecture diagrams, multi-agent / agent-tree panels, system and data-flow diagrams, "monitoring dashboard" style posts.
- **For AI agents:** `SKILL.md` makes it a skill for Claude Code, Codex and other agents that read SKILL.md; the agent writes the JSON, renders and checks frames itself.
- **Credit:** the look and motion idea come from a clip by @thedelost; see *Credits* below.
- **Requirements:** Python 3.8+ (standard library only), Chrome or Chromium, ffmpeg. No API key, no network, no pip packages. MIT licensed code.
## Quick start: a minimal JSON config
Save this as `minimal.json` (it is also `examples/minimal/config.json`):
 [code] 
 [code] 
> ## Credits - please read
> - **The idea, the look and the motion grammar come from an architecture-diagram clip by @thedelost** (a Codex agent-tree panel, generated with GPT, screen-recorded as a web page): . It spread via a quote-post by **@slashui**: .
> - `examples/codex-agents/` is a **recreation of that original picture** (layout, content and the three-tempo motion, redrawn from frame captures of the clip). The design belongs to @thedelost. The method (motion grammar, config-driven template) is re-implemented here and is not their code.
> - `examples/agent-architecture/` re-animates the static Xiaohongshu infographic **《AI Agent 的完整架构》 by 小红书 @林纾** (posted Sep 4). Layout, wording and colours follow the original; the design belongs to the original author. The footer of the video says so.
> - `examples/airbnb/` visualises figures Airbnb leaders stated in the **Latent.Space interview** . The numbers are Airbn