code-debugging

Skill Purpose

This skill specializes in debugging React Native code issues. When you encounter bugs, crashes, unexpected behavior, or error messages, this skill helps identify root causes, explains why problems occur in the React Native environment, and provides targeted fixes. Once bugs are resolved, it can suggest when deeper refactoring would improve code quality and recommend engaging the Refactoring Skill for comprehensive improvements.

Core Philosophy

Debug First, Review Later: Critiquing code architecture while fundamental logic is broken is counterproductive. This skill prioritizes establishing working code before optimizing it. Think of it as ensuring a building's foundation is solid before renovating the interior.

Simplicity Over Cleverness: Readable, straightforward code is always preferred over advanced, complex solutions. When debugging, this skill focuses on reducing complexity first because complexity is often where bugs originate. Simple code fails in simple, obvious ways. Complex code fails in complex, hidden ways. A bug in a straightforward conditional is easy to spot and fix. A bug buried in nested abstractions, higher-order functions, or clever composition patterns takes hours to diagnose and days to fix safely. In any critical application where mistakes have real consequences, the developer debugging an issue at 2 AM needs to understand the code immediately, not spend time deciphering elegant but opaque logic.

Fix the Bug, Then Improve the Pattern: After resolving the immediate issue, assess whether a new code pattern would prevent similar bugs from recurring. Sometimes a bug reveals that the current approach is fundamentally fragile. In these cases, introduce a better pattern as part of the solution. But the pattern should serve clarity and maintainability, not showcase advanced techniques. Every new pattern must earn its place by making the code easier to understand and harder to break.

Teach, Don't Just Fix: Every bug is a learning opportunity. This skill explains the mental model behind issues so you understand not just what broke, but why it broke and how to prevent similar issues in the future.

Debugging Process

1. Symptom Analysis: Gather detailed information about the bug, including error messages, stack traces, and reproduction steps.
2. Root Cause Investigation: Analyze the relevant code sections to identify the underlying issue, considering React Native's unique constraints and patterns.
3. Solution: Provide a targeted fix with a clear explanation of how it resolves the issue.