New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Browser Debugging

by lobehub in lobehub/lobehub

Traces intermittent UI, stale state, ordering and navigation bugs through a browser to find the first boundary where correct data becomes wrong.

Custom licenceAuto-check passedDevelopment

Install Frontend Browser Debugging

skills CLI
$ npx skills add lobehub/lobehub --skill debug-frontend-with-browser -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install lobehub/lobehub debug-frontend-with-browser --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/debug-frontend-with-browser .claude/skills/debug-frontend-with-browser && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
debug-frontend-with-browser
GitHub stars
83k
Token cost
~1.7k tokens
SKILL.md length
804 words
Files
3 (incl. references)
Skills in repo
50
Repo updated
First seen
Licence
Custom licence

At a glance

Traces intermittent UI, stale state, ordering and navigation bugs through a browser to find the first boundary where correct data becomes wrong.

  • Works in 7 steps: Make the symptom falsifiable → Reproduce on the approved isolated surface → Find the first broken boundary → …
  • A UI bug appears only sometimes or only in the browser
  • SKILL.md covers Mandatory foundation, Responsibility boundary, Diagnostic workflow and Diagnostic supplements
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Extending the repository's acceptance skill, this one adds a diagnostic workflow rather than its own test process. Before touching a browser, Electron client, network or cache, the agent must read acceptance and the project's PROCESS.md in full and follow their rules for target grounding, environment and auth checks, approvals, evidence and teardown. If acceptance is unavailable or its gate is blocked, it stops.

Safety rules are explicit: use the isolated environment the project adapter selects, never the user's signed-in production browser or client, treat production investigation as read-only, and never read secret files or print credentials or full live objects, returning structural projections only. The diagnosis begins by making the symptom falsifiable with one expected invariant and one observed violation, plus the triggering action and the state before, during and after it.

It then records whether navigation, remount, refresh, tab switching or waiting changes the symptom, and compares state boundary by boundary. By its responsibility table, the skill adds minimal fixture extraction, pure-function replay, commit A/B comparison and guidance for fixing at the earliest boundary, while acceptance keeps environment isolation, authentication, approvals and publishing of evidence.

When your agent uses it

  • A UI bug appears only sometimes or only in the browser
  • Stale state, wrong ordering or broken navigation shows up after an interaction
  • A regression needs to be pinned to the commit or boundary that introduced it

Example prompts

  • “The sidebar list shows stale items after switching tabs. Find the first boundary where the data goes wrong.”
  • “Debug why messages appear in the wrong order after a refresh, using the browser.”
  • “Compare the last two commits to find where the topic list stopped updating after navigation.”

Requirements

  • The repository's acceptance skill and PROCESS.md
  • A browser or Electron environment prepared by the project adapter

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  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 the acceptance workflow for verification

What it can do on your machine

Read from SKILL.md and the folder at commit 6aaeeee. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Browser Debugging loads about 1.7k tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 44 tokens; SKILL.md has 804 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~44
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 804 words (~1,660 tokens).

“Find the first boundary where correct data becomes incorrect. This skill extends acceptance; it does not define a separate test workflow.”

— opening of SKILL.md by lobehub, Custom licence
name
debug-frontend-with-browser

Read the full SKILL.md on GitHub

Files

SKILL.md and 2 other files (references) in .agents/skills/debug-frontend-with-browser of lobehub/lobehub.

  • SKILL.md
  • agents/openai.yaml
  • references/pitfalls.md

Open the folder on GitHubat commit 6aaeeee

Compare with similar skills

Frontend Browser Debugging next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Browser Debugging compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Browser Debugging this skilllobehub/lobehub83k—~1.7kAutomated safety check: PassCustom licence
Bug Finder for daisyUIsaadeghi/daisyui43k—~2.3kAutomated safety check: PassMIT
Broken UI Debuggerreticlehq/reticle1.2k—~1.3kAutomated safety check: PassApache-2.0
Debugging Codemajiayu000/claude-skill-registry6662 repos~3.1kAutomated safety check: PassMIT
OpenLogi macOS Permissions TriageAprilNEA/OpenLogi23k—~2.5kAutomated safety check: NotesApache-2.0
Root Cause Debugginggarrytan/gstack136k—~1.4kAutomated safety check: PassMIT

