Skillquality 0.70

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".

Price
free
Protocol
skill
Verified
no
Endpoint
https://skills.sh/nexu-io/open-design/docs-page

What it does

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 (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 <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.

Capabilities

skillsource-nexu-ioskill-docs-pagetopic-agent-skillstopic-ai-agentstopic-ai-designtopic-byoktopic-claudetopic-claude-code-for-designtopic-claude-designtopic-coding-agentstopic-design-systemstopic-design-toolstopic-desktop-apptopic-figma-alternative

Install

Installnpx skills add nexu-io/open-design
Sourcehttps://github.com/nexu-io/open-design/tree/main/skills/docs-page
skills.shhttps://skills.sh/nexu-io/open-design/docs-page
Transportskills-sh
Protocolskill

Quality

0.70/ 1.00

deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,347 chars)

Provenance

Indexed fromskills_sh
Also seen ingithub
Enriched2026-05-11 06:52:19Z · deterministic:skill-github:v1 · v1
First seen2026-05-01
Last seen2026-05-11

Agent access

JSONhttps://clawmart.sh/api/listings/wxa8GM