본문으로 건너뛰기
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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

dvy1987/agent-loom
설치 방법 보기

포함된 파일(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]

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

adversarial-hat

무료

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일 업데이트

agent-builder

무료

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일 업데이트

agent-launcher

무료

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일 업데이트

agent-loom-sync

무료

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일 업데이트

agent-observability

무료

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일 업데이트

agent-run-retro

무료

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의 스킬 모두 보기

이 스킬의 문제 신고