Skills
.Work. You
Rest

ah-fix-ui-bug

Official

Fix UI bugs with automated DevTools.

Software Engineering#layout#debug#diagnostics#web#chrome-devtools#z-index#ui-bug
Authorarinhubcom
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ah-fix-ui-bug
Download link: https://github.com/arinhubcom/arinhub-dev-skills/archive/main.zip#ah-fix-ui-bug

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.