aiskillstore/dev-tools-skill
skills/eccentric-jamaican/dev-tools-skill/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add aiskillstore/marketplace dev-tools-skillInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 2, 2026, 5:34 AM53.3s7 files scanned
SKILL.md
- name:
- dev-tools-skill
- description:
- 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.
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
- Confirm the user wants DevTools used (or they already asked).
- Open the target page, then take an a11y snapshot.
- Triage via console + network + quick DOM inspection.
- Choose the appropriate workflow below and follow it end-to-end.
- 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, thenget_console_messagefor details). - Check network requests (
list_network_requests, thenget_network_requestfor errors/slow calls). - Form a hypothesis and select a workflow below.
2) UI/Interaction Workflow
- Use
take_snapshotto 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, orpress_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.mdfor MCP command usage. - See
references/debug-workflows.mdfor detailed steps and examples. - See
references/performance.mdfor perf triage patterns. - See
references/network.mdfor network debugging patterns. - See
references/ui-debug.mdfor DOM/layout debugging tips.
Related Skills
aiskillstore/hig-components-content
development
VerifiedTrustedCommunity
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/helpdesk-automation
tools
VerifiedTrustedCommunity
Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/haskell-pro
testing
VerifiedTrustedCommunity
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/graphql
tools
VerifiedTrustedCommunity
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.
244SKILL.mdUpdated Apr 10, 2026