一键导入
spectra-debug
Systematically debug a problem using a four-phase workflow
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Systematically debug a problem using a four-phase workflow
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create, apply, audit, and understand Variables in Figma using Google Material Design's three-tier token inheritance (Ref → Sys → Comp). Use when: creating Variables for components or screens, applying existing Variables to one node, selected nodes, a component set, or the current page, auditing token naming and structure for compliance, or having AI read existing Variables to reverse-engineer design components. Triggers: create Variables, apply Variables, Figma variables, M3 token, design token, token inheritance, token audit, audit variables, design component from variables, batch apply variables, bind variables to component, three-tier token.
Create or update PRD-led Storybook product prototypes under src/pages/prototypes with docs, typed route and transition metadata, deterministic fixtures, intuitive UI Flow review data, draggable Storybook UI Flow viewers with animated dashed arrow connections, Figma-exportable flow stories, and prototype Storybook stories. Use when building a new product prototype, turning a product idea into PRD plus UI Flow, standardizing prototype docs, updating an existing prototype flow, or preparing a Storybook prototype flow for JSON import into Figma with storybook-to-figma.
Build or update token-backed Storybook foundations, shared UI components, and stories from an extracted design-system package. Use after design-system-extractor, or when Codex must read design-system Markdown and token files, automatically trace original design sources such as Figma URLs/nodes, UI images, rendered routes, and frontend folders, infer component dependency order so core primitives are built before composed components, map component specs into a product repo, create or update Storybook docs, plan component batches, structure stories and DOM for reliable Figma export, and verify implementation with the bundled Figma export addon without bypassing tokens.
Create or update PRD-led Storybook product prototypes under src/pages/prototypes with docs, typed route and transition metadata, deterministic fixtures, UI Flow review data, and prototype Storybook stories. Use when building a new product prototype, turning a product idea into PRD plus UI Flow, standardizing prototype docs, or updating an existing prototype flow.
Create PRD-led product prototypes in Storybook with docs, deterministic data, typed UI Flow route and transition metadata, and prototype stories. Use when turning a product idea into PRD, UI Flow, Data Spec, Acceptance Criteria, and a clickable Storybook prototype; when scaffolding a new prototype folder; or when validating prototype docs and metadata across React Storybook projects.
Create PRD-led product prototypes in Storybook with docs, deterministic data, typed UI Flow route and transition metadata, and prototype stories. Use when turning a product idea into PRD, UI Flow, Data Spec, Acceptance Criteria, and a clickable Storybook prototype; when scaffolding a new prototype folder; or when validating prototype docs and metadata across React Storybook projects.
| name | spectra-debug |
| description | Systematically debug a problem using a four-phase workflow |
| license | MIT |
| compatibility | Requires spectra CLI. |
| metadata | {"author":"spectra","version":"1.0","generatedBy":"Spectra"} |
Systematically debug a problem using a four-phase workflow.
This skill enforces debugging discipline. No guessing, no random changes, no "let me try this." Every step is deliberate and evidence-based.
Input: The argument after /spectra:debug describes the bug or unexpected behavior. Examples:
/spectra:debug the search returns duplicate results/spectra:debug crash on startup after upgrading/spectra:debug file watcher misses rename eventsMaximum 3 fix attempts per hypothesis in Phase 4 (Fix). Phases 1-3 (Reproduce, Isolate, Root Cause) are investigation — they do not count toward this limit. If your third fix attempt fails:
Do NOT keep trying variations of the same approach. That's a loop, not debugging.
Before anything else, make the bug happen reliably.
If you can't reproduce it, you can't debug it. Gather more information before proceeding.
Narrow down where the bug lives.
Goal: pinpoint the exact location where behavior diverges from expectation.
Understand WHY it's broken, not just WHERE.
Ask these questions:
Don't stop at the first explanation. Verify your hypothesis:
Now — and only now — fix the bug.
tdd: true is set in .spectra.yaml, fetch TDD instructions via spectra instructions --skill tdd and follow the Red-Green-Refactor cycle| What You're Thinking | What You Should Do |
|---|---|
| "I bet it's this, let me just change it" | Reproduce first. Verify your hypothesis |
| "Let me add some prints everywhere" | Add targeted logging at specific boundaries |
| "It works on my machine" | Find what's different in the failing environment |
| "Let me try reverting this change" | Use git bisect to find the actual cause |
| "The fix is obvious, I don't need a test" | The fix is wrong. Write the test |
| "Let me just restart the service" | That hides the bug. Find the root cause |
| "Maybe if I just clear the cache..." | Understand why the cache was wrong |