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 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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" 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.1 | $0.00063 | $0.01791 |
| Opus 5.5 | $0.00025 | $0.00716 |
| Sonnet 5.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 1mo 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.
- 1mo 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 8mo 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.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
anti-slop-design
Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.
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…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
frontend-visual-qa
Audits rendered UI and specific task/object-link handoffs; excludes ordinary source citations alone. Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep. Use after UI…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.