docs-page

Generates a three-column documentation page as a single self-contained HTML file.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating realistic documentation page prototypes requires manually wiring up navigation, article content, and a table of contents, which is slow and repetitive when you just need a believable docs layout for a design brief. ## Core Features & Use Cases - Three-Column Layout: Produces a sticky left navigation, a centered article body, and a right-rail "On this page" TOC in one HTML file with all CSS inline. - Design System Integration: Reads the active DESIGN.md tokens for typography, color, and spacing so the page matches the project's design system. - Realistic Content: Writes at least 350 words of plausible documentation including shell commands, code snippets, callouts, and tables rather than lorem ipsum. - Use Case: Given a brief mentioning "API reference" or "tutorial", generate a complete docs page prototype with grouped nav links, anchored H2/H3 sections, and responsive collapse below 900px. ## Quick Start Ask the assistant to generate a documentation page for your product's quickstart guide using the docs-page skill.

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 documentation page prototype in HTML?

Provide a brief mentioning docs, a guide, or an API reference, and the skill produces one self-contained HTML file with inline CSS. The output includes a sticky left nav, centered article, and right-rail TOC emitted inside artifact tags.

What layout does a generated docs page use?

The page uses CSS Grid with three columns: a 240-280px sticky left navigation, an article body capped near 720px, and a 200-240px sticky table of contents. Below 900px the TOC drops out and the nav collapses.

Does the docs page follow a design system?

Yes, the skill reads the active DESIGN.md and applies its tokens for body type, monospace code, line-height, and max-width. Accent color is restrained to active nav items, links, and one callout border.

What content does the generated documentation include?

Each page contains at least 350 words of believable prose with concrete API names, one shell command, one 5-15 line code snippet, one callout box, and one table. Anchor IDs on every H2 and H3 make the TOC links functional.

Can I use the generated docs page in a real website?

The output is a static prototype intended for design previews, with visual-only affordances like the copy button and no JavaScript. It works as a starting point but needs real content, routing, and interactivity for production use.