Skip to content
Get packs

Docs Page Template

Lays out a three-column technical documentation page with navigation, article body, and table of contents.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill gives the agent a layout template for turning content into a single-page technical document, such as an API reference or tutorial. The page has a sticky side navigation on the left, a long-form article body with code blocks, callouts and tables, and a sticky table of contents on the right that highlights the section you are reading. It also specifies styling details like rounded dark code blocks with language labels and copy buttons, and colour-coded info, warning and danger callouts.

Great for

  • Developers who want an API or tutorial page generated in a clean, readable format
  • Designers prototyping a documentation layout quickly
  • Teams converting existing notes into a consistent single-page docs look

Skip it if

  • Multi-page documentation sites that need routing, search indexing or build tooling, since this only covers one page layout
  • Users who need a non-technical or marketing page, because the template is tailored to engineering docs

Try asking

  • “Turn this API endpoint description into a docs page with a sidebar and table of contents”
  • “Create a tutorial page with code blocks, warning callouts and a version selector in the header”
  • “Make a desktop-width reference page for our REST API using the docs-page layout”
Step-by-step guide: how to use Docs Page TemplateInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    docs-page.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip docs-page.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip docs-page.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide the actual content (sections, endpoints, code samples) so the agent can fill the layout meaningfully.
  • Mention if you want a specific language or theme, since the SKILL.md describes Chinese labels and a dark code block style you may want to adjust.
  • Check the example.html output in a browser to confirm the sticky navigation and scroll-spy behave as expected.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.