ythx-101/live-panel-skill

解決する課題

ソーシャルメディア（X や小紅書など）向けに、ライブ監視ダッシュボードのようなプロフェッショナルでアニメーション化されたアーキテクチャ図を作成する際の難しさを解決します。要素を手動でアニメーション化したり、複雑なビデオコードを書いたりする代わりに、単一の JSON ファイルでシステムのレイアウトと動作を定義できます。

仕組み

このプロジェクトは、レンダラーおよびエージェントのスキルとして機能します。ボックス、ワイヤー、パケットフロー、ログ、カウンターを定義した JSON 設定ファイルを提供します。システムは決定論的な「モーション文法」を使用しており、各フレームが時間の純粋関数であるため、一貫性のある再現可能なアニメーションが保証されます。これらの設定を H.264 MP4 ビデオ、またはブラウザでループ再生可能な自己完結型の HTML ページとしてレンダリングします。また、テキストのオーバーフローやレイアウトの重なりをチェックする検証スクリプトが含まれており、最終的な出力の品質を保証します。

対象ユーザー

エージェントのアーキテクチャ、システムデータフロー、またはマルチエージェントツリーを可視化したい AI 研究者、エンジニア、コンテンツクリエイター向けに設計されています。特に、Claude Code や Cursor を使用して、エージェントが自身のアーキテクチャ図を自動生成・検証するワークフローに図生成を統合したい場合に非常に有用です。

ハイライト

• 決定論的アニメーション： 固定シードの時刻ベースのレンダリングエンジンを使用し、毎回同一のフレームを生成します。
• エージェント対応： SKILL.md ファイルが含まれており、AI エージェントが自身のアーキテクチャ図を作成、レンダリング、自己検証できます。
• マルチプラットフォーム対応： 標準的なソーシャルメディアのアスペクト比（4:5, 3:4, 1:1）と、terminal-dark および light-pastel という2つの視覚テーマをサポートしています。
• 軽量な依存関係： Python 標準ライブラリ、ローカルの Chrome/Chromium インスタンス、ffmpeg のみを使用してローカルで実行され、API キーやクラウドサービスは不要です。
• 組み込みの品質管理： check_frames.py ツールが含まれており、最終レンダリング前にテキストのオーバーフローや要素の重なりなどのレイアウト問題を自動的に検出します。