Similar skills

  • Bug Finder for daisyUI

    saadeghi/daisyui

    Investigates suspected bugs in the daisyUI monorepo through read-only analysis, then writes a decision-ready fix plan in tmp/bugs without changing any product code.

    43k GitHub stars~2.3k tokensUpdated 8 days ago
    DevelopmentAuto-check passed

  • Broken UI Debugger

    reticlehq/reticle

    Finds why a running web app misbehaves when the console is empty and the code looks fine, by reading the click, request, store and console together.

    1.2k GitHub stars~1.3k tokensUpdated today
    DevelopmentAuto-check passed

  • Debugging Code

    majiayu000/claude-skill-registry

    Interactively debug source code — set breakpoints, step through execution line by line, inspect live variable state, evaluate expressions against the running program, and navigate the call stack to…

    666 GitHub starsUsed in 2 repos~3.1k tokens
    DevelopmentAuto-check passed

  • OpenLogi macOS Permissions Triage

    AprilNEA/OpenLogi

    Decides whether an OpenLogi device problem on macOS is a privacy-permission (TCC) problem, using agent log lines, and says which identity needs which grant.

    23k GitHub stars~2.5k tokensUpdated 4 days ago
    DevelopmentAuto-check: notes

  • Root Cause Debugging

    garrytan/gstack

    Investigates bugs, errors and stack traces in phases and requires a root-cause hypothesis to be confirmed before any fix is written.

    136k GitHub stars~1.4k tokensUpdated today
    DevelopmentAuto-check passed

  • Graph-Based Bug Tracing

    tirth8205/code-review-graph

    Traces a bug through a code knowledge graph, following callers, callees and execution flow before opening source files, within a small token budget.

    32k GitHub starsUsed in 1 repo~287 tokens
    DevelopmentAuto-check passed

More from lobehub/lobehub

All 50 skills in this repo

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Acceptance Evidence for Deliveries

    lobehub/lobehub

    Verifies a delivery end to end by driving the real product on a CLI, web, desktop or iOS Simulator surface, capturing evidence and publishing a round with the lh CLI.

    83k GitHub stars~9.7k tokensUpdated today
    Auto-check passed

  • Git Worktree Cleanup

    lobehub/lobehub

    Audits stale Git worktrees and branches with a bundled script, classifies each one, and deletes only after you approve the exact candidates.

    83k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • LobeHub Alint Rule Set Maintenance

    lobehub/lobehub

    Maintains LobeHub's model-backed alint rule set: writing rules, removing false positives against real code, deciding warn versus error and tracking token cost.

    83k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

  • LobeHub Builtin Tool Authoring

    lobehub/lobehub

    Guides building LobeHub builtin agent tools, from the manifest and execution runtime to executors, chat UI renders and registry wiring.

    83k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • LobeHub Data Fetching Layers

    lobehub/lobehub

    Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.

    83k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Categories

Questions about Frontend Browser Debugging

What does Frontend Browser Debugging do?

Traces intermittent UI, stale state, ordering and navigation bugs through a browser to find the first boundary where correct data becomes wrong. Extending the repository's acceptance skill, this one adds a diagnostic workflow rather than its own test process.md in full and follow their rules for target grounding, environment and auth checks, approvals, evidence and teardown.

When should I use Frontend Browser Debugging?

Frontend Browser Debugging fits situations like: A UI bug appears only sometimes or only in the browser; stale state, wrong ordering or broken navigation shows up after an interaction; A regression needs to be pinned to the commit or boundary that introduced it.

How do I install Frontend Browser Debugging in Claude Code?

Run `npx skills add lobehub/lobehub --skill debug-frontend-with-browser -a claude-code`. Or copy the skill folder (.agents/skills/debug-frontend-with-browser in lobehub/lobehub) into .claude/skills/debug-frontend-with-browser in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Browser Debugging in Codex?

Run `npx skills add lobehub/lobehub --skill debug-frontend-with-browser -a codex`. Or copy the skill folder (.agents/skills/debug-frontend-with-browser in lobehub/lobehub) into .agents/skills/debug-frontend-with-browser in your project. Codex loads it when a task matches its description.

Can I use Frontend Browser Debugging in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lobehub/lobehub --skill debug-frontend-with-browser -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/debug-frontend-with-browser, .gemini/skills/debug-frontend-with-browser, .github/skills/debug-frontend-with-browser and .opencode/skills/debug-frontend-with-browser in your project.

What does Frontend Browser Debugging need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Browser Debugging is instructions for the agent only. Our summary lists: The repository's acceptance skill and PROCESS.md; A browser or Electron environment prepared by the project adapter.

Does Frontend Browser Debugging access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Browser Debugging safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Browser Debugging use?

Frontend Browser Debugging has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Frontend Browser Debugging use?

About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 987 tokens, read only when the agent opens those files.

What are the alternatives to Frontend Browser Debugging?

Skills that share tags, products or a category with Frontend Browser Debugging: Bug Finder for daisyUI (saadeghi/daisyui, 43k stars), Broken UI Debugger (reticlehq/reticle, 1.2k stars), Debugging Code (majiayu000/claude-skill-registry, 666 stars) and OpenLogi macOS Permissions Triage (AprilNEA/OpenLogi, 23k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Browser Debugging?

lobehub (a GitHub organization) maintains it in lobehub/lobehub, which has 83,044 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 8, 2026.

Source: lobehub/lobehub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.