Web & Frontendlow risk

docs-page

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".

nexu-io/open-design·design-templates/docs-page/SKILL.md

61/ 100推荐值

↓

导入这个 Skill

选择你的 coding agent，复制项目级或个人级安装命令。

固定到平台收录的 commit

导入当前项目.agents/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a codex -y

导入个人环境~/.agents/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a codex -g -y

手动放置目录.agents/skills/docs-pageOfficial docs ↗

导入当前项目.claude/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a claude-code -y

导入个人环境~/.claude/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a claude-code -g -y

手动放置目录.claude/skills/docs-pageOfficial docs ↗

导入当前项目.agents/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a github-copilot -y

导入个人环境~/.copilot/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a github-copilot -g -y

手动放置目录.agents/skills/docs-pageOfficial docs ↗

导入当前项目.agents/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a cursor -y

导入个人环境~/.cursor/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a cursor -g -y

手动放置目录.agents/skills/docs-pageOfficial docs ↗

导入当前项目.agents/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a gemini-cli -y

导入个人环境~/.gemini/skills/docs-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/docs-page -a gemini-cli -g -y

Native Gemini CLIgemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path design-templates/docs-page

手动放置目录.agents/skills/docs-pageOfficial docs ↗

⚠ 安装命令使用开源 skills CLI。执行前请检查来源、脚本和权限。

Skill 指令

在 GitHub 查看原始文件 ↗

# 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-id` on 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.