@andy8647/pi-toolbox
pi coding agent 圆角透明工具面板
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：@andy8647/pi-toolbox。 它的用途是：pi coding agent 圆角透明工具面板 完整的 Skill 内容见：https://321skill.com/skills/andy8647-pi-toolbox/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
在 pi coding agent 配置中添加 pi-toolbox 后，所有工具（如 bash、MCP 工具）都会以圆角透明卡片展示。对 AI 说：'帮我展开当前工具并高亮 bash 命令'，它会自动聚焦当前卡片，其余卡片自动收起，同时高亮代码块。
介绍
在使用 pi coding agent 进行编码时，工具面板往往缺乏视觉层次，难以快速定位和切换工具。@andy8647/pi-toolbox 提供了一套圆角透明、带有 bash 语法高亮的工具盒子，将每个工具（包括 MCP 工具）框在独立的卡片中，点击即可单独展开，让界面更清晰、操作更直观。
安装后，只需在 pi coding agent 的配置中引入此组件，即可自动将所有工具渲染为圆角透明盒子。默认支持 bash 语法高亮，点击盒子标题可折叠/展开内容，长按或双击可单独展开当前盒子并收起其他，减少视觉干扰。
适用于需要频繁使用多个工具（如代码审查、终端命令、MCP 工具）的开发者，特别是对界面美观度和操作效率有要求的智能体开发者、全栈开发者。也适合在演示或教学场景中，让工具调用过程更清晰。
注意：该 skill 专为 pi coding agent 设计，无法直接用于其他 AI 编码代理（如 Claude、Cursor 等）。若需自定义样式或主题，可修改 CSS 变量，但当前版本不支持深色/护眼主题的自动切换。
核心特点
同类工具面板通常没有视觉分组和展开/收起交互，而 pi-toolbox 以圆角透明卡片框住每个工具，支持单独展开并高亮 bash 代码，既美观又能减少信息过载。
注意事项
仅适用于 pi coding agent，不兼容其他 AI 编码代理，且不支持深色/护眼主题的自动切换。
常见问题
如何在 pi coding agent 中安装 pi-toolbox？
运行 npm install @andy8647/pi-toolbox，然后在 pi 配置文件中引入该组件即可。
pi-toolbox 支持自定义颜色或透明度吗？
支持，通过 CSS 变量可以调整卡片背景透明度、边框颜色、圆角大小等，但需要手动修改样式。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/andy8647-pi-toolbox/raw/index.md 读取 @andy8647/pi-toolbox 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/andy8647-pi-toolbox/raw/index.md（查看排版版本）