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
- 최근 소스 활동
- 2026년 8월 18일 07:09
- 감지된 SKILL.md 언어
- 영어
- 스타
- 98,525
- 포크
- 11,424
설치 방법
기본적으로 소스를 먼저 확인하는 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에서 보기