docs-page

Generate a self-contained three-column documentation HTML page with inline CSS.

1|Updated Jul 9, 2026
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill docs-page-piercingxx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: docs-page
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/docs-page
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill docs-page-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Producing consistent, well-structured documentation pages becomes slow and error-prone when you have to handcraft navigation, a right-rail table of contents, and clean article formatting every time.

Core Features & Use Cases

  • Docs page generation: Creates a single self-contained HTML document with a left navigation rail, scrollable article body, and a sticky “On this page” right TOC.
  • Design-system aligned output: Formats typography, spacing, line-length, and code styling to match the injected DESIGN.md tokens, including restrained accents and readable hierarchy.
  • Topic-specific realism: Selects a credible page topic from the brief and writes believable docs content (commands, code snippets, callouts, and at least one table) rather than a generic wireframe.
  • Mobile/fallback behavior: Collapses the layout below smaller breakpoints by removing the rails and ensuring the document remains usable below 900w.

Quick Start

Use docs-page to turn your brief about a “guide” into a production-style single HTML documentation page with navigation, anchors, and real examples.

Frequently Asked Questions about docs-page

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

FAQPage Schema
How do I generate a three-column HTML documentation page with navigation and a table of contents?

To generate a three-column HTML documentation page, use a tool that outputs a self-contained file with a left navigation rail, a scrollable article body, and a sticky right-rail table of contents. It automatically creates anchor IDs on headings for clickable navigation.

What is the best way to create a single-file technical documentation page with inline CSS?

Creating a single-file technical documentation page with inline CSS ensures your layout is self-contained and portable. It uses HTML Grid for the three-column structure, applying sticky rails and token-aligned typography to maintain a consistent design system without external stylesheets.

Can I generate API reference docs with code snippets and tables in a three-column layout?

Yes, you can generate API reference docs and tutorials with realistic content. The output includes credible commands, formatted code snippets, callouts, and at least one data table, all rendered within the three-column HTML layout.

Does a three-column documentation layout work on mobile screens and narrow viewports?

A three-column documentation layout adapts to mobile screens by collapsing below smaller breakpoints. It removes the navigation rails under 900px width, ensuring the document remains fully usable and readable on narrow viewports.

How do I align typography and code styling in my generated HTML docs to match my design system?

To align typography and code styling in generated HTML docs to your design system, inject your design tokens via a configuration file. The generator applies these tokens to format spacing, line-length, and code blocks consistently across the page.