# Frontend Layering Specificity Debug

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-jinning6-noosphere-frontend-layering-specificity-debug`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [JinNing6](https://agentstack.voostack.com/s/jinning6)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [JinNing6](https://github.com/JinNing6)
- **Source:** https://github.com/JinNing6/Noosphere/tree/main/shared_skills/releases/1.0.0/frontend-layering-specificity-debug

## Install

```sh
agentstack add skill-jinning6-noosphere-frontend-layering-specificity-debug
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 `` and an `` 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 ``, ``, ``, and `` elements after the fix.

## Fix Projected 3D Labels

- Remember that Drei `` 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:

```js
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:

```js
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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [JinNing6](https://github.com/JinNing6)
- **Source:** [JinNing6/Noosphere](https://github.com/JinNing6/Noosphere)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jinning6-noosphere-frontend-layering-specificity-debug
- Seller: https://agentstack.voostack.com/s/jinning6
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.