transparent-ui
✓创建独立的调试界面，通过交互式可视化揭示复杂系统的内部工作原理。当用户想要了解某些东西如何工作、调试内部状态、可视化数据流、查看与系统交互时发生的情况或为任何复杂机制构建调试面板时使用。触发诸如“我不明白这是如何工作的”、“告诉我发生了什么”、“可视化状态机”、“为此构建调试视图”、“帮助我查看数据流”、“使其透明”等请求，或任何理解、调试或可视化内部系统行为的请求。适用于状态机、渲染系统、事件流、算法、动画、数据管道、CSS 计算、数据库查询或任何具有非明显内部工作原理的系统。
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。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/petekp/agent-skills --skill transparent-ui- 分类
- *创意媒体
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 transparent-ui？
创建独立的调试界面，通过交互式可视化揭示复杂系统的内部工作原理。当用户想要了解某些东西如何工作、调试内部状态、可视化数据流、查看与系统交互时发生的情况或为任何复杂机制构建调试面板时使用。触发诸如“我不明白这是如何工作的”、“告诉我发生了什么”、“可视化状态机”、“为此构建调试视图”、“帮助我查看数据流”、“使其透明”等请求，或任何理解、调试或可视化内部系统行为的请求。适用于状态机、渲染系统、事件流、算法、动画、数据管道、CSS 计算、数据库查询或任何具有非明显内部工作原理的系统。 来源：petekp/agent-skills。
如何安装 transparent-ui？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/petekp/agent-skills --skill transparent-ui 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/petekp/agent-skills
详情
- 分类
- *创意媒体
- 来源
- skills.sh
- 收录时间
- 2026-02-01