karanmrn/karanagentskills/docs-page

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.

1. Pick a topic from the brief — the page should look like real docs, not

a generic wireframe. Concrete API names, command examples, plausible parameters.

1. 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.

1. 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.

1. 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.

1. 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.