New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Live Panel

by ythx-101 in ythx-101/live-panel-skill

Build a terminal-style, always-running animated architecture diagram (a "live panel") from a JSON config and render it to an mp4.

MITAuto-check passedDevelopment

Install Live Panel

skills CLI
$ npx skills add ythx-101/live-panel-skill --skill live-panel -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ythx-101/live-panel-skill live-panel --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
live-panel
GitHub stars
664
Token cost
~1.7k tokens
SKILL.md length
898 words
Files
31 (incl. scripts, references, assets)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Build a terminal-style, always-running animated architecture diagram (a "live panel") from a JSON config and render it to an mp4.

  • Works in 4 steps: Collect content and where each number… → Write the config. Copy an example. Place… → Render. python3 scripts/render.py… → …
  • The user wants a system
  • SKILL.md covers When to use, Input, Fixed procedure and Motion rules in one screen, plus 4 more sections
  • Calls python3

What it does

Live Panel is an agent skill from ythx-101/live-panel-skill. 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…

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 36 other files, including scripts, reference files and assets (for example `README.md`, `examples/agent-architecture/config.json` and `examples/airbnb/config.json`).

It sits in Development, covering Diagrams and Web search. It works with Xiaohongshu. The repository describes itself as: 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… The licence is MIT.

When your agent uses it

  • The user wants a system
  • Org architecture diagram that looks like a monitoring dashboard in a terminal window - fixed layout
  • Glowing packets on the wires
  • Bars that flip state - as a screen-recording-style video

Example prompts

  • “live panel”
  • “/live-panel”

