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이라는 두 가지 시각적 테마를 지원합니다.
• 가벼운 의존성: Python 표준 라이브러리, 로컬 Chrome/Chromium 인스턴스 및 ffmpeg만 사용하여 로컬에서 실행되므로 API 키나 클라우드 서비스가 필요하지 않습니다.
• 내장 품질 관리: check_frames.py 도구가 포함되어 있어 최종 렌더링 전에 텍스트 오버플로 또는 요소 겹침과 같은 레이아웃 문제를 자동으로 감지합니다.