Agent skill · software engineering · aiskillstore
dev-tools-skill
Use when the user says "use the DevTools skill" or when they need help debugging a web app with Chrome DevTools MCP (UI bugs, incorrect behavior, console errors, network/API failures, or performance/lag), especially if the user seems inexperienced and needs guided, step-by-step diagnosis.
Why this skill is useful
Provides specific workflows and commands for diagnosing and fixing frontend issues using Chrome DevTools that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Dev Tools Skill Overview Use the Chrome DevTools MCP server to diagnose and fix frontend issues by observing the live page, gathering evidence (console, network, performance), and proposing targeted code changes. Quick Start 1. Confirm the user wants DevTools used (or they already asked). 2. Open the target page, then take an a11y snapshot. 3. Triage via console + network + quick DOM inspection. 4. Choose the appropriate workflow below and follow it end-to-end. 5. Summarize findings + propose the smallest safe fix. Workflow Decision Tree UI/interaction bug (layout, hover/click, missing text): use UI/Interaction Workflow. Performance/lag (slow load, jank, long TTI): use Performance Workflow. API/network issue (failed fetch, wrong data): use Network Workflow. Runtime error (crash, blank screen, stack trace): use Console/Error Workflow. Core Workflows 1) Triage (always first) Capture state: listpages → selectpage → takesnapshot. Scan for visible errors (missing sections, broken layout) in snapshot text. Check console messages (listconsolemessages, then getconsolemessage for details). Check network requests (listnetworkrequests, then getnetworkrequest for errors/slow calls). Form a hypothesis and select a workflow below. 2) UI/Interaction Workflow Use takesnapshot to locate the target element; if unclear, takescreenshot. Inspect element text/attributes via evaluatescript (read-only DOM queries). Reproduce the issue with click, hover, or presskey. If layout is involved, measure box sizes/positions via evaluatescript. Propose minimal CSS/JS fixes; if unsure, ask 1 targeted question. 3) Performance Workflow Run a trace: performancestarttrace (reload=true) → reproduce → performancestoptrace. Identify top issue via performanceanalyzeinsight. Correlate with network timings and large asset loads. Recommend fixes: reduce bundle size, defer non-critical JS, optimize images, avoid layout thrash. 4) Network Workflow List requests and find failures/slow endpoints. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/dev-tools-skill