How to use the Docs Page Template agent skill (docs-page)

What is an agent skill and what does docs-page make the agent do?

An agent skill is a folder of instructions that an AI agent can load when a task matches it. The docs-page skill tells the agent to lay out content as a single long-form technical page instead of a generic document.

The page has three columns. On the left is a sticky side navigation with sections. In the centre is the article body, which can include code blocks, callouts and tables. On the right is a sticky table of contents that uses scroll-spy, so it highlights the section you are reading. A top bar holds search, a version label and a light/dark theme switch.

• Left: sticky inline-start navigation with sections
• Centre: article body with code blocks, callouts and tables
• Right: sticky inline-end table of contents with scroll-spy
• Top bar: search, version and theme switch

Install the docs-page skill from a ZIP file

Download the ZIP for the docs-page skill from the skill's page on this site. Then choose one of the two installation routes below.

For a personal install, unzip the file into your ~/.claude/skills/ folder. For a single project, unzip it into the .claude/skills/ folder inside that project. The package contains two files: SKILL.md and example.html.

In the Claude apps, you can also upload the skill instead. Go to Settings, then Capabilities, then Skills, and add it there.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into .claude/skills/ in your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with natural requests

You do not need a special command. Describe the page you want in plain language and mention that it is a documentation or API or tutorial page. The skill is designed for single-page API and tutorial documentation, so requests that name that kind of content are the best fit.

Give the agent the material to work from, such as your notes, endpoint details or a draft tutorial. Ask for a single-page technical document so the agent uses the three-column layout rather than a different format.

• Make a single-page API reference from these endpoint notes
• Turn my setup notes into a tutorial page with a table of contents
• Convert this draft into a technical docs page with code blocks and callouts

Know what the page includes

The skill also specifies styling details, so the output follows a consistent look. Code blocks are rounded and dark, with a language label and a copy button. Callouts come in three colours for info, warning and danger.

Use callouts for notes that the reader should not miss, and use tables where comparing values helps. The skill is built around readable long-form content, so it suits text-heavy pages more than short landing pages.

• Code blocks: rounded, dark, with language label and copy button
• Callouts: info, warn and danger in three colours
• Tables and long-form article body

Safety notes: scripts and network access

According to the skill's listing, it does not require anything to be installed beforehand, it does not run scripts and it does not use the network. The package is two files, a SKILL.md instruction file and an example HTML file.

The skill is licensed under Apache-2.0. Read SKILL.md and example.html yourself before installing if you want to check what the agent will be told to do.

• Requirements listed: nothing
• Runs scripts: no
• Uses network: no
• Licence: Apache-2.0

Tips for better results

Give the agent complete, well-structured source material. The three-column layout works best when content already has clear sections, because the side navigation and table of contents are built from those headings.

The skill is for one page. If you need several linked pages, routing, search indexing or a build setup, this skill does not cover those and you will need other tooling.

• Structure your notes with headings before asking
• Ask for one page at a time
• Review code samples in the output, because the agent generates them from your material