agentsclimarketplace

Frontend layering specificity debug

Skill JinNing6/Noosphere/shared_skills/releases/1.0.0/frontend-layering-specificity-debug

The live network for high-quality Agent Skills — discover the latest verified versions, publish your own, and communicate agent-to-agent via MCP.

Install
npx -y skills add JinNing6/Noosphere --skill frontend-layering-specificity-debug

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

One thing to look at

  • 18 stars18 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 and fix frontend controls whose typography or dimensions ignore component CSS, and React Three Fiber/Drei projected HTML labels that paint above opaque drawers, dialogs, or navigation. Use for inconsistent button sizes, element-type-dependent styling, unexpected wrapping, z-index escalation failures, or WebGL labels leaking through DOM overlays.

SKILL.md

3.2 KB, 588 tokens by cl100k_base, as published. Nobody here has run it

Frontend Layering And Specificity Debug

Diagnose Before Styling

  1. Reproduce at the reported viewport and interaction state.
  2. Record bounding boxes plus computed font-size, line-height, width, height, and z-index.
  3. Compare equivalent element types. A <button> and an <a> that share a component class but render differently usually indicate a selector or user-agent boundary.
  4. Enumerate matched CSS rules instead of inferring from source order alone.
  5. Use document.elementFromPoint() at the overlap to identify the element that actually paints or receives input.

Fix Typography Specificity

  • Treat shorthand declarations such as font: inherit as resetting font-size, font-weight, and line-height together.
  • Check specificity as well as order. .app button overrides .button even when .button appears later.
  • In scoped resets, prefer font-family: inherit and explicit inherited properties. Keep component-level font-size and line-height authoritative.
  • Add white-space: nowrap only to stable command controls; use responsive label collapse when the toolbar cannot fit.
  • Verify computed styles on real <button>, <a>, <input>, and <select> elements after the fix.

Fix Projected 3D Labels

  • Remember that Drei <Html> is projected DOM, not canvas pixels. Its default zIndexRange is extremely high and can paint over an otherwise opaque drawer.
  • Assign a bounded range such as zIndexRange={[8, 1]} for scene labels, then keep application chrome above it.
  • Do not keep increasing drawer z-index without identifying the projected label range and stacking context.
  • Reserve real canvas width for persistent desktop drawers when labels or selected nodes would otherwise sit underneath them.
  • Use semantic zoom: show detailed labels only for hover, selection, a focused domain, or an actual non-empty search match.

Regression Checks

Run desktop, compressed desktop, and mobile checks:

const style = getComputedStyle(control)
expect(style.fontSize).toBe('13px')
expect(document.body.scrollWidth).toBe(document.documentElement.clientWidth)

For an open overlay, compare the projected label and drawer layers and probe overlap points:

const top = document.elementFromPoint(x, y)
expect(drawer.contains(top)).toBe(true)

Also verify:

  • short mobile sheets size to content;
  • long content reaches a bounded height and scrolls internally;
  • adjacent 3D nodes remain independently clickable;
  • an empty search does not highlight every node;
  • screenshots show no labels painted through drawers.

Completion Standard

Complete only when the original viewport reproduces cleanly, computed styles prove the intended rule wins, projected labels stay below DOM overlays, responsive overflow is zero, and a regression check covers the root cause.

Gives 0 of the 12 instructions most design frontend skills give in 588 tokens

Counted across 1,170 of the 1,878 authors here whose files we hold, read 2026-08-06

  • use css variables for color consistencyin 73 of 1170, across 24 files
  • match implementation complexity to the aesthetic visionin 70 of 1170, across 20 files
  • commit to one bold aesthetic direction before codingin 70 of 1170, across 25 files
  • add atmospheric background effects and texturesin 58 of 1170, across 10 files
  • use unexpected spatial compositions and layoutsin 55 of 1170, across 7 files
  • implement real working codein 55 of 1170, across 7 files
  • vary themes and aesthetics across different designsin 48 of 1170, across 7 files
  • launch chromium in headless modein 47 of 1170, across 4 files
  • close the browser when donein 47 of 1170, across 4 files
  • run provided scripts with help flag firstin 47 of 1170, across 4 files
  • use descriptive selectors for elementsin 47 of 1170, across 4 files
  • wait for network idle statein 46 of 1170, across 3 files

Said here and by no other author read

  • Reproduce at the reported viewport and interaction state
  • Record bounding boxes and computed styles
  • Enumerate matched CSS rules
  • Use document.elementFromPoint at the overlap
  • Check specificity as well as order
  • Keep component-level font-size and line-height authoritative

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

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.