debug-frontend-with-browser
Frontend diagnosis extension for agent-testing. Use for intermittent rendering, ordering, stale-state, navigation, virtual-list, React/Zustand, optimistic-update, refresh-dependent, or browser-only failures where the first broken boundary may be DOM, component input, derived state, client cache, network data, or a pure transformation. Before any browser, Electron, or live-app interaction, this skill must load and follow agent-testing; it adds only boundary tracing, minimal fixture replay, and regression attribution.
Profile →npx skills add lobehub/lobehub --skill debug-frontend-with-browser --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Debug Frontend with Browser Find the first boundary where correct data becomes incorrect. This skill extends `agent-testing`; it does not define a separate test workflow. ## Mandatory foundation Before any browser, Electron, network, cache, or application interaction: 1. Read [`../agent-testing/SKILL.md`](../agent-testing/SKILL.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 `agent-testing` 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 obje
- Mandatory foundation
- Responsibility boundary
- Diagnostic workflow
- 1. Make the symptom falsifiable
- 2. Reproduce on the approved isolated surface
- 3. Find the first broken boundary
- 4. Build the smallest safe fixture
- 5. Attribute with the same fixture
- 6. Fix the earliest incorrect boundary
- 7. Return to agent-testing for verification
- Diagnostic supplements
What does the debug-frontend-with-browser skill do?
Frontend diagnosis extension for agent-testing. Use for intermittent rendering, ordering, stale-state, navigation, virtual-list, React/Zustand, optimistic-update, refresh-dependent, or browser-only failures where the first broken boundary may be DOM, component input, derived state, client cache, network data, or a pure transformation. Before any browser, Electron, or live-app interaction, this skill must load and follow agent-testing; it adds only boundary tracing, minimal fixture replay, and regression attribution.
How do I install it?
Run `npx skills add lobehub/lobehub --skill debug-frontend-with-browser --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.