transparent-ui

SKILL.md

Build temporary debugging interfaces that make invisible system behavior visible. These are development-only routes/pages that reveal internal state, transitions, and data flow through interactive visualization.

Make the invisible visible. Show state that normally exists only in memory. Reveal transitions that happen too fast to observe. Surface the "why" behind system behavior.

Temporary by design. These are debugging tools, not production features. Keep changes isolated for easy removal. Use dev-only routes and environment checks.

대화형 시각화를 통해 복잡한 시스템의 내부 작동을 드러내는 독립형 디버깅 인터페이스를 만듭니다. 사용자가 작동 방식을 이해하고, 내부 상태를 디버그하고, 데이터 흐름을 시각화하고, 시스템과 상호 작용할 때 어떤 일이 발생하는지 확인하거나, 복잡한 메커니즘에 대한 디버그 패널을 구축하려는 경우에 사용하세요. "이것이 어떻게 작동하는지 이해가 안 됩니다", "무슨 일이 일어나고 있는지 보여주세요", "상태 머신 시각화", "이것을 위한 디버그 보기 구축", "데이터 흐름을 볼 수 있도록 도와주세요", "이것을 투명하게 만듭니다"와 같은 요청 또는 내부 시스템 동작을 이해, 디버그 또는 시각화하라는 요청에 대해 트리거됩니다. 상태 머신, 렌더링 시스템, 이벤트 흐름, 알고리즘, 애니메이션, 데이터 파이프라인, CSS 계산, 데이터베이스 쿼리 또는 명확하지 않은 내부 작업이 있는 모든 시스템에 적용됩니다. 출처: petekp/agent-skills.

원본 보기