Docs Page Skill
SkillDocs & knowledgedocs-page is a skill that guides an AI agent to build a documentation page as a single self-contained HTML file. The page has a sticky navigation sidebar, a central article with headings, code snippets, tables and callouts, and a table of contents that tracks scrolling. It applies the project's design system tokens and produces realistic example content such as commands and parameter tables.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a project design system (DESIGN.md) available, since the skill requires design tokens for color, typography, layout, and components.
Then ask your AI: use the Docs Page Skill skill
What your AI can do with it
- Builds a three-column docs layout: sticky inline-start nav, article body, and inline-end T
- Highlights the current section in the table of contents as the user scrolls
- Writes realistic docs content including shell commands, code snippets, callouts, and table
- Applies design system tokens for fonts, colors, and spacing
- Uses logical CSS properties so the layout flips correctly under dir="rtl"
- Collapses gracefully below 900px width, with the TOC dropping out and nav becoming a top d
Getting started
- Have a project design system (DESIGN.md) available, since the skill requires design tokens for color, typography, layout, and components.
- Add the docs-page skill to the agent's available skills.
- Give the agent a brief that mentions docs, documentation, guide, API reference, or tutorial, along with a topic to document.
- The agent returns a single HTML artifact; check it at different screen widths, including RTL layouts.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/docs-page/SKILL.md and read by ahel’s review.
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.
- Inline-start nav (240–280px, sticky): grouped link list, current
page bolded with an
- 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-idon 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 underdir="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.
Signals
- GitHub stars
- 98k
- Forks
- 11k
- Last commit
- Sep 2026
ahel review
K1info
remote-installer-piped-to-shell (in example.html)K1binfo
installs-packages (in example.html)
Automated review, not a security audit. Ruleset v1+k2.
Questions
- When should the agent use this skill?
- When the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".
- What does the output look like?
- A single self-contained HTML file with all CSS inline: a sticky left navigation, a centered article body, and a sticky "on this page" outline on the right.
Advanced
- Item type
- skill
- Key
docs-page-2- Source
- github.com/nexu-io/open-design