ythx-101

Live Panel Skill — Design skill for Claude Code

Design community

Config-driven animated architecture diagrams: turn one JSON file into a terminal-style, always-running diagram or a light-theme infographic that moves.

How to install Live Panel Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open ythx-101/live-panel-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Live Panel Skill does

Config-driven animated architecture diagrams: turn one JSON file into a terminal-style, always-running diagram or a light-theme infographic that moves. Outputs H.264 mp4 or a live web page; also a Claude Code style skill (SKILL.md).

Alternatives in Design

Slack GIF Creator — Create animated GIFs optimized for Slack's size constraints 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★

README

live-panel

**English** | [中文说明](#中文说明)

Turn a system description (one JSON file) into a **terminal-style, always-running architecture diagram**, or a soft light-theme infographic that moves: fixed layout, packets flowing along the wires, a scrolling log, counters, bars that flip state, side triggers that light up in turn. Output is an H.264 mp4 (X / Xiaohongshu ready) or a live web page. It is also a Claude Code style *skill* (`SKILL.md`).

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): https://x.com/thedelost/status/2105398038026195279. It spread via a quote-post by @slashui: https://x.com/slashui/status/2105850132365443528.
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 https://www.latent.space/p/airbnb. The numbers are Airbnb's own account; the animation counters are illustrative.