Generate a single-file HTML documentation page with a three-column layout.
npx skills add https://github.com/junainfinity/osmDesign --skill docs-page
Please help me install this Agent Skill. Skill: docs-page Source: https://github.com/junainfinity/osmDesign/tree/main/skills/docs-page Command: npx skills add https://github.com/junainfinity/osmDesign --skill docs-page
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.
Generate a complete three-column documentation HTML page in one file.
High-intent search queries and answers about installing and using this skill.
To generate a three-column documentation page in HTML, provide a design brief or content notes to produce a self-contained file with a left navigation rail, center article, and right table of contents using semantic HTML and inline CSS.
Creating a documentation layout with a table of contents and sticky navigation is best handled by using a CSS grid template that structures a left rail, scrollable article body, and right TOC while maintaining consistent typography and spacing.
You can customize typography and color tokens in an HTML documentation page by overriding the inline styles to match your design system, ensuring the content remains portable as a standalone file without rewriting the semantic markup.
The three-column docs layout works effectively for API references and developer tutorials by modeling headings, code blocks, lists, and tables, with each heading receiving an anchor that the right-hand TOC mirrors for accessible navigation.
To make a responsive documentation page that stacks columns on smaller screens, use a CSS grid layout that ensures consistent alignment on desktop and gracefully collapses the left navigation and right TOC for mobile viewing.
A limitation of using a single-file HTML document for web documentation is that while it is highly portable for offline use and CMS embedding, managing large multi-page knowledge bases may require a dedicated docs engine rather than standalone files.
iterationlayerConvert PDFs, DOCX, HTML, and image documents into structured Markdown.
yunusgungorConvert private brain pages into password-protected standalone HTML files.
george-popescuDefine frontend development standards for component architecture, accessibility, and responsive design.
JongsixGenerate technical documentation from source code and API definitions.
