team-frontend-debug
CommunityDebug frontends with Chrome DevTools evidence.
Software Engineering#root-cause-analysis#evidence-collection#frontend-debugging#chrome-devtools-mcp#sse-ui-testing#rca-fix-verify#web-app-regression
Authortcytan
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It helps teams quickly reproduce frontend bugs, collect reliable browser evidence, and drive an end-to-end fix/verification loop using Chrome DevTools via MCP.
Core Features & Use Cases
- Dual-mode frontend debugging: run either feature-list testing or bug-report debugging to find issues and confirm resolutions.
- Evidence-driven RCA: captures screenshots, DOM snapshots, console logs, network traces, and optional performance traces to produce a structured root-cause analysis.
- Guided fix and verification: implements minimal, targeted code changes based on the RCA report, then re-runs the exact reproduction steps to validate outcomes.
- Session-based workflow management: organizes evidence and artifacts per session and supports resume/iteration when analysis is inconclusive.
Quick Start
Run the skill with the command team-frontend-debug followed by your feature list or bug description to generate an evidence-backed test, fix, and verification workflow.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: team-frontend-debug Download link: https://github.com/tcytan/tecton/archive/main.zip#team-frontend-debug Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.