docs-page

name	docs-page
description	Technical documentation page with sidebar navigation, search, code blocks, and table of contents. Use for "docs", "documentation", "API docs", "guide".
triggers	["docs","documentation","api docs","guide","readme","reference"]
df	{"mode":"prototype","platform":"desktop","scenario":"content","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true}}

Docs Page Skill

Produce a documentation page with navigation and content.

Layout

• Left sidebar (260px, sticky): logo, search input, nav tree with expandable sections. Active page highlighted with accent.
• Main content: max-width 75ch.
  • Breadcrumb at top.
  • Title + last-updated badge.
  • Body with heading anchors.
  • Code blocks with copy button (no JS — use user-select: all + hint).
  • Tables, callout boxes (info/warning/tip), inline code.
• Right TOC (200px, sticky): auto-generated from H2/H3 headings.

Rules

• Sidebar scrolls independently from content.
• Code blocks: dark theme, syntax tokens via CSS classes.
• Callouts: left border + icon prefix.
• data-df-id on each section heading.
• Responsive: sidebar collapses to hamburger below 1024px.

Output

Single index.html, inline CSS.