ythx-101/live-panel-skill

Maintainer? Show your league in your README

Card: your league's emblem, from Copper to Legendary

[![bestofgithub](https://bestofgithub.dev/badge/ythx-101/live-panel-skill.svg?style=card)](https://bestofgithub.dev/repo/ythx-101/live-panel-skill)

Flat: fits beside your other badges

[![bestofgithub](https://bestofgithub.dev/badge/ythx-101/live-panel-skill.svg)](https://bestofgithub.dev/repo/ythx-101/live-panel-skill)

Loading README…

terminal-dark, 4:5 - recreation of @thedelost's Codex agent tree	light-pastel, 3:4 - 林纾's AI Agent architecture

terminal-dark, 4:5 - Airbnb, Chinese content, figures from the interview	1:1 - the minimal example above

what you want to show	view	status
a loop that repeats (agent plan→act→verify, PDCA, release cycle)	`ring` - 3-8 steps on a circle, comet, lap counter	ready (`examples/ring/`)
how many survive each stage (bug→merged PR, signup→paid)	`funnel` - widths proportional to values, conversion % between stages	ready (`examples/funnel/`; log widths + one-accent palette for population-scale data: `examples/funnel-karpathy/`)
a nested workflow with decisions and loop-backs (outer / inner loop, retry on "no", human gate)	`loop` - grouped frames, icon cards, decision diamonds, dashed loop-backs, a token walking the script	ready (`examples/loop-poteto/`)
who relates to whom, clusters of a knowledge base or ecosystem	`nebula` - force layout by group, halos, packets on strong edges	planned
work over time, parallel tracks, dependencies	`timeline` - lanes, playhead, done/active/pending	planned
a hierarchy (agent → sub-agents → tools, org chart)	`tree` - tidy tree, expand/collapse without layout jumps	planned
a few numbers to watch (latency, cost, pass rate)	`kpi` - card grid, big number, sparkline cursor = shown value	planned
an architecture with arbitrary boxes and wires	no view: free-form `box`/`path`/`flow` elements (the three original examples)	ready

`ring` - a comet laps the steps, the centre counts iterations	`funnel` - particles fall stage by stage, widths follow the values

`loop` - packets on every wire, marching loop-backs, icons that move	`loop`, light-pastel

`excalidraw` - hand-drawn Excalidraw look that keeps running: pen loops, inked arrows, boiling lines	`excalidraw`, Chinese (小赖 Xiaolai handwriting)

`theme.preset`	look
`terminal-dark`	dark window, monospace, segmented text-mode boxes (the original clip's style)
`light-pastel`	white background, rounded pastel boxes, SVG arrows with rounded corners, soft glow on active items

live-panel: animated architecture diagrams from one JSON file

	live-panel	Mermaid	Excalidraw	Remotion	Manim
Input	one JSON config (absolute pixel layout)	text DSL	drawing in a whiteboard editor	React / TypeScript code	Python code
Output	H.264 mp4 + self-contained live HTML page	SVG / PNG	PNG / SVG / `.excalidraw`	video	video
Motion	built-in "always running" grammar: packets, scrolling log, counters, gauges, triggers	essentially static	static	anything you code	anything you code
Layout	you place boxes (pixel grid)	automatic	manual	you code it	you code it
Built-in checks	text overflow / overlap from the DOM, replay determinism	-	-	-	-
Best for	social posts that show a system or agent tree "running" (X 4:5, Xiaohongshu 3:4)	docs and READMEs	sketches, whiteboarding	general programmatic video	math and explainer animation

想表达	用哪个视图	状态
循环往复的流程（agent 规划→执行→验证→反思、PDCA、发版周期）	`ring` 环形	已完成
每一步还剩多少（Bug→合并 PR、注册→付费）	`funnel` 漏斗	已完成（跨数量级的真实数据用对数宽度 + 单色重点：`examples/funnel-karpathy/`）
带分支判定和回环的嵌套工作流（外环/内环、No 就回去、人工闸门）	`loop` 分组回环图	已完成（`examples/loop-poteto/`）
谁和谁有关系、知识库/生态的聚类	`nebula` 星云/关系图谱	待做
随时间推进、多条并行泳道、依赖	`timeline` 时间线/泳道	待做
层级结构（主 agent→子 agent→工具、组织架构）	`tree` 层级树	待做
盯几个关键数字（延迟、成本、通过率）	`kpi` 仪表盘矩阵	待做
任意方框和连线的架构图	不用视图，自由摆放（三个原有例子）	已有