docs-page

What problem does it solve?

Producing consistent, production-ready documentation pages from design notes or briefs can be slow, error-prone, and hard to maintain across teams. This skill automates the creation of a polished, three-column documentation layout that includes a left navigation rail, a scrollable article body, and a right-hand table of contents, so teams can publish clear, navigable docs with minimal manual formatting. It standardizes typography, spacing, and structural rules, enabling docs to look cohesive across APIs, guides, tutorials, and references while preserving the original content and intent. By centralizing layout decisions in a single HTML artifact, it reduces the time from brief to publishable docs and helps ensure accessibility and consistency in how information is presented. The approach also supports design-system alignment, so teams can map tokens for color, typography, and spacing without rewriting markup for each page. Whether the target is an API reference, a developer guide, or an onboarding tour, this workflow provides a repeatable template that teams can customize while retaining a familiar user experience. The result is a predictable, portable documentation surface that can be embedded in static sites, shared via offline channels, or consumed by apps without creating a separate docs engine.

Core Features & Use Cases

• Three-column layout: left navigation rail (sticky), center article, and right TOC, created with CSS grid to ensure consistent alignment on desktop and graceful stacking on smaller screens.
• Content modeling: supports headings (H1/H2/H3), code blocks, inline links, lists, tables, and callouts; each heading receives an anchor and the TOC mirrors the document structure.
• Design-system compatibility: inline tokens and styles can be overridden to match brand; the content remains portable as a standalone HTML file.
• Single-file portability: outputs a self-contained HTML document suitable for offline use, CMS embedding, or prototyping.
• Real-world usage: ideal for API references, tutorials, guides, and knowledge bases where stable presentation accelerates onboarding.
• Accessibility and usability: semantic HTML, proper contrast, keyboard navigation, and readable typography to support diverse users.
• Extensibility: easy to plug in additional sections or content sources while keeping the same layout rules.

Quick Start

Generate a complete three-column documentation HTML page in one file.