docs-page

Sterne81.716

Forks9.449

Aktualisiert14. Juli 2026 um 08:43

A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Quelle

nexu-io

nexu-io/open-design

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

WebentwicklerInformatik- und Mathematikberufe·SOC 15-1254

Datei-Explorer

3 Dateien

SKILL.md

readonly

name	docs-page
description	A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".
triggers	["docs","documentation","guide","tutorial","api reference","文档"]
od	{"mode":"prototype","platform":"desktop","scenario":"engineering","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["typography","typography-hierarchy","typography-hierarchy-editorial","rtl-and-bidi"]}}

Docs Page Skill

Produce a single, three-column documentation page in one HTML file.

Workflow

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.
Pick a topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.
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.
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-id on the nav, article, and TOC.
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.
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.

Mehr aus diesem Repository

gleiches Repository

humanize-ppt

nexu-io/open-design

A presentation system for agent-made PPTs — born for the talk, not just the template. It turns raw material into an AST (audience-state-transfer) outline with per-page visual-enhancement decisions (image / SVG diagram / video), hands a production brief to a downstream renderer (HTML-PPT skills or native PPTX), then runs a capped 3-round presentation checkup (演讲体检) on the rendered deck. It never renders slides itself. Use before generating PPT/HTML slides from raw material, and after rendering when the user says things like "给这份 deck 做演讲体检" or "PPT 渲染质检". If all you want is one beautiful template page with no outline and no checkup, a rendering skill alone is enough.

2026-07-2181.7k

html-ppt-course-module

nexu-io/open-design

A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.

2026-07-1881.7k

html-ppt-graphify-dark-graph

nexu-io/open-design

Open Design's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.

2026-07-1881.7k

html-ppt-hermes-cyber-terminal

nexu-io/open-design

Open Design + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

2026-07-1881.7k

html-ppt-knowledge-arch-blueprint

nexu-io/open-design

Open Design's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Built as a decision-grade product management deck for engineering, SRE, leadership.

2026-07-1881.7k

html-ppt-obsidian-claude-gradient

nexu-io/open-design

Open Design's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.

2026-07-1881.7k

Docs Page Skill

Produce a single, three-column documentation page in one HTML file.

Workflow

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.

Pick a topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.

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.

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-id on the nav, article, and TOC.

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.

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.