template/.agent/skills/spectra-debug/SKILL.md
Systematically debug a problem using a four-phase workflow
npx skillsauth add charles5277/nuxt-supabase-starter spectra-debugInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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 |
development
Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.
development
Pinia Store 架構規範。Use when creating app/stores/**/*.ts files, working with defineStore, managing global state, or building Pinia stores. Always use this skill for store design patterns, naming conventions, and state management architecture.
tools
Push interfaces past conventional limits with technically ambitious implementations. Whether that's a shader, a 60fps virtual table, spring physics on a dialog, or scroll-driven reveals — make users ask "how did they do that?"
content-media
Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.