skills.rest
arinhubcom
arinhubcomOFFICIAL
Explore all skills by this author →
GitHub

ah-fix-dom-flash

Detect and debug DOM flash bugs from framework rendering timing races.

Updated Aug 27, 2026
Search Tags:#debugging#frontend#chrome-devtools#detect#flicker#dom-flash
One-click install
npx skills add https://github.com/arinhubcom/arinhub-dev-skills --skill ah-fix-dom-flash
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ah-fix-dom-flash
Source: https://github.com/arinhubcom/arinhub-dev-skills/tree/main/skills/ah-fix-dom-flash
Command: npx skills add https://github.com/arinhubcom/arinhub-dev-skills --skill ah-fix-dom-flash

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

The skill detects and debugs DOM flash/flicker artifacts that occur when UI updates race with rendering, causing brief misplacements, ghost elements, or visual glitches.

Core Features & Use Cases

  • Detects and records overlays, portals, and animated elements that flash due to lifecycle timing.
  • Reproduces and logs one-frame flashes and position-lost events using a Chrome DevTools CLI workflow.
  • Works with the bundled detectors in scripts/flash-detector.js and the collector in scripts/collect-flash-results.js, and can be configured via window.__flashDetectorConfig.

Quick Start

Run the flash detector on a page and collect results to identify the root cause.

Frequently Asked Questions about ah-fix-dom-flash

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

FAQPage Schema
How do I debug DOM flash and flicker caused by rendering race conditions?▼

To debug DOM flash and flicker, this Skill uses Chrome DevTools CLI to detect and log one-frame visual glitches caused by timing races between framework DOM manipulation and rendering. It captures brief misplacements and ghost elements for root cause analysis.

What causes ghost elements to briefly appear after closing a modal or popover?▼

Ghost elements and DOM flash occur due to lifecycle timing races between UI updates and rendering. Overlays, portals, and animated elements briefly appear in wrong positions or lose opacity and transform states during these interactions.

Can I use Chrome DevTools to detect one-frame position-lost events?▼

Yes, you can detect one-frame position-lost events using the bundled flash-detector.js script within a Chrome DevTools CLI workflow. The collector script then aggregates these detected flash results to identify the rendering race condition.

How do I configure DOM flash detection for specific page elements?▼

You can configure DOM flash detection by setting parameters on the window.__flashDetectorConfig object before running the detector. This allows you to target specific overlays, portals, or animated elements experiencing lifecycle timing races.

Does this DOM flicker detector work with drag-and-drop interactions?▼

Yes, the DOM flicker detector works with drag-and-drop interactions, as well as popover and modal closures. It specifically records visual artifacts like opacity glitches and position-lost events triggered by these framework DOM manipulations.

Related Skills

Explore More Software Engineering Skills→
sadie100sadie100

mobile-view-debugger

Automate mobile web UI debugging with Chrome DevTools and Python scripts.

Community
Advanced
skyasu2skyasu2
2

playwright-triage

Analyze Playwright test-results to classify E2E failures and generate Markdown diagnosis reports.

Community
Advanced
ybbms777ybbms777
1

julik-frontend-races-reviewer

Detect frontend race conditions and lifecycle cleanup gaps in async code.

Community
Intermediate
nimadorostkarnimadorostkar
25

visual-qa

Automate visual regression testing and responsive layout verification with Playwright.

Community
Advanced