shre-skills
Skill usage guide
Browser DevTools for Chrome and React
Find the cause of a failed request or slow interaction. Start with a compact overview, then inspect the relevant network request, console error, stored state, trace, or React component.
Keep it for ongoing work.
bunx skills add shreyam1008/shre-skills --skill browser-devtoolsRequires Bun and Node.js. Run in your project and choose your coding agent. Prefer npm with Node.js?
npx skills add shreyam1008/shre-skills --skill browser-devtoolsHow it works
- Connect to the intended Chrome page and reproduce the issue.
- Collect focused evidence, then follow the request, code, or component responsible.
- Verify the cause. When a fix is requested, repeat the same scenario and run the project's checks.
Use once without installing the skill
Copy this prompt into your coding agent and replace the task placeholder. The prompt links the public guidance; the tools required by the task still need to be available.
Diagnose this Chrome app issue: [Paste the URL, reproduction steps, and expected behavior]. Use available native agent-browser and Google Chrome, reproduce the issue, and inspect relevant requests, console errors, storage, traces, or React components. Report the evidence, supported cause, and verification; state missing tool prerequisites. For detailed guidance, read https://skills.shreyam1008.com.np/skills/browser-devtools/SKILL.md and only needed linked references; apply it without installing the skill.
Requires the native agent-browser CLI and Google Chrome. The skill installs instructions; it does not install the controller or connect an MCP server. It reads installed tool help and schemas, with official Chrome DevTools for advanced analysis.
Tool setup and documentation ↗
React inspection starts with the component tree and selected props/state. Render timing needs a development or profiling build. The CLI's aggregate recorder has fewer details than React DevTools Profiler.