avtc-pi-ui-components
PI扩展的对话框协调器与带备注的选择组件
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：avtc-pi-ui-components。 它的用途是：PI扩展的对话框协调器与带备注的选择组件 完整的 Skill 内容见：https://321skill.com/skills/avtc-pi-ui-components/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“在用户点击设置按钮时，弹出一个对话框让他们选择报告类型并填写备注。”，它会使用该Skill的协调器确保这个设置对话框不会与其他正在显示的对话框冲突，并使用“选择-备注”组件来渲染表单，用户提交后，信息会自动发送给对应的分析子代理并触发通知。
介绍
该Skill主要解决PI扩展开发中，多个对话框可能相互覆盖、导致界面混乱的问题。它提供了一个对话框协调器，确保在同一时刻只有一个对话框处于激活状态，从而维护了清晰、有序的用户界面。
使用方式是通过npm安装此UI组件库，在您的PI扩展项目中引入并调用其提供的协调器API来管理对话框的显示逻辑。同时，它还包含一个“带备注的选择”组件，该组件集成了子代理路由和通知功能，可以方便地创建需要用户选择并附加说明的交互场景。
它非常适合正在为Claude PI开发复杂交互界面的前端开发者或全栈工程师，尤其是那些需要管理多个模态弹窗或需要实现带有详细说明的选择功能的项目。
在使用时，建议开发者仔细规划应用中的对话框触发逻辑，以充分发挥协调器的管理能力。对于“选择-备注”组件，应注意其与后端子代理路由的配置，确保通知能正确发送。
核心特点
核心区别在于它不仅提供防止对话框重叠的基础协调功能，还内置了一个集成了子代理路由与通知机制的“选择-备注”复合组件，将UI交互与后端业务逻辑（代理调用与通知）进行了开箱即用的封装。
注意事项
该Skill主要针对Claude PI扩展的UI开发，不适用于通用Web应用或其他AI平台。
常见问题
这个组件库能用在普通的React项目里吗？
不能，它是专门为Claude PI扩展设计的。
子代理路由是什么意思？
指用户在选择选项并填写备注后，能自动将信息路由给指定的子AI代理进行处理。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/avtc-pi-ui-components/raw/index.md 读取 avtc-pi-ui-components 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/avtc-pi-ui-components/raw/index.md（查看排版版本）