skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

kaboom-browser-ai-devtools

Correlate console logs, failed network requests, and DOM state into debugging evidence.

4|Updated May 16, 2026
Search Tags:#web vitals#mcp#playwright#network monitoring#dom inspection#browser debugging#accessibility audit
One-click install
npx skills add https://github.com/Aradotso/devtools-skills --skill kaboom-browser-ai-devtools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kaboom-browser-ai-devtools
Source: https://github.com/Aradotso/devtools-skills/tree/main/skills/kaboom-browser-ai-devtools
Command: npx skills add https://github.com/Aradotso/devtools-skills --skill kaboom-browser-ai-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging modern web apps is slow when you need to correlate console errors, failed network requests, DOM state, and user interactions across time. This Skill streamlines gathering browser evidence and turning it into actionable outputs for AI coding assistants.

Core Features & Use Cases

  • Console & error capture — Stream log/warn/error entries with full arguments for faster root-cause analysis.
  • Network failure investigation — Collect failed requests (optionally with response bodies) to pinpoint backend and auth issues.
  • DOM inspection & evidence snapshots — Query elements with CSS selectors and capture DOM snapshots to align UI changes with failures.
  • Recording and test generation — Record user interactions and generate Playwright tests to prevent regressions.
  • Quality checks — Run accessibility (WCAG) audits with export and monitor Web Vitals (LCP/CLS/INP/FCP) for performance regressions.
  • Security auditing signals — Surface credentials/PII/header/cookie issues to support safer fixes.
  • Browser automation via MCP tools — Navigate and interact programmatically to reproduce issues and verify fixes.

Quick Start

Ask your AI coding assistant to connect to the Kaboom MCP server and run kaboom_recording_start while you reproduce the bug, then stop recording and generate a Playwright test.

Frequently Asked Questions about kaboom-browser-ai-devtools

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

FAQPage Schema
How do I capture browser console errors and failed network requests for AI debugging?▼

You can capture browser console errors and failed network requests by connecting an AI coding assistant to the Kaboom MCP server. It streams console log entries with full arguments and collects failed network requests, optionally including response bodies, to pinpoint backend and auth issues for root-cause analysis.

How do I generate Playwright tests from a recorded user session?▼

To generate Playwright tests from a recorded user session, ask your AI coding assistant to run the kaboom_recording_start MCP tool while you reproduce the bug, then stop the recording. The Skill correlates your user interactions into automated Playwright tests to prevent regressions.

Can I run WCAG accessibility audits and Web Vitals monitoring locally through MCP?▼

Yes, you can run WCAG accessibility audits and Web Vitals monitoring locally through MCP tools. The Skill executes export-capable WCAG audits and monitors Web Vitals metrics like LCP, CLS, INP, and FCP to detect performance regressions directly in your local environment.

Does Kaboom Browser AI DevTools work with Playwright and MCP for browser automation?▼

Yes, Kaboom Browser AI DevTools works with Playwright and MCP for browser automation. It fulfills MCP tool requirements for streaming evidence, querying DOM state via CSS selectors, navigating programmatically, and generating Playwright tests to reproduce issues and verify fixes.

How do I inspect DOM state and snapshot UI changes during network failures?▼

You inspect DOM state and snapshot UI changes during network failures by using the Skill's DOM inspection and evidence snapshot capabilities. It allows you to query elements with CSS selectors and capture DOM snapshots to align UI changes with failed network requests and console errors.

Related Skills

Explore More Software Engineering Skills→
specs-devsspecs-devs

mcp-how-to

Configure an MCP server in Lens Studio and wire Cursor Code or Claude Code.

Official
Advanced
tarrragontarrragon

frontend-with-playwright

Validate frontend DOM topology, layout, and accessibility with Playwright.

Community
Advanced
mohitmishra786mohitmishra786

test

Generate unit, integration, and end-to-end tests with Pytest, Jest, Playwright, and k6.

Community
Advanced
Higashi-KotaHigashi-Kota

a11y

Audits UI components for WCAG 2.2 AA and ARIA compliance.

Community
Intermediate