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

ah-fix-ui-bug

Diagnose UI positioning and rendering bugs using Chrome DevTools CLI scripts.

Updated Aug 27, 2026
Search Tags:#layout#debug#diagnostics#web#chrome-devtools#z-index#ui-bug
One-click install
npx skills add https://github.com/arinhubcom/arinhub-dev-skills --skill ah-fix-ui-bug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ah-fix-ui-bug
Source: https://github.com/arinhubcom/arinhub-dev-skills/tree/main/skills/ah-fix-ui-bug
Command: npx skills add https://github.com/arinhubcom/arinhub-dev-skills --skill ah-fix-ui-bug

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps developers diagnose and fix UI rendering and positioning bugs on web pages using Chrome DevTools CLI and a suite of diagnostic scripts.

Core Features & Use Cases

  • Automated diagnostics with a collection of scripts (computed-styles-dump.js, position-tracking.js, layout-shift-detection.js, ancestor-css-check.js, stacking-context-inspector.js, etc.) to surface root causes.
  • Triage and guided workflows for common UI issues like fixed-position offset, z-index layering, overflow clipping, and sticky failures across Storybook, localhost, and production pages.
  • Real-time observation tools like a persistent overlay and visual markers to verify changes during manual debugging.

Quick Start

Install the skill and run the provided scripts against the misbehaving page to start gathering diagnostics.

Frequently Asked Questions about ah-fix-ui-bug

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

FAQPage Schema
How do I debug a fixed position element offset on a web page?▼

Debug a fixed element offset by running automated DevTools diagnostic scripts that dump computed styles and track positioning. The skill installs instrumentation to collect snapshots and logs, surfacing the root cause of the UI rendering issue.

Can I diagnose z-index layering bugs in Storybook or local dev servers?▼

Yes, you can diagnose z-index layering issues across Storybook, local dev servers, and production pages. The skill uses a stacking context inspector script to analyze layering problems and identify what causes elements to render behind or in front of each other.

What's the best way to detect layout shifts during web development?▼

Detect layout shifts by running the layout-shift-detection script against the misbehaving page. The skill automates diagnostics by collecting real-time snapshots and logs, helping you observe and verify changes through a persistent overlay and visual markers.

Do I need Chrome DevTools CLI to fix overflow clipping and sticky behavior issues?▼

Yes, Chrome DevTools CLI is required to fix overflow clipping and sticky behavior issues. The skill relies on this CLI alongside its diagnostic scripts to install instrumentation, collect page snapshots, and help identify the root causes of these UI bugs.

Why does my web page element get clipped by an ancestor CSS container?▼

An element gets clipped when an ancestor CSS container has overflow restrictions. The ancestor-css-check script inspects the DOM hierarchy, dumping computed styles to pinpoint which parent container is causing the overflow clipping behavior.

Related Skills

Explore More Software Engineering Skills→
johnlindquistjohnlindquist
16

chrome-devtools

Automate browser control and debugging via the Chrome DevTools Protocol.

Community
Advanced
anouar1991anouar1991
1

css-coverage-treemap

Measure CSS rule usage per stylesheet via CDP and report dead rules.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
Orpheus-KOrpheus-K
13

wechat-miniprogram-automation

Automate UI debugging and verification for WeChat Mini Programs via DevTools CLI.

Community
Intermediate