Not in the top 1,000 by GitHub stars

ythx-101/live-panel-skill

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).

Engineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 439c9addce7e

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 439c9addce7e7ac2b4e384aa847a351926c8f945

845GitHub stars

21stars in 7 days

1skill in this repository

38commits in 30 days

Heat

7.7

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Individual skills in this repository

live-panel /

How it works

live-panel

When your agent uses it

Build a terminal-style, always-running animated architecture diagram (a "live panel") from a JSON config and render it to an mp4. Use when the user wants a system, agent or org architecture diagram that looks like a monitoring dashboard in a terminal window - fixed layout, glowing packets on the wires, scrolling log, counters, bars that flip state - as a screen-recording-style video or a live web page, instead of a static picture or a step-by-step reveal. 中文：当用户要做"活的"架构图、agent 树或系统监控面板风格的动画（mp4 视频或循环网页）时使用——终端里一直在跑的监控面板外观，固定布局、线上流动的数据包、滚动日志、翻转的计数器和状态条；不是静态图，也不是分步演示。

What it loads into context

Frontmatter

189 tokens

Always available to the agent

SKILL.md

2,697 tokens

When the skill is activated

Reference documents

20,524 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

When to use
Input
Choosing a view (视图)
Fixed procedure
Motion rules in one screen
Determinism (why it renders the same every time)
Files
Light theme notes
Credit rule

Scripts executed separately

assets/views/excalidraw.js
assets/views/funnel.js
assets/views/loop.js
assets/views/ring.js
assets/views/sketchboard.js
examples/excalidraw-aqua/build_config.py
examples/excalidraw-gardener/build_config.py
scripts/check_frames.py
scripts/excalidraw_import.py
scripts/fetch_fonts.sh
scripts/livepanel.py
scripts/render.py
scripts/scaffold.py
scripts/verify_view.py
tests/test_cycle_replay.py

Files

.gitignoreasset52 bytes
CITATION.cffasset967 bytes
LICENSEasset1,080 bytes
NOTICEasset1,172 bytes
README.mddoc26,858 bytes
SKILL.mdcore11,091 bytes
SKILL.mdcore11,091 bytes
SKILL.mdcore11,091 bytes
SKILL.mdcore11,091 bytes
assets/fonts/Excalifont-OFL.txtdoc5,195 bytes
assets/fonts/Excalifont-Regular-Latin.woff2asset24,956 bytes
assets/fonts/SmileySans-OFL.txtdoc4,422 bytes
assets/fonts/SmileySans-Oblique.woff2asset1,150,924 bytes
assets/fonts/Xiaolai-OFL.txtdoc4,432 bytes
assets/template.htmlasset36,737 bytes
assets/views/LUCIDE-LICENSE.txtdoc3,208 bytes
assets/views/ROUGH-LICENSE.txtdoc1,068 bytes
assets/views/excalidraw.jsruns51,227 bytes
assets/views/funnel.jsruns15,899 bytes
assets/views/loop.jsruns76,084 bytes
assets/views/ring.jsruns15,518 bytes
assets/views/sketchboard.jsruns19,194 bytes
examples/agent-architecture/agent-architecture.mp4asset1,517,724 bytes
examples/agent-architecture/config.jsonasset38,019 bytes
examples/agent-architecture/preview.webpasset1,245,016 bytes
examples/airbnb/airbnb.mp4asset1,953,949 bytes
examples/airbnb/config.jsonasset20,808 bytes
examples/airbnb/preview.webpasset1,444,464 bytes
examples/codex-agents/codex-agents.mp4asset1,921,998 bytes
examples/codex-agents/config.jsonasset19,549 bytes
examples/codex-agents/preview.webpasset1,644,334 bytes
examples/excalidraw-aqua/README.mddoc760 bytes
examples/excalidraw-aqua/build_config.pyruns6,763 bytes
examples/excalidraw-aqua/config-3x4.jsonasset8,522 bytes
examples/excalidraw-aqua/config-4x5.jsonasset8,519 bytes
examples/excalidraw-aqua/preview.webpasset2,386,222 bytes
examples/excalidraw-gardener/README.mddoc671 bytes
examples/excalidraw-gardener/build_config.pyruns6,578 bytes
examples/excalidraw-gardener/config-3x4.jsonasset7,756 bytes
examples/excalidraw-gardener/config-4x5.jsonasset7,753 bytes
examples/excalidraw-gardener/preview.webpasset1,272,822 bytes
examples/excalidraw-import/agent-loop.excalidrawasset6,885 bytes
examples/excalidraw-import/agent-loop.mp4asset1,674,200 bytes
examples/excalidraw-import/config.jsonasset4,012 bytes
examples/funnel-karpathy/config.jsonasset1,190 bytes
examples/funnel/config.jsonasset1,237 bytes
examples/funnel/funnel.mp4asset1,112,073 bytes
examples/funnel/preview.webpasset486,662 bytes
examples/hybrid-agent/README.mddoc729 bytes
examples/hybrid-agent/config.jsonasset6,335 bytes
examples/loop-poteto/config.jsonasset6,793 bytes
examples/loop-poteto/loop-poteto.mp4asset2,209,234 bytes
examples/loop-poteto/preview-dark.webpasset653,572 bytes
examples/loop-poteto/preview-light.webpasset642,264 bytes
examples/minimal/config.jsonasset1,966 bytes
examples/minimal/preview.webpasset149,846 bytes
examples/ring/config.jsonasset940 bytes
examples/ring/preview.webpasset154,476 bytes
examples/ring/ring.mp4asset607,359 bytes
llms.txtdoc4,879 bytes
references/config-schema.mddoc5,066 bytes
references/motion-grammar.mddoc6,574 bytes
references/verify-view.mddoc3,346 bytes
references/view-rules.mddoc4,410 bytes
references/views.mddoc25,299 bytes
scripts/check_frames.pyruns4,688 bytes
scripts/excalidraw_import.pyruns15,079 bytes
scripts/fetch_fonts.shruns528 bytes
scripts/livepanel.pyruns10,427 bytes
scripts/render.pyruns3,894 bytes
scripts/scaffold.pyruns25,576 bytes
scripts/verify_view.pyruns29,192 bytes
tests/test_cycle_replay.pyruns3,817 bytes

