skills.rest
danbri
danbriCOMMUNITY
Explore all skills by this author →
Website𝕏@danbriGitHub

debug-ux-headlessbrowser

Drive headless Chromium via chrome-devtools MCP to verify interactive UX behaviors.

1|Updated Apr 30, 2026
Search Tags:#testing#accessibility#browser#ux#shadow-dom#chromium
One-click install
npx skills add https://github.com/danbri/forgetmenot --skill debug-ux-headlessbrowser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-ux-headlessbrowser
Source: https://github.com/danbri/forgetmenot/tree/main/skills/debug-ux-headlessbrowser
Command: npx skills add https://github.com/danbri/forgetmenot --skill debug-ux-headlessbrowser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the gap between static code analysis and actual user experience by allowing you to drive a real Chromium browser to verify complex interactive behaviors that unit tests and source-grep cannot detect.

Core Features & Use Cases

  • Interactive Verification: Test modal accessibility, focus management, and keyboard contracts in a real browser environment.
  • Shadow-DOM Interrogation: Inspect and manipulate elements inside nested shadow roots that standard DOM queries cannot reach.
  • Use Case: Use this when you need to confirm that a modal correctly restores focus to the trigger button after closing, or to verify that custom-element lifecycle callbacks are firing correctly during user interaction.

Quick Start

Use the debug-ux-headlessbrowser skill to launch a new page and verify the focus restoration behavior after closing the modal.

Frequently Asked Questions about debug-ux-headlessbrowser

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

FAQPage Schema
How do I test focus management and modal accessibility in a headless browser?▼

Test focus management and modal accessibility by automating a real headless Chromium instance to verify complex interactive behaviors like focus restoration after a modal closes.

Can I inspect and interact with elements inside nested shadow-DOM roots?▼

Yes, you can interrogate and manipulate elements inside nested shadow-DOM roots that standard DOM queries cannot reach by driving a headless Chromium browser.

How do I verify custom-element lifecycle events during user interaction?▼

Verify custom-element lifecycle events by automating a real Chromium browser to drive user interactions and confirm that lifecycle callbacks fire correctly during execution.

Do I need a containerized environment to run headless Chromium for UX verification?▼

Yes, headless Chromium UX verification requires a containerized environment with a configured Chrome shim to handle root-level execution and headless rendering.

Why use a headless browser instead of static code analysis for frontend keyboard accessibility?▼

Static code analysis cannot detect actual user experience gaps, but a headless browser drives real interactive frontend behaviors to verify keyboard accessibility contracts dynamically.

What is the best way to debug interactive UX behaviors that unit tests cannot detect?▼

The best way to debug undetectable interactive UX behaviors is automating a real Chromium browser to verify complex frontend interactions like shadow-DOM focus and custom-element events.

Related Skills

Explore More Software Engineering Skills→
mheersmheers

agent-browser

Drive a headless Chromium browser for UI verification and content scraping.

Community
Intermediate
eventua11yeventua11y
1

reviewing-web-awesome

Validate Web Awesome 3 component accessibility in Eventua11y against WCAG 2.2 AA.

Official
Intermediate
nanorepublicananorepublica
61

Testing Unit Tests

Standardize unit-test coding practices across Claude Code projects.

Community
Basic
Itinerant18Itinerant18

webapp-testing

Automates local web app testing with Playwright and custom server management scripts.

Community
Intermediate