本文へ移動
cccskills
無料GitHub で公開

browser-testing-with-devtools

Test and debug browser UIs using Chrome DevTools MCP — DOM inspection, console errors, network requests, performance traces, and visual verification. Load when building or debugging anything that renders in a browser, verifying a UI fix, profiling Core Web Vitals in a real page, or the user asks for browser testing with DevTools. Requires chrome-devtools MCP configured. Not for backend-only or CLI work. Pairs with frontend-design and performance-optimization.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md4.3 KB
  • references/examples.md2.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Browser Testing with DevTools

Use Chrome DevTools MCP to verify runtime behavior — what the user sees, not what static analysis guesses.

Hard Rules

  • Verify in browser before claiming a UI fix works.
  • Use isolated profile by default (--isolated); never use personal browser for untrusted pages.
  • Read-only JS in page context unless user explicitly approves mutations.
  • Capture evidence: screenshot, console excerpt, network failure, or trace — not vibes.
  • Reproduce from a clean navigation when debugging flaky UI.

Setup (chrome-devtools MCP)

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
    }
  }
}

Use --autoConnect only when logged-in state is required — document the security trade-off.


Workflow

Step 1 — Define what to verify

State: URL, user action, expected DOM/console/network outcome.

Step 2 — Navigate and observe

  • Screenshot for visual state
  • Console for errors/warnings
  • Network for failed requests or wrong payloads
  • DOM/a11y tree for structure and labels

Step 3 — Diagnose

Map symptom → tool: layout → computed styles; slow paint → performance trace; API bug → network panel.

Step 4 — Fix in code, re-verify

Same steps as Step 2 after change; keep before/after screenshots when useful.

Step 5 — Report

Include evidence snippets and whether issue is fully resolved or partially mitigated.


When NOT to use

  • Pure server/API changes with no browser surface
  • Environments where MCP cannot run (document manual repro instead)

Gotchas

  • Stale service worker caches mask fixes — hard refresh or disable SW when debugging.
  • Flaky tests from animation timing — wait for stable selectors.
  • --autoConnect exposes personal cookies and history.
  • Executing arbitrary JS in page can mutate production-like data.

Common Rationalizations

ExcuseReality
"The code looks correct"Runtime DOM, CSS cascade, and race conditions disagree.
"Unit tests cover it"JSDOM does not run full layout, fonts, or real network.
"I'll check the browser later"Later never comes; verify before marking done.
"MCP is too heavy"One screenshot + console read often saves hours of guesswork.
"It's just a CSS tweak"Tweaks cause CLS and overflow bugs visible only live.

Output Format

## Browser verification — [feature]

URL: [path]
Steps: [actions]
Evidence: [screenshot/console/network]
Result: [pass/fail + notes]

Examples

<examples> <example> <input>"Button click does nothing on /checkout."</input> <output>Console: `TypeError` on click handler; network shows no POST; fix null guard; re-verify POST 200 and success UI.</output> </example> </examples>

Verification

  • Reproduced issue in browser with evidence captured
  • Post-fix verification on same steps
  • No new console errors on happy path
  • Isolated profile used (or autoConnect risk documented)
  • Network/DOM findings tied to specific code change

Red Flags

  • UI fix claimed done without browser verification
  • Personal browser profile used on untrusted pages
  • Page-context JS mutates state without explicit approval
  • Stale service worker cache masks whether fix works

Prune Log

Last pruned: 2026-07-04

  • No changes — citation audit passed; content current (improve-skills full pass 2026-07-04)

Impact Report

URL: [path] | Issue: [one line]
Evidence: [screenshot/console/network]
Status: [fixed/partial/blocked]

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Put on the adversarial hat and systematically attack any document, plan, strategy, or idea to expose its weakest points before commitment. Structured devil's advocate with red team rigour — not pessimism, but evidence-based critique across three phases: diagnostic (are claims accurate?), creative (is the problem artificially constrained?), challenge (are solutions robust?). Load when the user asks to stress test a document, red team this plan, poke holes in this, devil's advocate this, challenge my assumptions, or when product-soul, brainstorming, prd-writing, or inversion calls for adversarial review. Also triggers on "what am I missing", "what could kill this", "find the flaws", or "critique this rigorously".

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

Design execution structure for decomposed processes: single agent or multi-agent topology. Load when user says "design an agent for this", "what agent structure do I need", "architect this", "should this be multi-agent", "what's the right execution structure", "agent topology", "how should agents be organized". Takes process-decomposer output as primary input. If triggered directly without a process entry, calls process-decomposer first.

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

Internal skill. Called by setup-evaluation after a PASS. Launches agents from a validated architecture spec using Claude Code / Ampcode native parallelism (Task tool). Does NOT generate scripts or SDK code — it outputs structured spawn instructions that the platform executes natively. Never invoked directly by the user. Never launches without a setup-evaluation PASS.

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

Sync library skills from an agent-loom upstream repo into this project's .agents/skills while preserving project-local and forked skills. Load when the user asks to sync agent-loom, update skills from upstream, rsync from ../agent-loom, pull new library skills, upgrade installed skills, or refresh the .agents folder without losing custom project skills. Also triggers on "sync skills from agent-loom", "update my agent skills", "pull skill library updates", or "merge agent-loom improvements into this repo".

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

Instrument a shipped product's AI agents with tracing and observability so you can see what they did, why outputs happened, and what each run cost. Plain-language primer plus free-tier-first backend selection (Langfuse, Phoenix, LangSmith, Braintrust) and OpenTelemetry/OpenInference instrumentation. Load when the user asks to add observability, add tracing, instrument my agents, see what my agent is doing in production, set up Langfuse or Phoenix or LangSmith, debug why my agent gave a bad answer, or track LLM cost per request. Also fires when agent-system-architecture or setup-evaluation requires an observability plan for an agent-chain product. NOT for tracing the coding agent itself — that is run-trace. Precondition for runtime-learning-loop.

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

Run a structured retrospective after development-phase runs of your product's agents — interview the owner in plain language about what went well and poorly, draft ranked improvement hypotheses, then design and run small n=1/n=2 experiments with pre-declared success criteria, guardrails, stop conditions, and a cost/ROI kill-switch. Load when the user says how did that run go, retro this run, the agent output was bad, what should we improve, draft hypotheses, run a small experiment, or after repeated dev runs of an agentic system produce uneven quality. Priority: output quality over performance over cost, each with diminishing-returns stops. NOT a product A/B test (experimentation), NOT coding-agent harness repair (harness-evolution), NOT production-scale learning (runtime-learning-loop).

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

dvy1987 のスキルをすべて見る

このスキルの問題を報告する