open-design/skills/docs-page/SKILL.md
marco 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
Initial import: open-design source for helix-mind.ai distribution
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/*)
2026-05-06 20:50:24 +02:00

3.0 KiB
Raw Permalink Blame History

name description triggers od
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".
docs
documentation
guide
tutorial
api reference
文档
mode platform scenario preview design_system craft
prototype desktop engineering
type entry
html index.html
requires sections
true
color
typography
layout
components
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 (240280px, sticky): grouped link list, current page bolded with an inline-start-edge accent stripe. 35 groups of 48 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 (200240px, 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 (515 lines), one callout, one table.
  6. Self-check:
    • Body text wraps at the DS line-length sweet spot (6075 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.