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".
Profile →npx skills add nexu-io/open-design --skill docs-page --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Workflow
- Output contract
What does the docs-page skill do?
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".
How do I install it?
Run `npx skills add nexu-io/open-design --skill docs-page --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.