ck:chrome-devtools

Automate browser QA with Puppeteer navigation, ARIA snapshots, and diagnostics.

Updated Mar 7, 2026
One-click install
npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ck-chrome-devtools-minhhoangdono
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:chrome-devtools
Source: https://github.com/MinhHoangDono/antigravity-kit/tree/main/.agent/skills/chrome-devtools
Command: npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ck-chrome-devtools-minhhoangdono

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, sharp, yargs, debug, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the friction of manually debugging and operating websites by automating browser actions, diagnostics, and data collection with a repeatable session workflow.

Core Features & Use Cases

  • Persistent Puppeteer Browser Sessions: Reuse a running browser across script executions (and optionally keep auth between runs).
  • Accessible Element Discovery (ARIA Snapshots): Generate an interaction-ready YAML accessibility tree with stable element refs, then drive clicks and fills by ref.
  • Diagnostics for Debugging & Optimization: Capture screenshots, console output, network activity, and performance/Core Web Vitals to pinpoint failures and slow UX.

Quick Start

Run this skill to capture a reliable visual and structured accessibility map by generating an ARIA snapshot and then interacting with elements using the returned refs for a target URL.

Frequently Asked Questions about ck:chrome-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate web scraping and form interactions across changing page layouts?

Automate web scraping and form interactions by generating an ARIA snapshot YAML file with stable element refs, then driving clicks and fills by ref to reliably target elements even when page layouts change.

Can I reuse an authenticated Puppeteer browser session across multiple script executions?

Yes, you can reuse an authenticated Puppeteer session across executions by persisting the WebSocket endpoint and maintaining cookies or tokens between runs to keep your browser context active.

How does ARIA snapshot generation work for element discovery in Puppeteer?

ARIA snapshot generation creates an interaction-ready YAML accessibility tree with stable element refs, allowing Puppeteer to discover elements and execute clicks or fills deterministically using those stable references.

What's the best way to capture Core Web Vitals and network activity for performance monitoring?

Capture Core Web Vitals and network activity by running Puppeteer-driven page diagnostics that record console output, network requests, and performance metrics to pinpoint slow UX and failures.

Does this Puppeteer automation approach require deterministic JSON outputs for QA workflows?

Yes, the Puppeteer automation approach requires deterministic JSON outputs to standardize browser-based QA workflows, ensuring reliable data collection and consistent diagnostic results across executions.

Why do my browser automation scripts fail when interacting with dynamically loaded content?

Scripts fail with dynamic content because standard selectors break; using ARIA snapshots with stable refs provides accessibility-driven element discovery to recover and interact reliably with changing page layouts.