Read SKILL.md


# live-panel

Turn a description of a system into an **always-running architecture diagram**: one fixed page that looks like a monitoring panel of a running system. Every frame is a complete, readable diagram; what moves is system state, not decoration. Two built-in themes: `terminal-dark` (the original look) and `light-pastel` (white background, rounded pastel boxes - for infographics, e.g. Xiaohongshu). Canvas presets: `4:5` (X, 1200x1500), `3:4` (Xiaohongshu, 1080x1440), `1:1` (1080x1080). Intended as the base for posts on X and Xiaohongshu.

> **Credit.** The look and the motion idea come from an architecture-diagram clip by **@thedelost** (a Codex agent-tree panel, generated with GPT and screen-recorded as a web page): https://x.com/thedelost/status/2105398038026195279 . It reached many people through a quote-post by **@slashui**: https://x.com/slashui/status/2105850132365443528 . This skill is an independent re-implementation of the *method* (the motion grammar was learned by analysing that clip). `examples/codex-agents/` is a recreation of the original picture and stays the original author's design. Keep this credit when you publish output made with the skill's Codex example.

## When to use

- The user asks for an architecture / agent-tree / org-chart / data-flow diagram that should feel alive (video, GIF-like loop, or live page).
- The user has a description of a system with a few boxes, a flow between them, a few "on call" side triggers, a log and some numbers.
- Not for: diagrams that need interaction, real telemetry, or step-by-step explanations (use a slide or a normal diagram tool).

## Input

View the complete source on GitHub

Skills included

live-panel

Repository facts

License: MIT
Created: Oct 3, 2026
Last pushed: Oct 20, 2026
Forks: 110
Open issues: 1
Project activity: Active

Rank over the last 12 weeks

Now #1,000 · best #816 · down 86 in 30 days

#872 on Oct 21
#842 on Oct 22
#854 on Oct 23
#975 on Oct 25
#999 on Oct 28
#1,000 since Nov 1

19 earlier periods

#914 on Sep 27
#865 on Oct 3
#888 on Oct 4
#889 on Oct 5
#861 on Oct 6
#892 on Oct 7
#926 on Oct 8
#889 on Oct 9
#857 on Oct 10
#855 on Oct 11
#876 on Oct 12
#883 on Oct 13
#885 on Oct 14
#861 on Oct 15
#855 on Oct 16
#835 on Oct 17
#816 on Oct 18
#856 on Oct 19
#862 on Oct 20

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 4, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 5 notes

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
assets/views/excalidraw.js:11 Analysis incomplete: physical or joined line exceeds character limit
assets/views/excalidraw.js:9 Analysis incomplete: physical or joined line exceeds character limit

