browser-testing-with-devtools

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger

When building or debugging anything running in a browser
When /test-driven-development needs browser-side verification

Mechanism

Connect to browser instance via Chrome DevTools MCP protocol
Agent can execute DOM queries, read console logs, inspect network waterfall, record performance traces
Supports screenshot comparison and visual output verification
Agent analyzes results after each operation and decides next steps

Outcome

Runtime diagnosis report: DOM state, error list, network request analysis, performance metrics, and optimization suggestions

Use Cases

Two Typical Use Cases

Scenario 01

Frontend UI Debugging and Verification

After modifying frontend components, developers use this skill to let the agent open the browser, inspect DOM structure, capture console errors, and verify style changes. The agent can see live page state and confirm fixes work without manual screenshots or descriptions.

Scenario 02

Performance Bottleneck Diagnosis

When pages load slowly or interactions lag, the agent uses this skill to capture performance traces via DevTools, analyze Core Web Vitals, identify layout shifts and long tasks, producing precise bottleneck localization and optimization suggestions.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

test-driven-developmentWorkflow

Tier 2 · Current Skill

browser-testing-with-devtoolsCLI Manual

Tier 3 · I Use These Skills

No explicit dependency on other Skills

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.

Skill File

SKILL.md

Open in GitHub ↗

SKILL.mdLoading from GitHub…

Skill Composition

Open in GitHub ↗

SKILL.md100.0%

▸skills/browser-testing-with-devtools/
▸browser-testing-with-devtools
- ·SKILL.md

Per the Agent Skills spec, SKILL.md is the only required file. The colored bars classify the rest into the three spec-aligned optional directories (scripts / references / assets) and an 'other' bucket. The full directory tree is below.

Related in Skillset

You May Also Need These Skills

api-and-interface-design

Guides agents to design stable, hard-to-misuse public interfaces using contract-first principles. Covers REST, GraphQL, module boundaries, component props, emphasizing Hyrum's Law, One-Version Rule, error semantics, and boundary validation. Produces consistent, maintainable, well-documented interface specifications.

Workflow

ci-cd-and-automation

CI/CD automation skill that guides agents to set up and maintain automated build and deployment pipelines. Emphasizes shifting quality gates left, integrating tests, lint, type checking, and build verification into every change. Follows the "smaller is faster is safer" principle with frequent small releases.

Workflow

code-review-and-quality

Code review and quality skill that guides agents to conduct multi-axis code reviews covering correctness, design, maintainability, security, and performance. Emphasizes change sizing (~100 lines), severity labels (Nit/Optional/FYI), and splitting strategies to ensure code quality before every merge.

Workflow

code-simplification

Code simplification skill that guides agents to simplify complex code without changing behavior. Applies Chesterton's Fence (understand before removing), Rule of 500 (split large files), and refactoring techniques like reducing nesting and eliminating duplication. Produces clearer, more maintainable code.

Workflow

When It Triggers · How It Works · What It Produces

Trigger

Mechanism

Outcome

Two Typical Use Cases

Frontend UI Debugging and Verification

Performance Bottleneck Diagnosis

Which Skills I Use · Which Skills Use Me

Full Relationship Graph

SKILL.md

Skill Composition

You May Also Need These Skills

api-and-interface-design

ci-cd-and-automation

code-review-and-quality

code-simplification

/browser-testing-with-devtools

Two Typical Use Cases

Frontend UI Debugging and Verification

Performance Bottleneck Diagnosis

SKILL.md

Skill Composition

When It Triggers · How It Works · What It Produces

Trigger

Mechanism

Outcome

You May Also Need These Skills

api-and-interface-design

ci-cd-and-automation

code-review-and-quality

code-simplification

Which Skills I Use · Which Skills Use Me

Full Relationship Graph