docs-page skill
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".
Is the docs-page skill safe?
Read the findings before you install it. We read 3 files in the folder on 2026-09-28.
- high
example.html:83Downloads a script and runs it in one step, so what runs is whatever that server sends that day. Common for installers, and still worth a look at the address.
curl -fsSL https://get.filebase.dev | sh</code></pre>
Install the docs-page skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design mkdir -p ~/.claude/skills cp -r /tmp/open-design/plugins/_official/examples/docs-page ~/.claude/skills/docs-page
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
Docs Page Skill
Produce a single, three-column documentation page in one HTML file.
Workflow
prose; the mono token for code; respect line-height and max-width rules.
- Read the active DESIGN.md (injected above). Use the body type token for
a generic wireframe. Concrete API names, command examples, plausible parameters.
- Pick a topic from the brief — the page should look like real docs, not
layout flips correctly under dir="rtl":
- Lay out three regions, expressed on the inline axis so the
page bolded with an inline-start-edge accent stripe. 3–5 groups of 4–8 links.
- Inline-start nav (240–280px, sticky): grouped link list, current
H1, lede paragraph, H2 sections, code blocks, callout boxes (note / warning), inline links, lists.
- Article body (max-width ~720px, centered in the middle column):
H2/H3 anchors, current section highlighted as the user scrolls.
- Inline-end TOC (200–240px, sticky): "On this page" with the
- Write a single HTML document:
(visual only — no JS needed).
- <!doctype html> 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
- Anchor IDs on every H2/H3 so the TOC links work.
- data-od-id on the nav, article, and TOC.
one shell command, one code snippet (5–15 lines), one callout, one table.
- Prose: write at least 350 words of believable docs. Include at least
- Self-check:
border. Not on body text.
- 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
out, nav becomes a top drawer).
- Page is readable at 1280w and collapses gracefully below 900w (TOC drops
inset-inline-end, text-align: start) on the rails and accent stripe so the layout flips correctly under dir="rtl".
- Use logical CSS (margin-inline-start, border-inline-start,
Output contract
Emit between tags:
<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
More skills from nexu-io/open-design
- Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
- Acard-twitterTwitter quote or data card designed to pair with a post.
- Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
- Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.