Docs Page
- 253 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
docs-page is an agent design skill that lays out developer and product documentation pages with navigation, code samples, callouts, and readable typography for developers shipping API or SaaS onboarding docs.
About
docs-page is an open-design skill from nexu-io/open-design that structures developer documentation and product onboarding pages with sidebar navigation, fenced code samples, callout blocks, and readable typography tuned for API references and SaaS getting-started flows. The agent proposes information architecture, section ordering, copy hierarchy, and component patterns suited to Mintlify, Docusaurus, or custom doc sites so engineers spend less time debating layout and more time verifying endpoint accuracy. Developers reach for docs-page when launching a new REST or GraphQL API, rewriting stale README sections into a proper doc site, or standardizing onboarding guides before a public beta.
- docs navigation patterns
- code sample blocks
- callout components
- readable technical typography
Docs Page by the numbers
- 253 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #475 of 1,879 Documentation skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill docs-pageAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 253 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
How do you structure developer documentation pages for APIs?
Lay out developer or product documentation pages with navigation, code samples, callouts, and readable typography for API and SaaS onboarding.
Who is it for?
Engineers and technical writers drafting API reference or SaaS onboarding documentation before publishing to Docusaurus, Mintlify, or a custom docs site.
Skip if: Teams that only need OpenAPI spec generation without page layout, navigation, or onboarding copy structure.
When should I use this skill?
User asks to design or restructure developer docs, API reference pages, or SaaS onboarding documentation layout.
What you get
Documentation page layout with navigation tree, code sample blocks, callouts, and typography guidance ready for MDX or doc-site implementation.
- Documentation IA and page layout
- Code sample and callout placement guide
Files
Docs Page Skill
Produce a single, three-column documentation page in one HTML file.
Workflow
1. Read the active DESIGN.md (injected above). Use the body type token for prose; the mono token for code; respect line-height and max-width rules. 2. Pick a topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters. 3. Lay out three regions, expressed on the inline axis so the layout flips correctly under dir="rtl":
- Inline-start nav (240–280px, sticky): grouped link list, current
page bolded with an inline-start-edge accent stripe. 3–5 groups of 4–8 links.
- Article body (max-width ~720px, centered in the middle column):
H1, lede paragraph, H2 sections, code blocks, callout boxes (note / warning), inline links, lists.
- Inline-end TOC (200–240px, sticky): "On this page" with the
H2/H3 anchors, current section highlighted as the user scrolls. 4. Write a single HTML document:
<!doctype html>through</html>, all CSS inline.- CSS Grid for the three columns; sticky positioning for the rails.
- Code blocks: monospace token, soft surface fill, copy-button affordance
(visual only — no JS needed).
- Anchor IDs on every H2/H3 so the TOC links work.
data-od-idon the nav, article, and TOC.
5. Prose: write at least 350 words of believable docs. Include at least one shell command, one code snippet (5–15 lines), one callout, one table. 6. Self-check:
- Body text wraps at the DS line-length sweet spot (60–75 chars).
- Code uses the DS mono token, not generic
monospace. - Accent is restrained — used for active nav item, links, one callout
border. Not on body text.
- Page is readable at 1280w and collapses gracefully below 900w (TOC drops
out, nav becomes a top drawer).
- Use logical CSS (
margin-inline-start,border-inline-start,
inset-inline-end, text-align: start) on the rails and accent stripe so the layout flips correctly under dir="rtl".
Output contract
Emit between <artifact> tags:
<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Filebase docs — Quickstart</title>
<style>
:root {
--bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
--accent: #c96442; --surface: #ffffff; --code-bg: #f4f4f2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 -apple-system, system-ui, sans-serif; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 28px; display: flex; justify-content: space-between; align-items: center; }
.topbar .brand { font-weight: 600; }
.topbar input { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); width: 280px; font: inherit; background: var(--bg); }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 0; min-height: calc(100vh - 50px); }
@media (max-width: 1024px) { .layout { grid-template-columns: 220px 1fr; } .toc { display: none; } }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } }
.sidebar { padding: 24px 16px; border-right: 1px solid var(--border); overflow-y: auto; font-size: 14px; }
.sidebar .group { margin-bottom: 22px; }
.sidebar .group-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 8px 8px; }
.sidebar a { display: block; color: var(--fg); text-decoration: none; padding: 5px 8px; border-radius: 6px; }
.sidebar a:hover { background: var(--surface); }
.sidebar a.active { background: var(--accent); color: white; }
article { padding: 40px 56px 80px; max-width: 760px; }
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
h1 { font-size: 36px; letter-spacing: -0.02em; margin: 0 0 12px; }
.lede { color: var(--muted); font-size: 17px; margin: 0 0 32px; }
h2 { font-size: 22px; letter-spacing: -0.01em; margin: 40px 0 12px; }
h3 { font-size: 16px; margin: 24px 0 8px; }
p { margin: 12px 0; }
code { font-family: ui-monospace, monospace; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
pre code { background: transparent; padding: 0; }
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: 14px; }
.callout .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 4px; }
.toc { padding: 40px 24px 24px; font-size: 13px; border-left: 1px solid var(--border); }
.toc .toc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
.toc a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
.toc a.active { color: var(--accent); font-weight: 500; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
.pager a { flex: 1; text-decoration: none; color: var(--fg); padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.pager a small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
</style>
</head>
<body>
<header class="topbar" data-od-id="topbar">
<span class="brand">◰ Filebase docs</span>
<input placeholder="Search · ⌘K" />
</header>
<div class="layout">
<nav class="sidebar" data-od-id="sidebar">
<div class="group">
<div class="group-label">Getting started</div>
<a href="#" class="active">Quickstart</a>
<a href="#">Concepts</a>
<a href="#">Authentication</a>
</div>
<div class="group">
<div class="group-label">Sync engine</div>
<a href="#">Block-level deltas</a>
<a href="#">Conflict resolution</a>
<a href="#">Resumable uploads</a>
</div>
<div class="group">
<div class="group-label">CLI</div>
<a href="#">Install</a>
<a href="#">Configuration</a>
<a href="#">Subcommands</a>
</div>
</nav>
<article data-od-id="article">
<div class="crumbs">Docs › Getting started › Quickstart</div>
<h1>Quickstart</h1>
<p class="lede">Sync your first folder in under five minutes. The CLI is the fastest path; the desktop app and the API client all wrap the same engine.</p>
<h2 id="install">1. Install the CLI</h2>
<p>The CLI is distributed as a single binary for macOS, Linux, and Windows.</p>
<pre><code># macOS · Homebrew
brew install filebase
# Linux · curl
curl -fsSL https://get.filebase.dev | sh</code></pre>
<p>Verify the install:</p>
<pre><code>filebase --version
# filebase 0.6.4</code></pre>
<h2 id="auth">2. Authenticate</h2>
<p>Sign in with your Filebase account. The token is stored in <code>~/.config/filebase/credentials</code>.</p>
<pre><code>filebase auth login
# → opens your browser
# ✓ Logged in as you@example.com</code></pre>
<div class="callout">
<div class="label">Note</div>
On servers without a browser, use <code>filebase auth login --device</code> for a device-code flow.
</div>
<h2 id="sync">3. Sync a folder</h2>
<p>Pick a local directory and link it to a remote root. Filebase watches it for changes and pushes block-level diffs in the background.</p>
<pre><code>cd ~/projects
filebase init my-team
filebase sync</code></pre>
<h3>Excluding files</h3>
<p>Add a <code>.filebaseignore</code> at the root of the synced folder. Same syntax as <code>.gitignore</code>:</p>
<pre><code>node_modules/
*.log
build/</code></pre>
<h2 id="next">4. Where to go next</h2>
<p>Read <a href="#">Conflict resolution</a> to understand how Filebase merges concurrent edits, or skip to the <a href="#">CLI reference</a> for the full subcommand list.</p>
<div class="pager">
<a href="#"><small>← Previous</small>Concepts</a>
<a href="#" style="text-align: right;"><small>Next →</small>Conflict resolution</a>
</div>
</article>
<aside class="toc" data-od-id="toc">
<div class="toc-label">On this page</div>
<a href="#install" class="active">1. Install the CLI</a>
<a href="#auth">2. Authenticate</a>
<a href="#sync">3. Sync a folder</a>
<a href="#next">4. Where to go next</a>
</aside>
</div>
</body>
</html>
Related skills
Lark MarkdownInstantly turn any markdown file into clean, formatted Lark/Figma-compatible documents without manual reformatting.488k
Lark DocCreate, read, update, summarize, rewrite and manage Feishu/Lark cloud documents directly from agent workflows.401k16.1kLark WikiCreate, organize, query, and manage documents, spaces, and members inside Lark (Feishu) knowledge bases directly from AI agent workflows.397k16.1k
Domain ModelingBuild and sharpen a project's domain model: pin down domain terminology in a glossary and record architectural decisions as ADRs.318k202k
Opensource Guide CoachGet expert, attribution-safe guidance on launching and sustaining an open-source project.270k71Readme I18nMaintain consistent, updatable language selector blocks across every README variant in a multilingual repository.270k71FAQ
What does docs-page produce for API documentation?
docs-page from nexu-io/open-design outputs a structured documentation layout with navigation, code sample placement, callouts, and typography guidance for API and SaaS onboarding pages. Engineers implement the layout in MDX or their chosen doc-site framework.
Is docs-page limited to API references?
docs-page covers both API reference pages and broader SaaS product onboarding documentation. The skill balances endpoint examples with getting-started guides, prerequisites, and readable long-form technical copy.