Can I use this for performance auditing?

Yes, the skill can record performance traces, analyze LCP (Largest Contentful Paint) issues, and identify layout shifts to help you optimize Core Web Vitals.

How does this skill identify web elements?

It primarily uses the 'take_snapshot' tool to generate a text-based accessibility tree with unique UIDs, allowing for more reliable element selection and interaction than traditional CSS selectors.

Can I execute custom JavaScript on a page?

Yes, the 'evaluate_script' tool allows you to run any JavaScript directly in the page context to check global variables or manipulate the DOM.

Does it support handling multiple browser tabs?

Absolutely. The skill includes tools to list all open pages, open new tabs, and switch context between different pages easily.

Chrome DevTools Agent

Name: Chrome DevTools Agent
Author: rodolfolermacontreras

byrodolfolermacontreras

•

Browser Automation

Automates browser interactions, debugs web applications, and performs deep performance analysis using the Chrome DevTools Protocol.

This skill transforms Claude into a powerful browser operator capable of navigating complex web pages, interacting with DOM elements via accessibility trees, and diagnosing technical issues. It leverages the Chrome DevTools MCP server to capture screenshots, monitor network traffic, inspect console logs, and generate performance traces. Whether you are automating repetitive web tasks, performing end-to-end testing, or optimizing Core Web Vitals, this skill provides a robust framework for managing live browser sessions and extracting actionable insights directly within your development workflow.

Key Features

01Environment emulation for testing responsive layouts and varied network conditions

02Comprehensive performance profiling to identify bottlenecks and Core Web Vital issues

03Full browser automation including navigation, form filling, and element interaction

04Visual and text-based inspection using screenshots and accessibility tree snapshots

051 GitHub stars

06Advanced debugging via real-time console log monitoring and network request analysis

Use Cases

01Automated end-to-end testing and bug reproduction in a live browser environment

02Navigating and extracting data from complex, JavaScript-heavy web interfaces

03Analyzing and optimizing website performance, layout shifts, and page load speeds

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rodolfolermacontreras/microsoft-ai-learning chrome-devtools

For use in Claude.ai and ChatGPT

Key Features

01Environment emulation for testing responsive layouts and varied network conditions

02Comprehensive performance profiling to identify bottlenecks and Core Web Vital issues

03Full browser automation including navigation, form filling, and element interaction

04Visual and text-based inspection using screenshots and accessibility tree snapshots

051 GitHub stars

06Advanced debugging via real-time console log monitoring and network request analysis

Use Cases

01Automated end-to-end testing and bug reproduction in a live browser environment

02Navigating and extracting data from complex, JavaScript-heavy web interfaces

03Analyzing and optimizing website performance, layout shifts, and page load speeds

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rodolfolermacontreras/microsoft-ai-learning chrome-devtools

For use in Claude.ai and ChatGPT