Agent skill
Debugging
Systematic debugging framework ensuring root cause investigation before fixes. Includes four-phase debugging process, backward call stack tracing, multi-layer validation, and verification protocols. Use when encountering bugs, test failures, unexpected behavior, performance issues, or before claiming work complete. Prevents random fixes, masks over symptoms, and false completion claims.
Install this agent skill to your Project
npx add-skill https://github.com/binjuhor/shadcn-lar/tree/main/.claude/skills/debugging
SKILL.md
Debugging
Comprehensive debugging framework combining systematic investigation, root cause tracing, defense-in-depth validation, and verification protocols.
Core Principle
NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST
Random fixes waste time and create new bugs. Find the root cause, fix at source, validate at every layer, verify before claiming success.
When to Use
Always use for: Test failures, bugs, unexpected behavior, performance issues, build failures, integration problems, before claiming work complete
Especially when: Under time pressure, "quick fix" seems obvious, tried multiple fixes, don't fully understand issue, about to claim success
The Four Techniques
1. Systematic Debugging (references/systematic-debugging.md)
Four-phase framework ensuring proper investigation:
- Phase 1: Root Cause Investigation (read errors, reproduce, check changes, gather evidence)
- Phase 2: Pattern Analysis (find working examples, compare, identify differences)
- Phase 3: Hypothesis and Testing (form theory, test minimally, verify)
- Phase 4: Implementation (create test, fix once, verify)
Key rule: Complete each phase before proceeding. No fixes without Phase 1.
Load when: Any bug/issue requiring investigation and fix
2. Root Cause Tracing (references/root-cause-tracing.md)
Trace bugs backward through call stack to find original trigger.
Technique: When error appears deep in execution, trace backward level-by-level until finding source where invalid data originated. Fix at source, not at symptom.
Includes: scripts/find-polluter.sh for bisecting test pollution
Load when: Error deep in call stack, unclear where invalid data originated
3. Defense-in-Depth (references/defense-in-depth.md)
Validate at every layer data passes through. Make bugs impossible.
Four layers: Entry validation → Business logic → Environment guards → Debug instrumentation
Load when: After finding root cause, need to add comprehensive validation
4. Verification (references/verification.md)
Run verification commands and confirm output before claiming success.
Iron law: NO COMPLETION CLAIMS WITHOUT FRESH VERIFICATION EVIDENCE
Run the command. Read the output. Then claim the result.
Load when: About to claim work complete, fixed, or passing
Quick Reference
Bug → systematic-debugging.md (Phase 1-4)
Error deep in stack? → root-cause-tracing.md (trace backward)
Found root cause? → defense-in-depth.md (add layers)
About to claim success? → verification.md (verify first)
Red Flags
Stop and follow process if thinking:
- "Quick fix for now, investigate later"
- "Just try changing X and see if it works"
- "It's probably X, let me fix that"
- "Should work now" / "Seems fixed"
- "Tests pass, we're done"
All mean: Return to systematic process.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
frontend-design-pro
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
ui-ux-pro-max
Frontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces. The primary skill for design decisions before implementation. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check frontend UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
planning
Use when you need to plan technical solutions that are scalable, secure, and maintainable.
Problem-Solving Techniques
Apply systematic problem-solving techniques for complexity spirals (simplification cascades), innovation blocks (collision-zone thinking), recurring patterns (meta-pattern recognition), assumption constraints (inversion exercise), scale uncertainty (scale game), and dispatch when stuck. Techniques derived from Microsoft Amplifier project patterns adapted for immediate application.
payment-integration
Implement payment integrations with SePay (Vietnamese payment gateway with VietQR, bank transfers, cards) and Polar (global SaaS monetization platform with subscriptions, usage-based billing, automated benefits). Use when integrating payment processing, implementing checkout flows, managing subscriptions, handling webhooks, processing bank transfers, generating QR codes, automating benefit delivery, or building billing systems. Supports authentication (API keys, OAuth2), product management, customer portals, tax compliance (Polar as MoR), and comprehensive SDK integrations (Node.js, PHP, Python, Go, Laravel, Next.js).
Didn't find tool you were looking for?