Requirements

  • Python 3

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Collect content and where each number comes from. List boxes, who talks to whom, which things are "on call" triggers, what the log would…
  2. Write the config. Copy an example. Place boxes on a pixel grid (x, y, w, h in canvas px); text lines flow inside boxes at one fixed line…
  3. Render. python3 scripts/render.py --config my.json --out my.mp4 (needs Chrome/Chromium and ffmpeg on PATH, or --chrome / --ffmpeg; on…
  4. Check by frames, not by trust. python3 scripts/check_frames.py --config my.json --out-dir frames --repeat samples ~120 time points…

What it can do on your machine

Read from SKILL.md and the folder at commit 2a5dc1e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • x.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Live Panel loads about 1.7k tokens when it runs, and up to ~4.6k if it reads all its reference files. Until then it costs about 146 tokens; SKILL.md has 898 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~146
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ythx-101/live-panel-skill at commit 2a5dc1e, republished under its MIT licence (© ythx-101). 898 words, ~1,713 tokens.

Download SKILL.mdSave it as .claude/skills/live-panel/SKILL.md (or your agent's skills folder). This skill also uses 30 other files; get the full folder from GitHub.
name
live-panel
description
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 视频或循环网页）时使用——终端里一直在跑的监控面板外观，固定布局、线上流动的数据包、滚动日志、翻转的计数器和状态条；不是静态图，也不是分步演示。

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

A single JSON config (schema: references/config-schema.md). It holds everything: canvas size, colours, boxes with lines of text, wires, packet paths, side-rail triggers, log wording, numbers. The template never needs editing. Start from the closest example: examples/codex-agents/config.json (terminal-dark, 4:5, recreation of @thedelost's picture), examples/airbnb/config.json (terminal-dark, Chinese content, figures from an interview) or examples/agent-architecture/config.json (light-pastel, 3:4, a static Xiaohongshu infographic made to move, original by 小红书 @林纾). Theme: theme.preset; canvas: canvas.preset. Positions are absolute canvas pixels, so another aspect ratio needs its own config.

Fixed procedure

  1. Collect content and where each number comes from. List boxes, who talks to whom, which things are "on call" triggers, what the log would say. Write the source (link or "simulated") next to every number. If a number has no real source, it is simulated: say so on screen (a footer line, or "(illustrative)" next to the counter). Never invent a figure and present it as real.
  2. Write the config. Copy an example. Place boxes on a pixel grid (x, y, w, h in canvas px); text lines flow inside boxes at one fixed line height. Put the credit/source line in credit. Read references/motion-grammar.md before choosing machines and periods.
  3. Render. python3 scripts/render.py --config my.json --out my.mp4 (needs Chrome/Chromium and ffmpeg on PATH, or --chrome / --ffmpeg; on macOS the browser is also found under /Applications/*.app). Linux and macOS only - on Windows run the scripts inside WSL. --html-out page.html also keeps the self-contained page, which runs live in any browser.
  4. Check by frames, not by trust. python3 scripts/check_frames.py --config my.json --out-dir frames --repeat samples ~120 time points, measures text overflow and overlaps from the DOM, exports PNGs and proves replay determinism. Open the PNGs and look: the checker catches geometry, not taste. Fix the config and repeat until it exits 0.
Show full SKILL.md (371 more words)Show less

Motion rules in one screen

(Full text and rationale: references/motion-grammar.md.)

  • Layout never moves. No camera, no step-by-step reveal. Frame 0 is already a complete diagram.
  • Three tempos at once: fast (packets with trails on every wire, spinners, fast counters), medium (log scrolls with newest line bright and older grey; bars re-roll and flip colour and label past a threshold), slow (side-rail triggers light up one at a time in order, their arrow changes colour and carries a packet, advice is typed out, totals accumulate).
  • One truth everywhere. The number in the log is the number on the bar; the trigger lit in the rail is the one the log mentions; counters in the status bar equal counters in boxes. In this engine that holds by construction: log lines are generated from the same state machines as the boxes.
  • No real data? Say "illustrative". Fixed facts stay fixed; only the animation's own counters move, and they are labelled.

Determinism (why it renders the same every time)

The page exposes window.seek(t). Every visual is a pure function of t (and a fixed integer seed for the few "random" picks): no wall clock, no Math.random, no CSS animation. The renderer calls seek(i/fps) and screenshots; check_frames.py --repeat seeks away and back and compares bytes. Opened in a normal browser (no ?manual), the same function is driven by requestAnimationFrame and loops.

Files

  • assets/template.html - the generic page. scripts/render.py - mp4. scripts/check_frames.py - checks + PNGs. scripts/livepanel.py - shared helpers (Chrome over the DevTools pipe, stdlib only).
  • references/motion-grammar.md, references/config-schema.md.
  • examples/codex-agents/, examples/airbnb/, examples/agent-architecture/ - config, mp4 and screenshots.

Light theme notes

For infographics keep the original colours and structure; motion is gentler: small packets drift along every arrow, state-bound arrows turn the accent colour and carry two packets, active boxes get a glow, lists (steps, tools) light one row at a time from one shared cycle machine so that everything on screen refers to the same step. Use container:true on boxes that hold other boxes so the checker does not call nested boxes overlapping, and inside:true on icon text placed on a box.

Credit rule

Always put the original author and link of any picture you re-animate or recreate in the video footer (credit) and in the post. State when a figure is simulated.

© ythx-101, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 30 other files (scripts, references, assets) in the repository root of ythx-101/live-panel-skill.

  • SKILL.md
  • .gitignore
  • LICENSE
  • README.md
  • assets/template.html
  • examples/agent-architecture/agent-architecture.mp4
  • examples/agent-architecture/config.json
  • examples/agent-architecture/screenshots/frame_1.png
  • examples/agent-architecture/screenshots/frame_2.png
  • examples/agent-architecture/screenshots/frame_3.png
  • examples/airbnb/airbnb.mp4
  • examples/airbnb/config.json
  • examples/airbnb/screenshots/frame_1.png
  • examples/airbnb/screenshots/frame_2.png
  • examples/airbnb/screenshots/frame_3.png
  • … and 16 more

Open the folder on GitHubat commit 2a5dc1e

Compare with similar skills

Live Panel next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Live Panel compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Live Panel this skillythx-101/live-panel-skill664—~1.7kAutomated safety check: PassMIT
A Stock Predictiondigoal/blog8.6k—~2.2kAutomated safety check: PassGPL-2.0
Us Stock Predictiondigoal/blog8.6k—~1.9kAutomated safety check: WarnGPL-2.0
Agent ReachPanniantong/Agent-Reach94k—~1.4kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
SVG Diagram GeneratorJimLiu/baoyu-skills26k1 repos~3.1kAutomated safety check: PassMIT

Similar skills

  • A Stock Prediction

    digoal/blog

    A股个股次日(T+1)走势预测 skill。当用户输入A股股票代码(如 600519、000858、300750、688981、430090)或公司名称(如"贵州茅台"、"宁德时代"、"比亚迪"),并要求预测次日走势、给出交易计划、评估盈亏概率时,触发本 skill。skill 会用 mcpMiniMaxwebsearch…

    8.6k GitHub stars~2.2k tokensUpdated today
    Productivity & AutomationAuto-check passed

  • Us Stock Prediction

    digoal/blog

    美股个股次日走势预测 skill。当用户输入美股股票代码(如 AAPL、TSLA)或公司名称(如 "苹果"、"特斯拉"),并要求预测次日(T+1)走势、给出交易计划、评估盈亏概率时,触发本 skill。skill 会用 mcpMiniMaxwebsearch 搜证盘前 90…

    8.6k GitHub stars~1.9k tokensUpdated today
    Productivity & AutomationAuto-check: warnings

  • Agent Reach

    Panniantong/Agent-Reach

    Routes web research and platform lookups across 16 sites, including Twitter, Reddit, YouTube, Bilibili, Xiaohongshu and GitHub, through one command-line tool.

    94k GitHub stars~1.4k tokensUpdated yesterday
    Productivity & AutomationAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated 7 days ago
    DevelopmentAuto-check: notes

  • SVG Diagram Generator

    JimLiu/baoyu-skills

    Creates standalone dark-themed SVG diagrams, including architecture, flowchart, sequence, structural, mind map, timeline and state machine types.

    26k GitHub starsUsed in 1 repo~3.1k tokens
    DevelopmentAuto-check passed

  • Beautify GitHub Readme

    oil-oil/beautify-github-readme

    Redesign GitHub README homepages or create project-native pure SVG, hybrid SVG-composed PNG/WebP, and opt-in animated GIF assets.

    1.8k GitHub stars~4.1k tokensUpdated 5 days ago
    DevelopmentAuto-check passed

Works with

Categories

Questions about Live Panel

What does Live Panel do?

Build a terminal-style, always-running animated architecture diagram (a "live panel") from a JSON config and render it to an mp4. Live Panel is an agent skill from ythx-101/live-panel-skill. Build a terminal-style, always-running animated architecture diagram (a "live panel") from a JSON config and render it to an mp4.

When should I use Live Panel?

Live Panel fits situations like: the user wants a system; org architecture diagram that looks like a monitoring dashboard in a terminal window - fixed layout; glowing packets on the wires; bars that flip state - as a screen-recording-style video.

How do I install Live Panel in Claude Code?

Run `npx skills add ythx-101/live-panel-skill --skill live-panel -a claude-code`. Or copy the skill folder (the ythx-101/live-panel-skill repository) into .claude/skills/live-panel in your project. Claude Code loads it when a task matches its description.

How do I install Live Panel in Codex?

Run `npx skills add ythx-101/live-panel-skill --skill live-panel -a codex`. Or copy the skill folder (the ythx-101/live-panel-skill repository) into .agents/skills/live-panel in your project. Codex loads it when a task matches its description.

Can I use Live Panel in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ythx-101/live-panel-skill --skill live-panel -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/live-panel, .gemini/skills/live-panel, .github/skills/live-panel and .opencode/skills/live-panel in your project.

What does Live Panel need to run?

Going by SKILL.md and its folder, Live Panel needs the command-line tools its instructions call (python3). Our summary lists: Python 3.

Does Live Panel access the network?

SKILL.md names 1 domain. As links in the text: x.com. This is read from the text; nothing was executed.

Is Live Panel safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Live Panel use?

Live Panel is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Live Panel use?

About 1.7k tokens (SKILL.md is roughly 6.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.9k tokens, read only when the agent opens those files.

What are the alternatives to Live Panel?

Skills that share tags, products or a category with Live Panel: A Stock Prediction (digoal/blog, 8.6k stars), Us Stock Prediction (digoal/blog, 8.6k stars), Agent Reach (Panniantong/Agent-Reach, 94k stars) and Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Live Panel?

ythx-101 (a GitHub user) maintains it in ythx-101/live-panel-skill, which has 664 GitHub stars. The repository was last updated on October 7, 2026.

Source: ythx-101/live-panel-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.