Documentation Page
FreeCreate structured documentation pages with ease.
Free · Opens the source repo
What Documentation Page does
The Documentation Page skill allows developers and designers to produce a well-structured, single-page documentation layout in HTML format. This skill is particularly useful when the project brief includes terms like 'docs', 'documentation', 'guide', 'API reference', or 'tutorial'. It streamlines the creation of documentation by providing a clear framework for presenting information in a user-friendly manner.
Users begin by reading the active DESIGN.md file to ensure that the documentation aligns with the desired design specifications. The skill requires the selection of a specific topic to ensure that the output resembles real documentation rather than a generic template. This includes concrete API names, command examples, and plausible parameters, enhancing the relevance and utility of the generated content.
The layout consists of three distinct regions: an inline-start navigation section, a centered article body, and an inline-end table of contents (TOC). The navigation is sticky and provides a grouped list of links, while the article body supports various content types, including headings, paragraphs, code blocks, and callouts. The TOC allows users to quickly navigate through the document, with current sections highlighted as they scroll. This thoughtful organization aids in user comprehension and accessibility.
The skill outputs a complete HTML document that adheres to modern web standards, including inline CSS for styling. It ensures that the layout is responsive, maintaining readability across different screen sizes. By following the provided guidelines, users can create documentation that is not only functional but also visually appealing and easy to navigate.
When to use it
Use this skill when you need to generate a documentation page for APIs, guides, or tutorials that require a clear and organized presentation.
When not to use it
This skill may not be suitable for projects that require complex interactivity or dynamic content generation, as it produces static HTML pages.
What you can build with it
API Reference Documentation
Generate a comprehensive API reference page that includes endpoints, parameters, and example commands.
User Guides
Create user-friendly guides that help users understand how to use your application or service effectively.
Tutorials
Develop step-by-step tutorials with code snippets and callouts to enhance user learning and engagement.
How to install Documentation Page
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/docs-page --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioDocs 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.
- 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.
Frequently asked questions about Documentation Page
Similar skills
Markdown to HTML Conversion
Efficiently convert Markdown documents to HTML.
Code Tour
Create structured walkthroughs for codebases.
Acquire Codebase Knowledge
Streamline onboarding with comprehensive codebase documentation.
Documentation & Modernization
Streamline codebase documentation and modernization planning.
Azure Resource Visualizer
Generate architecture diagrams for Azure resources.
CLAUDE.md Improver
Optimize your CLAUDE.md files for better project context.