← ClaudeAtlas

rule-report-shelllisted

The house shell for any HTML report, audit, or findings page an agent publishes: summary-first cards that expand on click with staggered detail, themed scrollbars, and a token system that survives both themes. Load before writing or editing an HTML page a person will read.
djnsty23/claude-auto-dev · ★ 3 · Data & Documents · score 65
Install: claude install-skill djnsty23/claude-auto-dev
# The report shell Copy `references/report-shell.html` and replace the content. Do not rebuild the CSS from memory — four of the rules below were found by measuring a live page, and each one looks correct in source right up until it is rendered. ## Why this exists `[measured 2026-08-25]` A report built without it scored **5/10** on review, and the two complaints were the two things this file fixes: *"text is too stacked, not clean enough"* and *"scroll is another color"*. ## The four things that are not obvious **Scrollbars do not inherit your theme.** A dark page with an unstyled `overflow` container gets the operating system's light scrollbar — a white rail down a near-black code well. Nothing in the page hints at it, and no repo checked had any scrollbar styling at all. Set `scrollbar-color` and `scrollbar-width` *and* the `::-webkit-scrollbar` block; browsers split across the two. **The `0fr` → `1fr` grid disclosure does not work inside a flex card.** This is the widely-published technique and it fails here for a reason that only shows up in the rendered box: | child `overflow` | expand | collapse | |---|---|---| | `hidden` | **0px** — broken | works | | `visible` | 500.422px — works | **stuck open** — broken | `overflow:hidden` is what the collapse needs, and it zeroes the child's automatic minimum, so `minmax(auto, 1fr)` resolves to zero on the way open. You get one direction or the other, never both. `minmax(0,1fr)` does not rescue it. Use `max-height` with th