docs-page

1# Docs Page Skill
2 
3Produce a single, three-column documentation page in one HTML file.
4 
5## Workflow
6 
71. **Read the active DESIGN.md** (injected above). Use the body type token for
8   prose; the mono token for code; respect line-height and max-width rules.
92. **Pick a topic** from the brief — the page should look like real docs, not
10   a generic wireframe. Concrete API names, command examples, plausible
11   parameters.
123. **Lay out** three regions, expressed on the inline axis so the
13   layout flips correctly under `dir="rtl"`:
14   - **Inline-start nav** (240–280px, sticky): grouped link list, current
15     page bolded with an `inline-start`-edge accent stripe. 3–5 groups
16     of 4–8 links.
17   - **Article body** (max-width ~720px, centered in the middle column):
18     H1, lede paragraph, H2 sections, code blocks, callout boxes (note /
19     warning), inline links, lists.
20   - **Inline-end TOC** (200–240px, sticky): "On this page" with the
21     H2/H3 anchors, current section highlighted as the user scrolls.
224. **Write** a single HTML document:
23   - `<!doctype html>` through `</html>`, all CSS inline.
24   - CSS Grid for the three columns; sticky positioning for the rails.
25   - Code blocks: monospace token, soft surface fill, copy-button affordance
26     (visual only — no JS needed).
27   - Anchor IDs on every H2/H3 so the TOC links work.
28   - `data-od-id` on the nav, article, and TOC.
295. **Prose**: write at least 350 words of believable docs. Include at least
30…