No broad tool permissions
1 dangerous shell commandin 1 file: scripts/livepanel.py:176
121 network referencesin 26 files: llms.txt:10 README.md:9 assets/template.html:64 and 23 more
2 obfuscation signalsin 2 files: assets/views/excalidraw.js:11 scripts/livepanel.py:205
No instruction overrides
15 executable scriptsin 15 files: assets/views/excalidraw.js:1 assets/views/funnel.js:1 assets/views/loop.js:1 and 12 more
2 references to secretsin 2 files: scripts/livepanel.py:143 tests/test_cycle_replay.py:21
No requests to vote in Hot

Show all 141 signals by file

`CITATION.cff`

Network accessline 12

- alias: "ythx-101"     given-names: "Qingyue"     website: "https://x.com/YuLin807"

Network accessline 13

given-names: "Qingyue"     website: "https://x.com/YuLin807" repository-code: "https://github.com/ythx-101/live-panel-skill"

Network accessline 14
```
website: "https://x.com/YuLin807"
```

Network accessline 15

repository-code: "https://github.com/ythx-101/live-panel-skill"

Network accessline 16

url: "https://github.com/ythx-101/live-panel-skill"

`NOTICE`

Network accessline 12

assets/views/loop.js embeds icon paths from Lucide (https://lucide.dev), ISC License; the

Network accessline 15

All other copyright (c) for Lucide are held by Lucide Contributors 2022. The flow drawn in examples/loop-poteto/ is described in a public post by Lauren Tan @poteto (https://x.com/poteto/status/2107510472601985336); its visual grammar follo

Network accessline 16

The flow drawn in examples/loop-poteto/ is described in a public post by Lauren Tan @poteto (https://x.com/poteto/status/2107510472601985336); its visual grammar follows an infographic by @akshay_pachaar. Iteration counts in that example ar

Network accessline 17

(https://x.com/poteto/status/2107510472601985336); its visual grammar follows an infographic

`README.md`

Network accessline 9

<sub>Grok Bot 负责人 Lauren Tan 的每日 Loop. The workflow is from [Lauren Tan @poteto](https://x.com/poteto/status/2107510472601985336); the visual grammar follows an infographic by [@akshay_pachaar](https://x.com/akshay_pachaar); icons are [Luci

Network accessline 18

- **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

Network accessline 19

- **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

Network accessline 20

- **Credit:** the look and motion idea come from a clip by [@thedelost](https://x.com/thedelost); see *Credits* below.

Network accessline 59

git clone https://github.com/ythx-101/live-panel-skill && cd live-panel-skill

Network accessline 66

> ## Credits - please read > - **The idea, the look and the motion grammar come from an architecture-diagram clip by [@thedelost](https://x.com/thedelost)** (a Codex agent-tree panel, generated with GPT, screen-recorded as a web page): <htt

Network accessline 67

> - **The idea, the look and the motion grammar come from an architecture-diagram clip by [@thedelost](https://x.com/thedelost)** (a Codex agent-tree panel, generated with GPT, screen-recorded as a web page): <https://x.com/thedelost/status

Network accessline 68

> - `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 tem

Network accessline 70

> - `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.

Network accessline 74

| terminal-dark, 4:5 - recreation of [@thedelost](https://x.com/thedelost)'s Codex agent tree | light-pastel, 3:4 - 林纾's AI Agent architecture |

Network accessline 244

动图预览：页首是 `loop` 视图（Grok Bot 负责人 Lauren Tan 的每日 Loop，流程原文 [Lauren Tan @poteto](https://x.com/poteto/status/2107510472601985336)，视觉语法参考 [@akshay_pachaar](https://x.com/akshay_pachaar)），例子画廊见 *What it looks like*，视图动图见 *Views*。动图是 WebP（一个完整循环）

Network accessline 246

**出处**：动法和样式学自 [@thedelost](https://x.com/thedelost) 的 Codex agent 分工动态图（<https://x.com/thedelost/status/2105398038026195279>），经 [@slashui](https://x.com/slashui) 引用转发（<https://x.com/slashui/status/2105850132365443528>）。`examples/codex-agen

`SKILL.md`

Network accessline 10

> **Credit.** The look and the motion idea come from an architecture-diagram clip by **@thedelost** (a Codex agent-tree panel, generated with GPT and screen-recorded as a web page): https://x.com/thedelost/status/2105398038026195279 . It re

Network accessline 64

Always put the original author and link of any picture you re-animate or recreate in the video footer (`credit`) and in the post: the author's handle **and the full URL exactly as the user gave it** (e.g. `原图：小红书 @作者《标题》 https://... · 动态复刻，

`assets/fonts/Excalifont-OFL.txt`

Network accessline 1

Excalifont (Latin subset, file Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2 from https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw/fonts/Excalifont , unmodified, renamed)

Network accessline 2

https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw/fonts/Excalifont , unmodified, renamed)

Network accessline 12

manufacturer: Your Own Font Foundry (Virgil); Ján Filípek / DizajnDesign (Excalifont, modifications) designer: Your Own Font Foundry (Virgil); Ján Filípek / DizajnDesign (Excalifont, modifications) manufacturerURL: https://dizajndesign.sk

Network accessline 13

designer: Your Own Font Foundry (Virgil); Ján Filípek / DizajnDesign (Excalifont, modifications) manufacturerURL: https://dizajndesign.sk designerURL: https://dizajndesign.sk

Network accessline 14

manufacturerURL: https://dizajndesign.sk

Network accessline 15
```
designerURL: https://dizajndesign.sk
```

Network accessline 16

license: This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL

Network accessline 18
```
http://scripts.sil.org/OFL
```

Network accessline 105

FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. licenseURL: http://scripts.sil.org/OFL

Network accessline 106

OTHER DEALINGS IN THE FONT SOFTWARE. licenseURL: http://scripts.sil.org/OFL preferredFamily: Excalifont

Network accessline 107
```
licenseURL: http://scripts.sil.org/OFL
```

`assets/fonts/SmileySans-OFL.txt`

Network accessline 1

Copyright (c) 2022--2024, atelierAnchor <https://atelier-anchor.com>,

Network accessline 4

This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL

Network accessline 6
```
http://scripts.sil.org/OFL
```

`assets/fonts/Xiaolai-OFL.txt`

Network accessline 1

Copyright 2020-2024 LXGW (https://github.com/lxgw/kose-font)

Network accessline 2

Copyright 2014 Nozomi Seto (https://ja.osdn.net/projects/setofont/)

Network accessline 4

This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL

Network accessline 6
```
http://scripts.sil.org/OFL
```

`assets/template.html`

Network accessline 64

if(el&&el.textContent.trim()) return Promise.resolve(JSON.parse(el.textContent));   var m=/[?&]config=([^&]+)/.exec(location.search);   if(m) return fetch(decodeURIComponent(m[1])).then(function(r){return r.json()});

Network accessline 65

var m=/[?&]config=([^&]+)/.exec(location.search);   if(m) return fetch(decodeURIComponent(m[1])).then(function(r){return r.json()});   return Promise.reject(new Error('no config: embed <script id="live-config" type="application/json"> or us

Network accessline 66

if(m) return fetch(decodeURIComponent(m[1])).then(function(r){return r.json()});

Network accessline 230

},  path:function(e){ // polyline (optionally with rounded corners) with an arrow head; may carry packets and change colour on a condition   var NS='http://www.w3.org/2000/svg', pts=e.points, r=e.r||0, svg=document.createElementNS(NS,'svg')

Network accessline 231

path:function(e){ // polyline (optionally with rounded corners) with an arrow head; may carry packets and change colour on a condition   var NS='http://www.w3.org/2000/svg', pts=e.points, r=e.r||0, svg=document.createElementNS(NS,'svg');

Network accessline 232

var NS='http://www.w3.org/2000/svg', pts=e.points, r=e.r||0, svg=document.createElementNS(NS,'svg');

Network accessline 309

}; function viewCtx(v){   var NS='http://www.w3.org/2000/svg';

Network accessline 310

function viewCtx(v){   var NS='http://www.w3.org/2000/svg';   return {e:v.e,rect:v.rect,root:v.root,CW:CW,CH:CH,TH:TH,dark:TH.preset!=='light-pastel',

Network accessline 311
```
var NS='http://www.w3.org/2000/svg';
```

Network accessline 377

var prob=[], items=[], boxes=[], sr=ST.getBoundingClientRect(), sc=sr.width/CW;   function R(rc){return {l:(rc.left-sr.left)/sc,t:(rc.top-sr.top)/sc,r:(rc.right-sr.left)/sc,b:(rc.bottom-sr.top)/sc}}   function contentRect(el){var g=document

Network accessline 378

function R(rc){return {l:(rc.left-sr.left)/sc,t:(rc.top-sr.top)/sc,r:(rc.right-sr.left)/sc,b:(rc.bottom-sr.top)/sc}}   function contentRect(el){var g=document.createRange(); g.selectNodeContents(el); var rs=g.getClientRects(), o=null; for(v

Network accessline 379

function contentRect(el){var g=document.createRange(); g.selectNodeContents(el); var rs=g.getClientRects(), o=null; for(var i=0;i<rs.length;i++){var q=rs[i]; if(q.width<0.5||q.height<0.5) continue; if(!o) o={left:q.left,top:q.top,right:q.ri

`assets/views/excalidraw.js`

Executable scriptline 1
```
Executable file
```

Possible obfuscationline 11

var rough=function(){"use strict";function t(t,e,s){if(t&&t.length){const[n,o]=e,a=Math.PI/180*s,h=Math.cos(a),r=Math.sin(a);for(const e of t){const[t,s]=e;e[0]=(t-n)*h-(s-o)*r+n,e[1]=(t-n)*r+(s-o)*h+o}}}function e(t,e){return t[0]===e[0]&&

`assets/views/funnel.js`

Executable scriptline 1
```
Executable file
```

Network accessline 3

(function(){   var NS = 'http://www.w3.org/2000/svg';

Network accessline 4
```
var NS = 'http://www.w3.org/2000/svg';
```

`assets/views/loop.js`

Executable scriptline 1
```
Executable file
```

Network accessline 4

(function(){   var NS = 'http://www.w3.org/2000/svg';

Network accessline 5
```
var NS = 'http://www.w3.org/2000/svg';
```

`assets/views/ring.js`

Executable scriptline 1
```
Executable file
```

`assets/views/sketchboard.js`

Executable scriptline 1
```
Executable file
```

`examples/excalidraw-aqua/README.md`

Network accessline 3

The `excalidraw` view on a recreation of the inner/outer loop diagram in the README of Google adk-recipes' Ambient Quality Agent (AQuA): https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent ,

Network accessline 4

Ambient Quality Agent (AQuA): https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent ,

Network accessline 5

shared on X by @Saboo_Shubham_: https://x.com/Saboo_Shubham_/status/2112428713979900248 .

`examples/excalidraw-aqua/build_config.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 99

"fonts": [{"family": "Excalifont", "src": "Excalifont-Regular-Latin.woff2", "weight": "400"}],                   "colors": {"bg": "#ffffff", "muted": "#5c636b", **PASTEL}},         "credit": {"text": "after Google adk-recipes AQuA diagram,

Network accessline 100

"colors": {"bg": "#ffffff", "muted": "#5c636b", **PASTEL}},         "credit": {"text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\n"

Network accessline 101

"credit": {"text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\n"

Network accessline 102

"https://x.com/Saboo_Shubham_/status/2112428713979900248 · recreation, motion illustrative · made with live-panel (excalidraw view)",

`examples/excalidraw-aqua/config-3x4.json`

Network accessline 30

},  "credit": {   "text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\nhttps://x.com/Saboo_Shubham_/status/2112428713979900248 · recreation,

Network accessline 31

"credit": {   "text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\nhttps://x.com/Saboo_Shubham_/status/2112428713979900248 · recreation, mot

Network accessline 32

"text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\nhttps://x.com/Saboo_Shubham_/status/2112428713979900248 · recreation, motion illustrati

`examples/excalidraw-aqua/config-4x5.json`

Network accessline 30

},  "credit": {   "text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\nhttps://x.com/Saboo_Shubham_/status/2112428713979900248 · recreation,

Network accessline 31

"credit": {   "text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\nhttps://x.com/Saboo_Shubham_/status/2112428713979900248 · recreation, mot

Network accessline 32

"text": "after Google adk-recipes AQuA diagram, via @Saboo_Shubham_ · https://github.com/google/adk-recipes/tree/main/core/python/ambient-quality-agent\nhttps://x.com/Saboo_Shubham_/status/2112428713979900248 · recreation, motion illustrati

`examples/excalidraw-gardener/README.md`

Network accessline 3

园丁 loop（作者自己的每日复盘 loop，https://github.com/ythx-101/gardener-loop ）用 `excalidraw` view 画成会动的手绘图，中文，4:5 和 3:4 两版。

`examples/excalidraw-gardener/build_config.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 2

"""园丁 loop in the excalidraw view (Chinese): 4:5 (X) and 3:4 (小红书). Content and figures from the gardener README (https://github.com/ythx-101/gardener-loop, the author's own loop):

Network accessline 3

Content and figures from the gardener README (https://github.com/ythx-101/gardener-loop, the author's own loop):

Network accessline 92

"colors": {"bg": "#ffffff", "muted": "#5c636b", **PASTEL}},         "credit": {"text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n"                            "门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://gith

Network accessline 93

"credit": {"text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n"                            "门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",

Network accessline 94

"门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",

`examples/excalidraw-gardener/config-3x4.json`

Network accessline 35

},  "credit": {   "text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",

Network accessline 36

"credit": {   "text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",   "y": 1412,

Network accessline 37

"text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",

`examples/excalidraw-gardener/config-4x5.json`

Network accessline 35

},  "credit": {   "text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",

Network accessline 36

"credit": {   "text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",   "y": 1472,

Network accessline 37

"text": "数据：园丁 README（B 段最佳候选 30 题 10%→57%，作者 loop 机实测；C 段「审美」攒到 5 次后作者提前批准）\n门槛 2 / 6 次借自胡海岚团队 Science 2017 · 动效为示意 · https://github.com/ythx-101/gardener-loop · live-panel excalidraw 主题",

`examples/excalidraw-import/agent-loop.excalidraw`

Network accessline 2

"type": "excalidraw",  "version": 2,  "source": "https://excalidraw.com",

Network accessline 3

"version": 2,  "source": "https://excalidraw.com",  "elements": [

Network accessline 4
```
"source": "https://excalidraw.com",
```

`examples/hybrid-agent/README.md`

Network accessline 3

Source: Jiaru Zou et al. (Stanford × Together AI), *Hybrid Reasoning Agents*, arXiv:2610.18861 — https://arxiv.org/abs/2610.18861 ;

Network accessline 4

post by @rohanpaul_ai https://x.com/rohanpaul_ai/status/2110417627608969646 . Figures: Table 1 (GAIA avg, 14B: 52.4 vs ARPO 43.7),

`examples/hybrid-agent/config.json`

Network accessline 74

},  "credit": {   "text": "来源：Jiaru Zou 等（Stanford × Together AI）arXiv:2610.18861 · via @rohanpaul_ai https://x.com/rohanpaul_ai/status/2110417627608969646 · 推理链与解码文字为示意",

Network accessline 75

"credit": {   "text": "来源：Jiaru Zou 等（Stanford × Together AI）arXiv:2610.18861 · via @rohanpaul_ai https://x.com/rohanpaul_ai/status/2110417627608969646 · 推理链与解码文字为示意",   "y": 1158,

Network accessline 76

"text": "来源：Jiaru Zou 等（Stanford × Together AI）arXiv:2610.18861 · via @rohanpaul_ai https://x.com/rohanpaul_ai/status/2110417627608969646 · 推理链与解码文字为示意",

`examples/loop-poteto/config.json`

Network accessline 17

},  "credit": {   "text": "流程原文：Lauren Tan @poteto · https://x.com/poteto/status/2107510472601985336 · 视觉语法参考 @akshay_pachaar · Lucide (ISC) · 轮次为示意",

Network accessline 18

"credit": {   "text": "流程原文：Lauren Tan @poteto · https://x.com/poteto/status/2107510472601985336 · 视觉语法参考 @akshay_pachaar · Lucide (ISC) · 轮次为示意",   "c": "muted",

Network accessline 19

"text": "流程原文：Lauren Tan @poteto · https://x.com/poteto/status/2107510472601985336 · 视觉语法参考 @akshay_pachaar · Lucide (ISC) · 轮次为示意",

`llms.txt`

Network accessline 10

- Deterministic: every frame is a pure function of time (window.seek(t)); check_frames.py measures text overflow/overlap from the DOM and proves replays are identical. - Agent skill: SKILL.md works with Claude Code, Codex and other agents t

Network accessline 11

- Agent skill: SKILL.md works with Claude Code, Codex and other agents that load SKILL.md skills. - Credit: the look and motion grammar come from an architecture-diagram clip by @thedelost (https://x.com/thedelost/status/2105398038026195279

Network accessline 12

- Credit: the look and motion grammar come from an architecture-diagram clip by @thedelost (https://x.com/thedelost/status/2105398038026195279). Recreations must credit the original author; numbers without a source are labelled "illustrativ

Network accessline 17

- [README](https://github.com/ythx-101/live-panel-skill/blob/main/README.md): overview, quick start, FAQ, comparison with Mermaid / Excalidraw / Remotion / Manim

Network accessline 18

- [SKILL.md](https://github.com/ythx-101/live-panel-skill/blob/main/SKILL.md): the agent skill - when to use it, fixed procedure, motion rules, credit rule

Network accessline 19

- [Config schema](https://github.com/ythx-101/live-panel-skill/blob/main/references/config-schema.md): every JSON key, element and state machine

Network accessline 20

- [Motion grammar](https://github.com/ythx-101/live-panel-skill/blob/main/references/motion-grammar.md): the three-tempo motion rules and timing recipe

Network accessline 21

- [Views](https://github.com/ythx-101/live-panel-skill/blob/main/references/views.md): auto-laid-out diagram shapes (`ring` loop, `funnel` conversion, `loop` nested workflow with decisions; nebula/timeline/tree/kpi planned) that work at 4:5

Network accessline 25

- [Minimal config](https://github.com/ythx-101/live-panel-skill/blob/main/examples/minimal/config.json): 1:1, three boxes, packets, a counter and a log

Network accessline 26

- [Codex agent tree](https://github.com/ythx-101/live-panel-skill/blob/main/examples/codex-agents/config.json): terminal-dark 4:5 agent-tree panel (credited recreation of @thedelost)

Network accessline 27

- [Airbnb](https://github.com/ythx-101/live-panel-skill/blob/main/examples/airbnb/config.json): terminal-dark 4:5, Chinese content, figures from a public interview

Network accessline 28

- [AI Agent architecture](https://github.com/ythx-101/live-panel-skill/blob/main/examples/agent-architecture/config.json): light-pastel 3:4 Xiaohongshu infographic made to move (credited to 小红书 @林纾)

Network accessline 29

- [Ring view](https://github.com/ythx-101/live-panel-skill/blob/main/examples/ring/config.json) and [funnel view](https://github.com/ythx-101/live-panel-skill/blob/main/examples/funnel/config.json): agent loop and bug-fix pipeline, laid out

Network accessline 30

- [Loop view](https://github.com/ythx-101/live-panel-skill/blob/main/examples/loop-poteto/config.json): outer/inner loop with decision diamonds and loop-backs, from a public thread by @poteto

Network accessline 31

- [Karpathy funnel](https://github.com/ythx-101/live-panel-skill/blob/main/examples/funnel-karpathy/config.json): real-data funnel from 8B people to 5,000, log-scale widths

Network accessline 35

- [scripts/render.py](https://github.com/ythx-101/live-panel-skill/blob/main/scripts/render.py): config -> mp4 (and --html-out page)

Network accessline 36

- [scripts/check_frames.py](https://github.com/ythx-101/live-panel-skill/blob/main/scripts/check_frames.py): overflow/overlap checks, PNG export, replay determinism

Network accessline 37

- [scripts/scaffold.py](https://github.com/ythx-101/live-panel-skill/blob/main/scripts/scaffold.py): short spec -> complete config (rows of boxes, wires, rail, log)

Network accessline 38

- [scripts/verify_view.py](https://github.com/ythx-101/live-panel-skill/blob/main/scripts/verify_view.py): view acceptance gate (3 canvases x 2 themes)

Network accessline 39

- [assets/template.html](https://github.com/ythx-101/live-panel-skill/blob/main/assets/template.html): the generic page (never edited per diagram)

Network accessline 43

- [CITATION.cff](https://github.com/ythx-101/live-panel-skill/blob/main/CITATION.cff): how to cite this repository

`references/motion-grammar.md`

Network accessline 3

Learned from an architecture-diagram clip by @thedelost (https://x.com/thedelost/status/2105398038026195279 , quoted by @slashui: https://x.com/slashui/status/2105850132365443528 ). The clip is a web page that looks like a terminal window,

`scripts/check_frames.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`scripts/excalidraw_import.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`scripts/fetch_fonts.sh`

Executable scriptline 1
```
#!/bin/sh
```

Network accessline 5

set -e cd "$(dirname "$0")/../assets/fonts" [ -f Xiaolai-Regular.ttf ] || curl -fL -o Xiaolai-Regular.ttf https://github.com/lxgw/kose-font/releases/download/v3.126/Xiaolai-Regular.ttf

Network accessline 6

cd "$(dirname "$0")/../assets/fonts" [ -f Xiaolai-Regular.ttf ] || curl -fL -o Xiaolai-Regular.ttf https://github.com/lxgw/kose-font/releases/download/v3.126/Xiaolai-Regular.ttf echo "ok: $(pwd)/Xiaolai-Regular.ttf"

Network accessline 7

[ -f Xiaolai-Regular.ttf ] || curl -fL -o Xiaolai-Regular.ttf https://github.com/lxgw/kose-font/releases/download/v3.126/Xiaolai-Regular.ttf

`scripts/livepanel.py`

Executable scriptline 1
```
Executable file
```
Access to secretsline 143
```
[Credential-related source omitted]
```
Dangerous shell operationline 176
```
def eval(self, expr):
```

Possible obfuscationline 205

return base64.b64decode(self.cmd("Page.captureScreenshot", {"format": "png"})["data"])

`scripts/render.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`scripts/scaffold.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`scripts/verify_view.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 202

var cx=(r.l+r.r)/2,cy=(r.t+r.b)/2;     if(cx>br.l&&cx<br.r&&cy>br.t&&cy<br.b){       var isS=b.namespaceURI==='http://www.w3.org/2000/svg'; var c=isS?parseC(getComputedStyle(b).fill):parseC(getComputedStyle(b).backgroundColor); if(c&&c[3]<=

Network accessline 203

if(cx>br.l&&cx<br.r&&cy>br.t&&cy<br.b){       var isS=b.namespaceURI==='http://www.w3.org/2000/svg'; var c=isS?parseC(getComputedStyle(b).fill):parseC(getComputedStyle(b).backgroundColor); if(c&&c[3]<=0.001)c=null;       if(c&&c[3]>ba){ba=c

Network accessline 204

var isS=b.namespaceURI==='http://www.w3.org/2000/svg'; var c=isS?parseC(getComputedStyle(b).fill):parseC(getComputedStyle(b).backgroundColor); if(c&&c[3]<=0.001)c=null;

`tests/test_cycle_replay.py`

Executable scriptline 1
```
Executable file
```
Access to secretsline 21
```
[Credential-related source omitted]
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 2 facts

Network access in code of documentationREADME.md:59Low confidence
Network access in prose of documentationREADME.md:74Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

ythx-101/live-panel-skill

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

live-panel

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Rank over the last 12 weeks

Before you install

CITATION.cff

NOTICE

README.md

SKILL.md

assets/fonts/Excalifont-OFL.txt

assets/fonts/SmileySans-OFL.txt

assets/fonts/Xiaolai-OFL.txt

assets/template.html

assets/views/excalidraw.js

assets/views/funnel.js

assets/views/loop.js

assets/views/ring.js

assets/views/sketchboard.js

examples/excalidraw-aqua/README.md

examples/excalidraw-aqua/build_config.py

examples/excalidraw-aqua/config-3x4.json

examples/excalidraw-aqua/config-4x5.json

examples/excalidraw-gardener/README.md

examples/excalidraw-gardener/build_config.py

examples/excalidraw-gardener/config-3x4.json

examples/excalidraw-gardener/config-4x5.json

examples/excalidraw-import/agent-loop.excalidraw

examples/hybrid-agent/README.md

examples/hybrid-agent/config.json

examples/loop-poteto/config.json

llms.txt

references/motion-grammar.md

scripts/check_frames.py

scripts/excalidraw_import.py

scripts/fetch_fonts.sh

scripts/livepanel.py

scripts/render.py

scripts/scaffold.py

scripts/verify_view.py

tests/test_cycle_replay.py

How the signals fit together

Works with

You might also use

mattpocock/skills

obra/superpowers

NousResearch/hermes-agent

multica-ai/andrej-karpathy-skills

anthropics/skills

DietrichGebert/ponytail

`SKILL.md`

`CITATION.cff`

`NOTICE`

`README.md`

`SKILL.md`

`assets/fonts/Excalifont-OFL.txt`

`assets/fonts/SmileySans-OFL.txt`

`assets/fonts/Xiaolai-OFL.txt`

`assets/template.html`

`assets/views/excalidraw.js`

`assets/views/funnel.js`

`assets/views/loop.js`

`assets/views/ring.js`

`assets/views/sketchboard.js`

`examples/excalidraw-aqua/README.md`

`examples/excalidraw-aqua/build_config.py`

`examples/excalidraw-aqua/config-3x4.json`

`examples/excalidraw-aqua/config-4x5.json`

`examples/excalidraw-gardener/README.md`

`examples/excalidraw-gardener/build_config.py`

`examples/excalidraw-gardener/config-3x4.json`

`examples/excalidraw-gardener/config-4x5.json`

`examples/excalidraw-import/agent-loop.excalidraw`

`examples/hybrid-agent/README.md`

`examples/hybrid-agent/config.json`

`examples/loop-poteto/config.json`

`llms.txt`

`references/motion-grammar.md`

`scripts/check_frames.py`

`scripts/excalidraw_import.py`

`scripts/fetch_fonts.sh`

`scripts/livepanel.py`

`scripts/render.py`

`scripts/scaffold.py`

`scripts/verify_view.py`

`tests/test_cycle_replay.py`