--- name: Docs Page slug: docs-page category: Frontend description: Docs Page creates a single three-column documentation page in one HTML file, with an inline-start nav, scrollable article body, and inline-end table of contents. Use it when a design brief asks for docs, documentation, guides, API references, or tutorials. github: "https://github.com/nexu-io/open-design/tree/main/design-templates/docs-page" language: TypeScript stars: 85410 forks: 10012 install: "npx degit https://github.com/nexu-io/open-design/tree/main/design-templates/docs-page ~/.claude/skills/docs-page" installs_to: ~/.claude/skills/docs-page source_path: design-templates/docs-page/SKILL.md collection_size: 25 category_size: 567 collection_url: "https://dirskills.com/collections/nexu-io/open-design" added: 2026-08-13T07:36:08.438Z last_synced: 2026-08-13T07:36:08.438Z canonical_url: "https://dirskills.com/skills/docs-page" --- # Docs Page Docs Page creates a single three-column documentation page in one HTML file, with an inline-start nav, scrollable article body, and inline-end table of contents. Use it when a design brief asks for docs, documentation, guides, API references, or tutorials. **Install:** ```bash npx degit https://github.com/nexu-io/open-design/tree/main/design-templates/docs-page ~/.claude/skills/docs-page ``` ## README # 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: - `` through ``, 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"`. ## Output contract Emit between `` tags: ``` ... ``` One sentence before the artifact, nothing after.