docs-page

Technical documentation page with sidebar navigation, search, code blocks, and table of contents. Use for "docs", "documentation", "API docs", "guide".

SKILL.md

GitHub

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.

Похожие навыки: other

limits-colimits

Context management for Claude Code. Hooks maintain state via ledgers and handoffs. MCP execution without context polluti...

Автор: parcadei
3,392

ddttom-allaboutv2-claude-skills-block-collection-and-party

The Block Collection and Block Party are repositories for existing AEM blocks, build tools, code snippets, integration p...

Автор: mattnigh
20

nodnarbnitram-claude-code-extensions-claude-skills-esphome-confi

This skill should be used when the user asks to "create an esphome config", "set up an esp32 device", "configure esphome...

Автор: mattnigh
20