scientific-debugging
Scientific approach to debugging by using data-driven experiments rather than blind code changes.
Install
mkdir -p .claude/skills/scientific-debugging && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9732" && unzip -o skill.zip -d .claude/skills/scientific-debugging && rm skill.zipInstalls to .claude/skills/scientific-debugging
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
科学调试专家 - 观察(Observe) -> 假设(Hypothesize) -> 实验(Experiment) -> 修复(Fix)Key capabilities
- →Observe error symptoms
- →Formulate testable hypotheses
- →Execute controlled experiments
- →Verify minimal fixes
How it works
The skill follows a scientific protocol of observation, hypothesis, experimentation, and verification to isolate and resolve bugs.
Inputs & outputs
When to use scientific-debugging
- →Debugging UI interactions
- →Resolving React state synchronization issues
- →Investigating CSS style conflicts
- →Fixing network request errors
About this skill
Scientific Debugger Skill (v2.0)
Role: 拒绝"猜测驱动开发"。像科学家一样思考，用实验数据定位根因。
核心协议 (The Protocol)
1. 观察 (Observe)
- 收集现场: 用户报告了什么？错误堆栈是什么？
- 环境确认: 本地服务器是否运行？
- 现象复现: 必须 使用
browser_subagent复现问题 (Visual Proof)。
2. 假设 (Hypothesize)
基于观察，提出 1-3 个可能的根因假设：
- H1: DOM 事件未冒泡 (Event)
- H2: 状态更新被闭包捕获 (State)
- H3: 样式层叠导致的遮挡 (CSS)
3. 实验 (Experiment)
设计最小化实验验证假设：
- Console Log: 在关键路径打点。
- Browser Interaction: 模拟用户行为序列。
- Code Inspection: 检查
view_code_item.
4. 修复与验证 (Fix & Verify)
- 最小化修复: 只改根因，不附带重构。
- 回归测试: 再次运行
browser_subagent确认修复且无副作用。
调试策略库
| 问题类型 | 推荐工具 | 重点检查 |
|---|---|---|
| UI 无响应/交互失效 | browser_subagent | pointer-events, z-index, onClick vs onFocus |
| 状态不同步 | console.log + React DevTools | Zustand Selectors, React Query Cache Key |
| 样式错乱 | browser_subagent (Screenshot) | Tailwind Classes, CSS Variables |
| 网络错误 | Network Tab (via Browser) | CORS, 404/500, Payload Format |
资源索引
| 资源文件 | 用途 |
|---|---|
| browser-test-guide.md | 浏览器测试通过指南 |
| root-cause-patterns.md | 常见根因模式库 |
强制要求
- No Blind Fixes: 禁止在未复现问题前修改代码。
- Visual Evidence: 对于 UI Bug，必须看截图证明。
- Logs are Cheap: 大胆加日志，但修好后记得删。
When not to use it
- →When attempting blind fixes without reproduction
Limitations
- →Requires browser_subagent for visual proof
- →Prohibits blind fixes
How it compares
It mandates a structured, evidence-based debugging loop rather than trial-and-error code changes.
Compared to similar skills
scientific-debugging side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| scientific-debugging (this skill) | 0 | 6mo | No flags | Intermediate |
| expect | 0 | 4mo | No flags | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
| react-best-practices | 22 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
expect
zakad00e2
Use when editing .tsx/.jsx/.css/.html, React components, pages, routes, forms, styles, or layouts. Also when asked to test, verify, validate, QA, find bugs, check for issues, or fix expect-cli failures.
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
react-best-practices
redpanda-data
Client-side React performance optimization patterns.
frontend-testing
langgenius
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
verify
Use when you want to validate changes before committing, or when you need to check all React contribution requirements.