css-debugging

Diagnose and fix CSS layout, stacking, and rendering issues across breakpoints.

1|Updated Mar 22, 2026

Search Tags:#performance #debugging #layout #frontend #css #devtools #stacking-context

Ready to run

npx skills add https://github.com/caraya/agent-skills --skill css-debugging

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: css-debugging
Source: https://github.com/caraya/agent-skills/tree/main/skills/css-debugging
Command: npx skills add https://github.com/caraya/agent-skills --skill css-debugging

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

CSS debugging pain points across layout shifts, stacking contexts, and color-contrast issues are resolved with a concise, repeatable workflow.

Core Features & Use Cases

Reproduce in minimal HTML/CSS to isolate issues.
Inspect with DevTools to review computed styles, layout outlines, and the box model.
Isolate the cause by toggling rules and checking cascade and specificity.
Verify fixes across breakpoints and devices.
Color-related checks and performance considerations when debugging.

Quick Start

Reproduce the issue in a minimal HTML/CSS page and apply the four-step workflow to identify and fix the root cause.

Frequently Asked Questions about css-debugging

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

FAQPage Schema

How do I fix CSS layout shifts and stacking context issues?▼

Fix CSS layout shifts and stacking context issues by reproducing the problem in minimal HTML/CSS, inspecting computed styles with DevTools, isolating the cause by toggling rules, and verifying the fix across breakpoints.

What is the best way to debug CSS specificity and cascade conflicts?▼

Debug CSS specificity and cascade conflicts by inspecting computed styles in DevTools to review the box model, then isolate the cause by toggling individual rules to see which declaration wins the cascade.

Why does my CSS layout break across different device breakpoints?▼

CSS layouts break across breakpoints when styles are not verified across devices, requiring you to reproduce the issue in minimal HTML, inspect layout outlines with DevTools, and confirm the fix at each breakpoint.

Can I diagnose CSS paint and rendering performance issues using DevTools?▼

Diagnose CSS paint and rendering performance issues by inspecting computed styles and layout outlines with DevTools, isolating the triggering rules, and verifying performance improvements across breakpoints.

How to troubleshoot CSS color contrast problems quickly?▼

Troubleshoot CSS color contrast problems quickly by reproducing the issue in minimal HTML, inspecting computed color values with DevTools, isolating the responsible rules, and verifying the corrected contrast across devices.