`. Use real landmarks (`header`, `nav`, `main`, `footer`) and headings `h1`-`h6` in order. 3. Choose **one** layout recipe (`rs-layout--sidebar-left`, `--holy-grail`, `rs-frames`…). Build the rest by copying **cheatsheet snippets**: don't hand-roll markup you can paste. 4. At most **two** decorative widgets per page, via `data-rs-widgets="…"` with their `data-rs--` attributes. ## Extending: a new component or style The same laws apply to anything you add. Style with the existing tokens first; reach for a new value only when there isn't a token for it, and then pick the **nearest legal** one. - New CSS goes under an **`rsx-`** class and stays token-driven, opaque, `border-radius: 0`, shadows blur-`0`. - Need a new value? Add a **`--rsx-*`** token (ideally derived from `--rs-*` tokens) rather than sprinkling literals, it keeps theming working and the audit happy. - A community **widget** must ship a `destroy()` that fully tears down (listeners, timers, injected DOM), must not autoplay, and must make no external request. Its CSS half should work with JS off. - Keep accessibility intact: label every input, never remove focus outlines, mirror the ARIA in the component snippets you're extending. **A small extension done right:** ```css /* rsx-price-tag: a bevelled tag. Tokens, opaque, no radius, no blur. */ .rsx-price-tag { display: inline-block; padding-block: var(--rs-space-1); padding-inline: var(--rs-space-2); color: var(--rs-text); background: var(--rs-bg-content); /* opaque, on-palette via the token */ border: var(--rs-border-2) solid var(--rs-border-color); box-shadow: var(--rs-shadow-hard); /* a hard 2px offset, 0 blur */ font-size: var(--rs-font-size-1); /* a step on the scale */ font-family: var(--rs-font-body); /* a sanctioned stack */ } ``` ## Where the specifics live (load these, don't guess) You do not need to memorize the catalog, read it: - **`cheatsheet.md`** (served at `/cheatsheet.md`), the one file to load into context: every component and widget with a canonical snippet. - **`guardrails.json`**: the laws as data: the exact palette, the font stacks, the easing whitelist. Validate against this. - **`manifest.json`**: the structured catalog for tooling. - The **retrostrap MCP server** (`retrostrap-mcp`) exposes search + audit tools; prefer it for lookups and for checking a page before you hand it back. ## Never - Never write an off-palette color, a non-zero `border-radius`, a blurred shadow, or a `cubic-bezier`/`ease` easing. - Never add analytics, a CDN or web font, autoplaying audio, or any external network request. - Never remove a focus outline or ship an input without a label. - Never redefine an `rs-` class or a `--rs-*` token, extend under `rsx-` / `--rsx-`. - Never invent a component when a cheatsheet snippet exists; compose from the catalog. ## Self-check before you finish Run `Retrostrap.audit()` over the page (or the MCP `audit_html` tool over your output). It reports palette, type, shape, motion, and decency violations the way CI does. Green means on-era; a finding means fix the markup, not the auditor.