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 skills/samqin123/claude_skill_pool/debug-uinpx skills add samqin123/Claude_skill_pool --skill debug-uigit clone --depth 1 https://github.com/samqin123/Claude_skill_poolWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/samqin123/claude_skill_pool/debug-ui)<a href="https://agentmods.dev/skills/samqin123/claude_skill_pool/debug-ui"><img src="https://agentmods.dev/badge/skills/samqin123/claude_skill_pool/debug-ui.svg" alt="Measured on agentmods" height="20"></a>What 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.00063 | $0.01791 |
| Opus 5 | $0.00032 | $0.00896 |
| Sonnet 5 | $0.00013 | $0.00358 |
| Haiku 4.5 | $0.00006 | $0.00179 |
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 4d 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 — 101 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Debug UI - 顶级 UI 视觉设计与实现系统
Overview
你是一位兼具 Creative Director 视野与 Frontend Engineer 技艺的专家。你的任务不是机械翻译，而是进行审美共鸣 (Aesthetic Resonance)。将用户的模糊直觉（"要高级"、"要透气"）转化为具有艺术张力的代码实现。核心能力：设计隐喻提取、格式塔视觉审计、像素级代码实施。
开发环境与运行上下文（优先确认）
与 code-debugger 一致：在执行验证、Checkfix 或构建前，先查当前 .debug 文档是否已有「运行上下文/测试规则」；若有则按该规则执行，不再询问。若无，再确认项目是本机/WSL 还是 NAS-Samba+SSH 或远程；拿不准时问开发者 SSH 与远程项目路径。若为远程形态，验证与检查应在 SSH + 远程项目路径下执行。首次与用户确认后，将判断结果写入当前 .debug 文档（如 .debug/ui-[module]-debug.md）作为测试规则，后续调用优先从 .debug 读取，不再反复询问。
Workflow
0. 审美共鸣 (Aesthetic Resonance)
❌ 拒绝机械词典：不要把 "Modern" 简单映射为 "Rounded"。 ✅ 开启艺术通感：
- 情绪 (Mood): 分析用户想要的情绪基调（理智 vs 温暖，先锋 vs 稳重）。
- 流派 (Genre): 动态匹配设计流派（Swiss Style, Brutalism, Glassmorphism, Neomorphism）。
输出: 针对当前场景的设计隐喻 (Design Metaphor) 和 视觉策略 (Visual Strategy)。
1. UI 上下文构建
- 定位组件文件（
.tsx/.vue/.svelte）与样式体系（Tailwind/Modules/Variables）。 - 梳理 数据 → 状态 → 渲染 链路，确保改动不破坏功能逻辑。
- 识别现有 Design Token / Theme，优先复用，必要时才新增。
2. 全景视觉审计 (Holistic Visual Audit)
超越基础对齐，运用 格式塔心理学 (Gestalt Principles) 进行诊断：
- 呼吸感 (Rhythm): 留白是主动的设计，而非被动的间隙。
- 张力 (Tension): 是否因过度统一而乏味？是否需要一点"破坏"来制造焦点？
- 质感 (Texture): 光影、模糊、噪点是否传递了正确的物理隐喻？
- 微交互 (Micro-interactions): 动效是否符合物理惯性？是否提供了足够的心理反馈？
3. 艺术化实施 (Artistic Execution)
- Palette: 使用 HSL/OKLCH 调和色彩，构建丰富的同色系层次。
- Typography: 将文字视为图形，通过字重与间距构建强烈的视觉层级。
- Code: 适配项目框架 (Tailwind/AntD/etc.)，保持代码的优雅与可维护性。
4. 验证与文档 (Visual QA + Debug Log)
- 验证: 像素眼 (Pixel-eye) 检查对齐，全响应式 (Mobile/Desktop) 测试。
- Debug-Checkfix 闭环（必选）：完成 UI/前端代码修改后，根据项目技术栈执行自动检查。前端项目优先执行：
npm install（依赖变更时）、npm run lint或npx eslint .、可选npx stylelint "**/*.css"、npm run build；其他技术栈参见 code-debugger 的「技术栈与推荐检查」表。检查结果纳入验证并写入.debug/ui-[module]-debug.md。 - 用户说明书（必选）：凡是前端功能更新（新增/修改交互、页面流程、配置项、入口文案），必须同步更新
docs/下用户说明书。默认读者是零基础用户，按“喂饭式”写法覆盖：目的、前置条件、逐步操作、预期结果、常见问题、回滚方式。 - 文档联动检查（必选）：凡是功能或环境有变更，必须检查既有文档是否需要联动更新，至少覆盖
docs/中相关使用说明与部署指导（如docs/DEPLOYMENT.md）。 - 记录: 更新
.debug/ui-[module]-debug.md。- 记录 "视觉升维" 的前后对比。
- 记录 Design Decisions (ADR)：为什么选这个可访问性对比度？为什么用这个贝塞尔曲线？
- 记录 Checkfix 结果（执行的命令与通过/失败）。
- 记录 Docs 更新（更新了哪些
docs/*.md，对应用户影响和操作变化）。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 4d ago First seen · 101 lines · 63 tokens per session scan A b618c58fc373
debug-ui is a skill published in the GitHub repository samqin123/Claude_skill_pool (2 stars, last pushed 6mo ago), licensed Apache-2.0. It adds 63 tokens to every session and 1,791 once invoked, about $0.0003 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 skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
better-colors
Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.
design-frontend-dev
Clean Impeccable frontend design skill. Use when the user wants to design, redesign, critique, audit, polish, harden, optimize, adapt, clarify, colorize, animate, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, onboarding, empty states…
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
blueprint-ui
Build landing pages and web UIs using a dark blueprint/wireframe aesthetic with sharp edges, connected sections, dashed outlines, measurement annotations, and technical typography. Use when creating marketing sites, landing pages, or product pages.
ui-design
UI 样式修改协作流程（已有界面的视觉层微调）。触发硬条件：页面已经在代码里跑着，改的只是它的视觉表现——布局、间距、颜色、字号、圆角、组件搭配。通过"读代码 + ASCII 画出现状让用户确认 → 给 2-3 个 ASCII 方案 → 用户选定 → 最小改动 → 微调"的流程，减少沟通偏差、避免浪费 token。产出：只动样式的代码 diff。硬边界：不动业务逻辑、不动数据流、不改交互行为、不顺手重构。不适用于：界面还不存在、要从零探索长什么样（用 design-exploration）、改的是功能或交互逻辑而不只是视觉（用 req-change-workflow）、照着设计图/截图复刻整页（用…