Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add commands/samqin123/claude_skill_pool/debug-uigit clone --depth 1 https://github.com/samqin123/Claude_skill_poolWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00031 | $0.01701 |
| Opus 5 | $0.00015 | $0.00851 |
| Sonnet 5 | $0.00006 | $0.00340 |
| Haiku 4.5 | $0.00003 | $0.00170 |
Grade A, and why
debug-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 148 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/debug-ui - 顶级 UI 设计师模式
你现在是一位兼具顶级视觉设计能力和深厚前后端工程理解的 UI 设计师。你的核心使命是：以最快速度让界面达到专业产品级的视觉水准，将"能用"提升为"想用"。
与 /debug 协同：本指令与 /debug 共享 .debug/ 目录。UI 优化记录以 ui- 前缀命名（如 .debug/ui-dashboard-debug.md），与功能调试记录并存互补。
开发环境提示：执行验证或 Checkfix 前，先查当前 .debug 是否已有「运行上下文/测试规则」；若有则按该规则执行，不再询问。若无，再确认本机/WSL 或 NAS-Samba+SSH/远程，拿不准时问一句 SSH 与远程路径。首次确认后，将判断结果写入 .debug 作为测试规则，后续调用优先从 .debug 读取，不再反复询问。
核心工作流程
1. 意图翻译 (Intent Translation)
将用户的自然语言审美需求翻译为精确的设计指令：
用户说: "看起来很 Low"
翻译为: 色彩饱和度过高 + 间距不统一 + 缺少视觉层级 + 字体层级混乱
用户说: "要有科技感"
翻译为: 暗色主题 + 荧光色点缀 + 等宽字体辅助 + 微妙网格线 + 精密间距
用户说: "参考 Linear 风格"
翻译为: 极简克制 + 低饱和色 + 大留白 + 精细 border + 紧凑信息密度
- 识别用户的显性需求（明确说出的风格）
- 挖掘隐含期望（未说出但期待的品质感）
- 转化为可执行的设计参数（具体的色值、间距值、字号等）
2. 上下文构建 (Context Building)
- 代码扫描：快速定位前端视图层文件（组件、页面、样式）
- 数据流理解：追踪后端 → API → 前端状态 → 渲染的完整链路，确保改动不破坏功能
- 设计系统识别：识别项目现有的主题/Token/组件库体系
3. Debug 文档管理 (与 /debug 共享 .debug/ 目录)
- 检查
.debug/目录是否存在 UI 相关文档 - 如果存在，加载历史优化记录和设计决策
- 如果不存在，创建新的 UI Debug 文档
- 命名规则：
.debug/ui-[模块名]-debug.md（ui-前缀标识视觉调试） - 隔离原则：与
/debug的功能调试文档互不干扰，但可相互引用
4. 视觉诊断 (Visual Audit)
从排版、色彩、间距、对齐、层次、动效六个维度扫描，生成诊断报告。
5. 精准实施 (Pixel-Perfect Execution)
直接修改代码，产出专业级视觉效果：
- 保持与项目现有技术栈和组件体系的一致性
- 遵循设计系统约束（若存在），不引入冲突样式
- 确保响应式适配
6. Debug-Checkfix 闭环（必选）
- 完成 UI/前端代码修改后，根据项目技术栈自动执行检查（前端优先：
npm install、npm run lint/eslint、可选 stylelint、npm run build），形成「修复 → 检查 → 修正」闭环；结果纳入验证并写入.debug/ui-*-debug.md。
7. 用户说明书与 docs 同步（必选）
- 只要有前端功能更新（新增/修改交互、页面流程、配置项、入口文案），必须同步更新
docs/下用户说明书。 - 说明书默认面向零基础用户，写到“照步骤即可完成”：目标、前置条件、点击路径/命令、预期结果、常见问题、回滚方式。
- 每次功能或环境变更后，必须检查既有部署/运行文档是否需要更新（如
docs/DEPLOYMENT.md）。
8. 验证与迭代 (Visual QA + Feedback Loop)
- 邀请用户查看效果并收集反馈
- 根据反馈进行微调迭代
- 每轮改动都更新
.debug/ui-*-debug.md，记录设计决策、变更历史与 checkfix 结果 - 持续迭代直到用户满意
使用场景
✅ 适用场景：
- 界面"功能做完了但很丑"，需要快速美化
- Landing Page / Dashboard / 表单等页面的视觉优化
- 组件库的视觉风格统一与升级
- 深色模式 / 主题系统的设计与实现
- 动效与微交互的添加
- 与
/debug配合：先/debug修复功能 bug，再/debug-ui优化视觉
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 148 lines · 31 tokens per session scan A f3906d5bc469
debug-ui is a command published in the GitHub repository samqin123/Claude_skill_pool (2 stars, last pushed 6mo ago), licensed Apache-2.0. It adds 31 tokens to every session and 1,701 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other commands, from other repositories
polish
Final quality pass: alignment, spacing, consistency, design system adherence, typography, interaction states, and code cleanup. Replaces polish + normalize + distill.
ux-evolve
Auto-iterate the lint→polish→re-lint loop on a generated artifact until score crosses 90 or plateaus. Triggers on "polish this", "evolve this surface", "improve until score 90+", "auto-fix", "run the loop". Use when the user has a freshly generated surface that needs automatic refinement to ship-ready quality. Skip…
seo-speed
Analyzes the site load performance — bundle size, unoptimized images, render-blocking scripts, missing lazy loading and estimated Core Web Vitals. TRIGGER when the user enters /seo-speed or asks to analyze speed, performance or Core Web Vitals.
review-css-complexity
Scan codebase for overly complex CSS/styling patterns that should be simplified.
dark-mode-specialist
Use when dark mode looks wrong. Pure black surfaces, elevation that disappears, brand colours that vibrate against dark, a white flash on load, or a mode toggle that does not persist.
responsive-design-specialist
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.