agentsclimarketplace

Css debugging

Skill Amey-Thakur/AI-SKILLS/skills/css-styling/css-debugging

Plug-and-play skills and prompts for every AI coding agent

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill css-debugging

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 19 days oldThe repository was created 19 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Diagnose layout, stacking, and overflow bugs by isolating the failing rule with devtools instead of guessing. Use when an element is misplaced, invisible, unscrollable, or styled by something you cannot find.

SKILL.md

2.6 KB, as published. Nobody here has run it

CSS debugging

CSS bugs are always one of a small set: the wrong rule won, the box is not the size you think, the element is in a different formatting or stacking context than you assume. Identify which, then the fix is mechanical.

Method

  1. Read the computed pane before writing CSS. Select the element: Computed shows the final value and links the winning rule; Styles shows every loser struck through. This answers "why is my rule ignored" in seconds (specificity, layer, or a typo'd property shown in yellow).
  2. See the real boxes. Toggle the box-model inspector and hover the layout overlays (grid/flex badges in devtools). Half of "it moved 3px" is margin collapse, an inline element's line-height, or default min-width: auto on a flex child; the overlay shows it instantly.
  3. Bisect the DOM for mystery overflow. For "the page scrolls sideways somewhere": * { outline: 1px solid red } (outline, not border, so layout is untouched), or delete DOM halves in the inspector until the culprit disappears. overflow: clip on a suspect confirms it.
  4. Debug stacking as contexts, not z-index values. If z-index 9999 loses, the element is inside a stacking context whose root sits lower. Walk ancestors for what creates contexts: transform, opacity < 1, filter, position+z-index, isolation. Fix at the context root or restructure; raising the number cannot escape the context.
  5. Check scrolling prerequisites as a chain. A scroll container needs: a constrained size (something above it must limit height), overflow: auto, and content bigger than the box. "It won't scroll" is always a break in that chain, usually a parent without a height and a missing min-height: 0 in a flex/grid column.
  6. Reduce before reporting or fixing. Recreate the bug in a minimal pen with three elements. Either the reduction shows the misconception, or you have a browser-difference test case worth checking against another engine and filing.

Boundaries

  • Specificity wars are a design smell, not a debugging target; see css-cascade for the structural fix.
  • Pixel differences across browsers in sub-pixel rounding and font rasterization are not bugs; do not chase identical rendering.
  • If the fix requires !important or a magic number you cannot explain, you found a symptom; keep digging or document the constraint inline.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.