Docs Page Skill
生成一个单独的三栏文档页面，包含在一个 HTML 文件中。
工作流程
- 读取当前的 DESIGN.md（注入在页面之上）。对于正文使用 body 类型令牌；对于代码使用 mono 令牌；遵守行高和最大宽度规则。
- 从需求摘要中选取一个主题——页面应看起来像真实文档，而非通用线框图。使用具体的API名称、命令示例和合理的参数。
- 布局三个区域，以行内轴方向排列，以便在
dir="rtl"下布局能正确翻转：- 行内开始导航（宽度240–280px，固定定位）：分组链接列表，当前页面加粗显示，并在内联开始边缘添加强调色条纹。包含3–5个组，每组4–8个链接。
- 文章主体（最大宽度 ~720px，中间列居中）：包含 H1、引导段、H2 分区、代码块、提示框（注意/警告）、行内链接和列表。
- 行内结束目录（宽度200–240px，固定定位）：“本页内容”部分，包含 H2/H3 锚点，当前章节随滚动高亮。
- 编写单个 HTML 文档：
<!doctype html>至</html>，所有 CSS 内联。- 使用 CSS Grid 实现三列布局；侧边栏使用固定定位。
- 代码块：使用等宽令牌、柔和背景填充、复制按钮占位（仅视觉效果 —— 无需 JS）。
- 每个 H2/H3 添加锚点 ID，以便目录链接生效。
- 在导航、文章主体和目录上添加
data-od-id属性。
- 正文：撰写至少 350 词的可信文档。至少包含一个 shell 命令、一个代码片段（5–15行）、一个提示框、一个表格。
- 自检：
- 正文文本在设计系统的行长度最佳点（60–75字符）处换行。
- 代码使用设计系统的等宽令牌，而非通用的
monospace。 - 强调色使用节制 —— 仅用于活动导航项、链接、一个提示框边框。不用于正文。
- 页面在 1280px 宽度下可读，并在低于 900px 时优雅折叠（目录消失，导航变为顶部抽屉）。
- 在侧边栏和强调色条纹上使用逻辑 CSS（
margin-inline-start、border-inline-start、inset-inline-end、text-align: start），以便在dir="rtl"下布局正确翻转。
输出约定
在 <artifact> 标签之间输出：
<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>
在 artifact 之前写一句话，之后不再添加内容。