whereismyai
Live Panel Skill
Live Panel Skill is a configuration-driven tool that converts a JSON system description into a terminal-style or light-theme animated diagram.
Live Panel Skill renders static system descriptions into animated visuals, such as terminal-style diagrams or light-theme infographics. Users define architecture through a single JSON file, which the system converts into H.264 mp4 videos or live, self-contained web pages. The tool uses a motion grammar to simulate packet flows, scrolling logs, state counters, and triggered highlights. It operates deterministically using a fixed-seed integer hash, ensuring identical visual output across render passes. This tool is designed to be used as a skill within AI agents, such as Claude Code, by placing the folder in the agent's skills directory.
Live Panel Skill at a glance
Key features
- Converts JSON config files into animated diagrams
- Generates H.264 mp4 video output
- Produces self-contained, live interactive web pages
- Includes terminal-dark and light-pastel visual themes
- Supports customizable canvas ratios
- Provides automated frame verification with checkframes.py
- Uses a deterministic motion grammar for consistent playback
Use it for
- Creating animated architecture diagrams for social media
- Visualizing AI agent workflows and system states
- Rendering flowcharts with flowing packets and updating logs
Alternatives to Live Panel Skill
- Agent Skills — Encodes senior-engineer workflows and quality gates into 24 skills.
- Draw.io Skill — Synchronizes diagrams with code changes without discarding manual layout adjustments.
- Skills — Provides specific agent skills for UI polish, color systems, and accessibility reviews.
- UI Skills — Curated skills for building polished frontend interfaces.
- Playwright Skill — Generates and runs real, persistent Playwright code instead of simple scripts.
- Livecanvas — Automates the creation of animated Live Photos for AI coding assistants.
- Garden Skills — Provides specialized, reusable workflows for common AI coding agent tasks.
- LiveAgent — It operates your local file system, runs commands, and manages scheduled background tasks.
- GSAP Skills — Teaches coding agents accurate GSAP usage, patterns, and best practices.
- Rossark Motion Skill — Fixes common agent animation mistakes for natural movement.
- Dashi PPT Skill — Generates browser-editable presentations with 12 built-in visual themes and 1020 layouts.
- Guizang PPT Skill — Generates structured, professional HTML decks directly inside AI agent workflows.
All Live Panel Skill alternatives