SkillsAdd

smithery/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.

Installation

$ npx skills add smithery/aiskillstore --skill dev-tools-skill
View on skills.sh ↗ Website ↗

Summary

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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
azure-diagnostics Shared topics
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs
azure-validate Shared topics
microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure…

567.7K installs
supabase-postgres-best-practices Shared topics
supabase/agent-skills

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill …

391.6K installs
chrome-devtools Similar name
github/awesome-copilot

Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP.…

14.9K installs
devtools Similar name
vercel-labs/json-render

Drop-in inspector panel for any json-render app.

4.6K installs

Also in this package

Other skills from smithery/aiskillstore · top by installs.

npx skills add smithery/aiskillstore
zod-validation-patterns 0 zig-docs 0 youtrack 0 yaml-authoring 0 workflow-guide 0 when-setting-network-security-use-network-security-setup 0 when-reviewing-pull-request-orchestrate-comprehensive-code-revie 0 when-gathering-requirements-use-interactive-planner 0 when-deploying-cloud-swarm-use-flow-nexus-swarm 0 voice-agent-expert 0

Browse all from smithery/aiskillstore

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,534 B
  • docs SUMMARY.md 312 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

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 → take_snapshot.
  • 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 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: 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.
  • Open failing request details (getnetworkrequest), 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.