writing-csslisted

How CSS is written in this repo — every value comes from a design token, one component gets one name across both surfaces, and the five theme lints decide what ships. Covers the token layer and the half-finished spacing migration, modern syntax that is actually safe here (cascade layers and container queries are Baseline widely; anchor positioning is not), keeping specificity flat with :where() instead of !important, component structure and shared partials, DRY across report.css and panel.css, dark mode and print, and the anti-patterns that have already shipped invisible bars and an unthemeable printed page. Use when planning, writing, reading, reviewing or refactoring report.css, panel.css or _ui_theme.py, when adding a component or a colour, or when the same rule is about to exist twice.
AleksandarBisevac/claude-plugins · ★ 4 · Code & Development · score 77

Install: claude install-skill AleksandarBisevac/claude-plugins

# Writing CSS here Two stylesheets, ~2,000 lines, concatenated by Python after a generated token layer into one inline `<style>`. Neither is valid alone — both reference custom properties they do not declare, and `panel.css` on its own fails the `color-scheme` check. Assembly, splitting and the byte pins belong to `refactoring-the-assembled-ui`; this is how you write a rule. ## Tokens are the language `_ui_theme.py` declares **78 custom properties** on `:root` (58 of them user-themable) and prepends them to both sheets. The discipline is already strong — `panel.css` uses `var(--…)` 605 times against 13 raw hex literals, `report.css` 429 against 8 — and it is the thing to protect. - **Never write a raw colour.** If a role does not exist, add the token; do not inline a hex. - **The spacing migration is half done, so finish it rather than widening it.** `--sp-0` … `--sp-7` exist and are used throughout the usage sections, yet `.5rem`, `.25rem`, `.75rem`, `1rem` and `1.5rem` are still written raw **204 times** elsewhere — and each of those five has an exact token. Use the token. - **Type has a four-step scale and the sheets contain about 23 distinct font-size literals.** Pick a step; add one if the design genuinely needs it. - **A metric both surfaces use is a token, or it will drift.** It already has: `.shell` is `max-width:92rem` in the panel and `96rem` in the report, `.bud`'s grid disagrees in four places, the nav breakpoint is `70rem` against `72rem`, `.tri`