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
- آخر نشاط في المصدر
- ١٨ أغسطس ٢٠٢٦ في ٠٧:٠٩
- لغة SKILL.md المكتشفة
- الإنجليزية
- النجوم
- ٩٦٬٦٧٤
- التفرعات
- ١١٬٢٣٤
خيارات التثبيت
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
مراجعة ملفات المصدر
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
مستكشف الملفات
3 ملفاتعرض SKILL.md
SKILL.md
تعليمات المصدر · معاينة للقراءة فقط- 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
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.
عرض على GitHub