Agent skill · writing content · nexu-io
docs-page
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".
Why this skill is useful
Provides a structured template and specific guidelines for creating documentation pages, including layout and content requirements that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Docs Page Skill Produce a single, three-column documentation page in one HTML file. Workflow 1. 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. 2. Pick a topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters. 3. 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. 4. 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. 5. 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. 6. 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". …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/docs-page