Agent skill · software engineering · lobehub
debug-frontend-with-browser
Use for intermittent UI, stale state, ordering, navigation or browser-only bugs. Extends acceptance with boundary tracing and regression diagnosis.
Why this skill is useful
Adds specific boundary tracing and regression attribution techniques for frontend debugging that are not commonly known.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 81,352 stars on the source repository.
What this skill does
Debug Frontend with Browser Find the first boundary where correct data becomes incorrect. This skill extends acceptance; it does not define a separate test workflow. Mandatory foundation Before any browser, Electron, network, cache, or application interaction: 1. Read ../acceptance/SKILL.md and the project's PROCESS.md in full. 2. Follow its target grounding, living logs, project adapter, environment and auth checks, approval gate, evidence rules, publication, and teardown. 3. Enter this diagnostic workflow only after acceptance has established the approved execution surface. If its environment or auth gate is blocked, stop there instead of inventing another execution path. 4. Use the isolated environment and fixture strategy selected by the project adapter. Never use the user's signed-in production browser or Electron client as a fixture container or test sandbox. 5. Treat an explicit production investigation as read-only unless the user separately authorizes an exact live mutation and the project adapter permits it. This skill never grants production-mutation authority. 6. Never read secret files or print credentials, tokens, private content, or full live objects. Return structural projections only. If acceptance is unavailable, say so and stop before touching a live surface. Responsibility boundary acceptance owns This skill adds ------------------------------------------- -------------------------------------- Environment isolation and service lifecycle Falsifiable symptom and event timeline Authentication and fixture seeding Boundary-by-boundary state comparison Browser/Electron driver setup Safe minimal fixture extraction Approval and mutation authority Pure-function replay and commit A/B Evidence, report, publication, teardown Earliest-boundary fix guidance Do not duplicate or weaken acceptance rules here. When the two skills appear to conflict, acceptance and the project layer control execution. Diagnostic workflow 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lobehub/debug-frontend-with-browser--1b343e