frontend-debug

What problem does it solve?

Frontend debugging is often a manual, iterative, and time-consuming process involving browser inspection, code changes, and re-testing. This skill automates the entire debugging lifecycle, from identifying the root cause through empirical browser observation to implementing and verifying the fix, ensuring issues are resolved quickly and reliably.

Core Features & Use Cases

• 6-Phase Autonomous Workflow: Systematically investigates, analyzes, implements, and verifies fixes for UI/UX issues, console errors, and network problems.
• Empirical Browser Verification: Uses Chrome DevTools MCP for direct browser observation and a 5-point verification checklist, ensuring fixes are truly resolved and preventing regressions.
• GitHub Issue Integration: Automatically fetches issue details, posts progress updates, requests clarification, and closes issues upon successful resolution, keeping your team informed.
• Use Case: A user reports a login button not responding. Invoke this skill with the issue number. It will launch an isolated browser, reproduce the bug, analyze console/network/DOM, propose a fix, apply it, and then empirically verify the login flow works end-to-end, updating the GitHub issue throughout the process.

Quick Start

Example: Debug a login button issue

@~/.claude/skills/frontend-debug/SKILL.md "Login button not responding"

Example: Debug a GitHub issue by number

@~/.claude/skills/frontend-debug/SKILL.md "#123"

Example: Resume a crashed debugging session

@~/.claude/skills/frontend-debug/SKILL.md