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.
Best use case
dev-tools-skill is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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.
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.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "dev-tools-skill" skill to help with this workflow task. Context: 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.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/dev-tools-skill/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How dev-tools-skill Compares
| Feature / Agent | dev-tools-skill | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
SKILL.md Source
# 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: `list_pages` → `select_page` → `take_snapshot`. - Scan for visible errors (missing sections, broken layout) in snapshot text. - Check console messages (`list_console_messages`, then `get_console_message` for details). - Check network requests (`list_network_requests`, then `get_network_request` for errors/slow calls). - Form a hypothesis and select a workflow below. ### 2) UI/Interaction Workflow - Use `take_snapshot` to locate the target element; if unclear, `take_screenshot`. - Inspect element text/attributes via `evaluate_script` (read-only DOM queries). - Reproduce the issue with `click`, `hover`, or `press_key`. - If layout is involved, measure box sizes/positions via `evaluate_script`. - Propose minimal CSS/JS fixes; if unsure, ask 1 targeted question. ### 3) Performance Workflow - Run a trace: `performance_start_trace` (reload=true) → reproduce → `performance_stop_trace`. - Identify top issue via `performance_analyze_insight`. - 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. - Open failing request details (`get_network_request`), capture status, timing, payload. - Cross-check console for CORS or runtime fetch errors. - Suggest fixes: endpoint URL, headers/auth, payload shape, caching, retries. ### 5) Console/Error Workflow - Read console errors and stack traces in full. - Identify the first failing module/function; map to code location if possible. - Confirm if error is user-triggered vs load-time. - Suggest smallest code change + safe rollback steps. ## UX & Safety Rules - Explain actions in plain language; assume the user is less experienced. - Avoid submitting forms or destructive actions without explicit user confirmation. - Keep fixes minimal and reversible; call out any risk. ## References - See `references/mcp-cheatsheet.md` for MCP command usage. - See `references/debug-workflows.md` for detailed steps and examples. - See `references/performance.md` for perf triage patterns. - See `references/network.md` for network debugging patterns. - See `references/ui-debug.md` for DOM/layout debugging tips.
Related Skills
security-scanning-tools
This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detect malware", "check cloud security", or "evaluate system compliance". It provides comprehensive guidance on security scanning tools and methodologies.
scanning-tools
This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detec...
red-team-tools
This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate su...
red-team-tools-and-methodology
This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or needs security researcher techniques and tool configurations from top bug bounty hunters.
n8n-mcp-tools-expert
Expert guide for using n8n-mcp MCP tools effectively. Use when searching for nodes, validating configurations, accessing templates, managing workflows, or using any n8n-mcp tool. Provides tool selection guidance, parameter formats, and common patterns.
tools-ui
Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
receipt-scanning-tools
This skill helps you work with the receipt scanning tools in the nonprofit_finance_db project. It includes manual entry tools, automated OCR scanning, and database integration for tracking receipts...
ai-tools
Reference for all AI tools available in DBX Studio's AI chat system. Use when adding, modifying, or debugging AI tool definitions, tool execution, or provider integrations.
scvi-tools
This skill should be used when working with single-cell omics data analysis using scvi-tools, including scRNA-seq, scATAC-seq, CITE-seq, spatial transcriptomics, and other single-cell modalities. Use this skill for probabilistic modeling, batch correction, dimensionality reduction, differential expression, cell type annotation, multimodal integration, and spatial analysis tasks.
deeptools
NGS analysis toolkit. BAM to bigWig conversion, QC (correlation, PCA, fingerprints), heatmaps/profiles (TSS, peaks), for ChIP-seq, RNA-seq, ATAC-seq visualization.
chrome-devtools
Control Chrome browser programmatically using chrome-devtools-mcp. Use when user asks to automate Chrome, debug web pages, take screenshots, evaluate JavaScript, inspect network requests, or interact with browser DevTools. Also use when asked about browser automation, web scraping, or testing websites.
chrome-devtools-debugging
Debug and analyze web applications using Chrome DevTools MCP. Use for console log inspection, network request monitoring, performance analysis, and debugging authenticated sessions. For basic browser automation (screenshots, form filling), use browser-discovery skill instead.