Guide · Agent skill
How to use the Docs Page Designer agent skill (docs-page)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The docs-page skill is an agent skill from the open-design design-templates collection that tells an agent how to produce a documentation or API reference page as one self-contained HTML file. This guide explains what agent skills are in practice, how to install this one, how to ask for a page in a way that triggers it, and what to check before you rely on the output. It is written for readers who have not used agent skills before.
Docs Page Designernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the docs-page ZIP from this page. It contains example.html and SKILL.md.
- 2Unzip into a skills folder. Unzip into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Make a request. Ask for a documentation, guide, tutorial or API reference page, naming the product or topic.
- 5Open the HTML file. View the single HTML file the agent produces in a browser.
- 6Check the content. Review commands, parameters and API names for accuracy before sharing.
What the docs-page skill makes the agent do
When you ask for a documentation or API reference page, the skill directs the agent to build a single HTML file laid out like real developer docs. The layout has three regions: a navigation sidebar on the start side, a readable article in the middle with headings, code blocks, notes and a table, and a table of contents on the end side.
The agent follows a design system file (DESIGN.md) for fonts, colours and spacing. The skill also checks that the layout works for right-to-left languages and narrower screens. The output is a static mockup, not a working site.
- Start-side navigation sidebar
- Middle article with headings, code blocks, notes and a table
- End-side table of contents
- Layout follows DESIGN.md; checks right-to-left and narrow-screen behaviour
Install the docs-page skill
Download the ZIP for this skill from this page. The skill is made of two files: example.html and SKILL.md. You can install it in one of two ways.
For a personal install, unzip the download into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal: unzip into ~/.claude/skills/
- Project only: unzip into .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with a natural request
You do not need a special command. The skill's description says it applies when the brief mentions docs, documentation, guide, API reference or tutorial. Plain requests in those words should be enough.
Be specific about the topic so the agent can invent believable content. Name the product or API and the kind of page you want.
- "Make a documentation page for our webhook API, with a sidebar and a table of contents."
- "Create an API reference page for a payments endpoint, showing a code example and a parameters table."
- "Build a tutorial page on setting up a project, in Arabic with right-to-left layout."
Review the output and what the skill needs
The skill needs a host agent that can read SKILL.md and a DESIGN.md design system file, which the host application supplies. You also need a browser to open the resulting HTML file. The skill does not run scripts and does not use the network.
Treat the page as a visual prototype. The example commands, parameters and API names are generated, so they may be inaccurate. Check any technical detail before publishing it.
- Host agent able to read SKILL.md
- DESIGN.md design system file supplied by the host
- A browser to view the HTML file
- Runs scripts: no. Uses network: no
Safety notes on scripts and network access
According to the skill's listing, it runs no scripts and uses no network access. Its output is one HTML file that you open locally in a browser.
Because the content is generated, do not publish example commands or parameters from the page as real product documentation without review.
- No scripts are run by the skill
- No network access is used by the skill
- Review generated commands and API names before any real use
Tips for better docs mockups
Give the agent a real product name and a few concrete details, such as endpoint names or a task the reader wants to complete. This makes the sample content look like real docs rather than placeholder text.
If you need several languages, say so in the request. The skill checks the layout for right-to-left languages.
- Name the product, feature or API in the request
- Mention the audience, such as developers or designers
- Ask for right-to-left layout when the target language needs it
- Open example.html to see the expected style before requesting your own
What people use it for
- Designers prototyping how a documentation site could look before building it
- Developers sharing a realistic docs mockup with a team
- Teams exploring layout for API reference or tutorial pages in multiple languages
Frequently asked questions
How do I install the docs-page agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings, Capabilities, Skills.
What do I need to run the docs-page skill?
You need a host agent that can read SKILL.md and a DESIGN.md design system file supplied by the host application. You also need a browser to open the resulting HTML file.
Is the docs-page skill free?
The source lists the licence as Apache-2.0. It does not state pricing details beyond that, so check the licence text for terms.
Does the docs-page skill create a full documentation site?
No. It outputs a static mockup in a single HTML file. It does not include a build pipeline, search or live content.
Does the skill run scripts or use the internet?
According to the listing, it runs no scripts and uses no network access.
Can the docs-page skill produce right-to-left pages?
Yes. The skill checks that the layout also works for right-to-left languages and narrower screens.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the docs-page skill if you are a designer or developer who wants a realistic documentation layout to show a team, or a quick way to explore API reference and tutorial page designs in several languages. Pick something else if you need a working documentation site with search, a build pipeline or live content, or if you need verified technical documentation ready to publish.
Download the skill