5dd70b5016
Some checks failed
ci / Validate workspace (push) Successful in 12m32s
landing-page-ci / Validate landing page (push) Successful in 9m41s
landing-page-deploy / Deploy landing page (push) Failing after 5m23s
github-metrics / Generate repository metrics SVG (push) Failing after 2m3s
refresh-contributors-wall / Refresh contributors wall cache bust (push) Failing after 11s
This repository contains the open-design daemon CLI source code, built and packaged at https://helix-mind.ai/cli/open-design/latest.tgz for use by the HelixMind /design slash command. Licenses: Apache-2.0 (root) + MIT (skills/*)
81 lines
3.0 KiB
Markdown
81 lines
3.0 KiB
Markdown
---
|
||
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: [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.
|