ythx-101/live-panel-skill

What it solves

It addresses the difficulty of creating professional, animated architecture diagrams for social media (like X or Xiaohongshu) that look like live monitoring dashboards. Instead of manually animating elements or writing complex video code, it allows users to define a system's layout and behavior in a single JSON file.

How it works

The project acts as a renderer and agent skill. You provide a JSON configuration file that defines boxes, wires, packet flows, logs, and counters. The system uses a deterministic "motion grammar" where every frame is a pure function of time, ensuring consistent, repeatable animations. It renders these configurations into H.264 MP4 videos or self-contained HTML pages that loop in any browser. It also includes a verification script that checks for text overflows or layout overlaps to ensure the final output is polished.

Who it’s for

It is designed for AI researchers, engineers, and content creators who want to visualize agent architectures, system data flows, or multi-agent trees. It is particularly useful for those who want to integrate diagram generation into their AI agent workflows (e.g., using Claude Code or Cursor) to have the agent automatically generate and verify its own architectural diagrams.

Highlights

• Deterministic Animation: Uses a fixed-seed, time-based rendering engine that ensures identical frames every time.
• Agent-Ready: Includes a SKILL.md file, allowing AI agents to write, render, and self-validate their own architecture diagrams.
• Multi-Platform Support: Supports standard social media aspect ratios (4:5, 3:4, 1:1) and two distinct visual themes: terminal-dark and light-pastel.
• No Heavy Dependencies: Runs locally using only Python's standard library, a local Chrome/Chromium instance, and ffmpeg—no API keys or cloud services required.
• Built-in Quality Control: Includes a check_frames.py tool to automatically detect layout issues like text overflow or element overlap before final rendering.