Docs Page Skill
Produce a single, three-column documentation page in one HTML file.
Workflow
- Read the active DESIGN.md (injected above). Use the body type token for
prose; the mono token for code; respect line-height and max-width rules.
- Pick a topic from the brief — the page should look like real docs, not
a generic wireframe. Concrete API names, command examples, plausible
parameters.
- Lay out three regions, expressed on the inline axis so the
layout flips correctly under
dir="rtl":
- Inline-start nav (240–280px, sticky): grouped link list, current
page bolded with an
inline-start-edge accent stripe. 3–5 groups
of 4–8 links.
- Article body (max-width ~720px, centered in the middle column):
H1, lede paragraph, H2 sections, code blocks, callout boxes (note /
warning), inline links, lists.
- Inline-end TOC (200–240px, sticky): "On this page" with the
H2/H3 anchors, current section highlighted as the user scrolls.
- Write a single HTML document:
<!doctype html> through </html>, all CSS inline.- CSS Grid for the three columns; sticky positioning for the rails.
- Code blocks: monospace token, soft surface fill, copy-button affordance
(visual only — no JS needed).
- Anchor IDs on every H2/H3 so the TOC links work.
data-od-id on the nav, article, and TOC.
- Prose: write at least 350 words of believable docs. Include at least
one shell command, one code snippet (5–15 lines), one callout, one table.
- Self-check:
- Body text wraps at the DS line-length sweet spot (60–75 chars).
- Code uses the DS mono token, not generic
monospace.
- Accent is restrained — used for active nav item, links, one callout
border. Not on body text.
- Page is readable at 1280w and collapses gracefully below 900w (TOC drops
out, nav becomes a top drawer).
- Use logical CSS (
margin-inline-start, border-inline-start,
inset-inline-end, text-align: start) on the rails and accent
stripe so the layout flips correctly under dir="rtl".
Output contract
Emit between <artifact> tags:
<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
1---2name: docs-page3description: A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".4---5
6# Docs Page Skill
7
8Produce a single, three-column documentation page in one HTML file.
9
10## Workflow
11
121. **Read the active DESIGN.md** (injected above). Use the body type token for
13 prose; the mono token for code; respect line-height and max-width rules.
142. **Pick a topic** from the brief — the page should look like real docs, not
15 a generic wireframe. Concrete API names, command examples, plausible
16 parameters.
173. **Lay out** three regions, expressed on the inline axis so the
18 layout flips correctly under `dir="rtl"`:
19 - **Inline-start nav** (240–280px, sticky): grouped link list, current
20 page bolded with an `inline-start`-edge accent stripe. 3–5 groups
21 of 4–8 links.
22 - **Article body** (max-width ~720px, centered in the middle column):
23 H1, lede paragraph, H2 sections, code blocks, callout boxes (note /
24 warning), inline links, lists.
25 - **Inline-end TOC** (200–240px, sticky): "On this page" with the
26 H2/H3 anchors, current section highlighted as the user scrolls.
274. **Write** a single HTML document:
28 - `<!doctype html>` through `</html>`, all CSS inline.
29 - CSS Grid for the three columns; sticky positioning for the rails.
30 - Code blocks: monospace token, soft surface fill, copy-button affordance
31 (visual only — no JS needed).
32 - Anchor IDs on every H2/H3 so the TOC links work.
33 - `data-od-id` on the nav, article, and TOC.
345. **Prose**: write at least 350 words of believable docs. Include at least
35 one shell command, one code snippet (5–15 lines), one callout, one table.
366. **Self-check**:
37 - Body text wraps at the DS line-length sweet spot (60–75 chars).
38 - Code uses the DS mono token, not generic `monospace`.
39 - Accent is restrained — used for active nav item, links, one callout
40 border. Not on body text.
41 - Page is readable at 1280w and collapses gracefully below 900w (TOC drops
42 out, nav becomes a top drawer).
43 - Use logical CSS (`margin-inline-start`, `border-inline-start`,
44 `inset-inline-end`, `text-align: start`) on the rails and accent
45 stripe so the layout flips correctly under `dir="rtl"`.
46
47## Output contract
48
49Emit between `<artifact>` tags:
50
51```
52<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
53<!doctype html>
54<html>...</html>
55</artifact>
56```
57
58One sentence before the artifact, nothing after.
gabrielmoreira