docs-page

Create a three-column documentation page from a single HTML file.

Updated May 2, 2026
One-click install
npx skills add https://github.com/az9713/open-design-tutorial --skill docs-page-az9713
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: docs-page
Source: https://github.com/az9713/open-design-tutorial/tree/main/skills/docs-page
Command: npx skills add https://github.com/az9713/open-design-tutorial --skill docs-page-az9713

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you generate a complete documentation page with a left navigation rail, a central article area, and a right-hand table of contents, streamlining the creation of consistent docs layouts.

Core Features & Use Cases

  • Left navigation rail with grouped links, sticky positioning, and current-page emphasis.
  • Central article region with typography controls, code blocks, callouts, and in-page anchors.
  • Right-hand TOC with on-page anchors and synchronized highlighting.
  • Use cases include API references, guides, tutorials, and knowledge bases across desktop and web.

Quick Start

Create a three-column docs page HTML file that demonstrates the layout and styling.

Frequently Asked Questions about docs-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a three-column documentation page in a single HTML file?

To create a three-column documentation page in a single HTML file, use this skill to generate a layout with a left navigation rail, central article area, and right table of contents. It enforces responsive behavior and typography controls.

What is the best way to build a docs layout with synchronized highlighting in the table of contents?

The best way to build a docs layout with synchronized highlighting is using a three-column HTML layout that includes a right-hand TOC with on-page anchors. This skill automatically synchronizes TOC highlighting with the current scroll position.

Can I use a single HTML file for API references and tutorials with left navigation and right TOC?

Yes, you can use a single HTML file for API references, tutorials, and guides. This skill generates a three-column docs layout with a left navigation rail and right TOC, specifically designed for these documentation use cases across desktop contexts.

Does the three-column docs layout support data attributes for automated loading?

Yes, the three-column docs layout supports data attributes for automated loading. The generated HTML file includes these attributes alongside code blocks, callouts, and in-page anchors to streamline content integration.

How do I add sticky navigation and current-page emphasis to a documentation page?

To add sticky navigation and current-page emphasis to a documentation page, generate a three-column HTML layout using this skill. It applies sticky positioning to the left navigation rail and highlights the current page link automatically.

What are the limitations of building a documentation page in one HTML file?

A limitation of building a documentation page in one HTML file is that it is designed primarily for desktop contexts. While it includes responsive behavior, complex multi-page documentation sites may require a dedicated static site generator instead.