{"id":"432df077-b6ab-4d66-a6b5-59a9d2696dd0","shortId":"wxa8GM","kind":"skill","title":"docs-page","tagline":"A documentation page — inline-start nav, scrollable article body,\ninline-end table of contents. Use when the brief mentions \"docs\",\n\"documentation\", \"guide\", \"API reference\", or \"tutorial\".","description":"# Docs Page Skill\n\nProduce a single, three-column documentation page in one HTML file.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Use the body type token for\n prose; the mono token for code; respect line-height and max-width rules.\n2. **Pick a topic** from the brief — the page should look like real docs, not\n a generic wireframe. Concrete API names, command examples, plausible\n parameters.\n3. **Lay out** three regions, expressed on the inline axis so the\n layout flips correctly under `dir=\"rtl\"`:\n - **Inline-start nav** (240–280px, sticky): grouped link list, current\n page bolded with an `inline-start`-edge accent stripe. 3–5 groups\n of 4–8 links.\n - **Article body** (max-width ~720px, centered in the middle column):\n H1, lede paragraph, H2 sections, code blocks, callout boxes (note /\n warning), inline links, lists.\n - **Inline-end TOC** (200–240px, sticky): \"On this page\" with the\n H2/H3 anchors, current section highlighted as the user scrolls.\n4. **Write** a single HTML document:\n - `` through ``, all CSS inline.\n - CSS Grid for the three columns; sticky positioning for the rails.\n - Code blocks: monospace token, soft surface fill, copy-button affordance\n (visual only — no JS needed).\n - Anchor IDs on every H2/H3 so the TOC links work.\n - `data-od-id` on the nav, article, and TOC.\n5. **Prose**: write at least 350 words of believable docs. Include at least\n one shell command, one code snippet (5–15 lines), one callout, one table.\n6. **Self-check**:\n - Body text wraps at the DS line-length sweet spot (60–75 chars).\n - Code uses the DS mono token, not generic `monospace`.\n - Accent is restrained — used for active nav item, links, one callout\n border. Not on body text.\n - Page is readable at 1280w and collapses gracefully below 900w (TOC drops\n out, nav becomes a top drawer).\n - Use logical CSS (`margin-inline-start`, `border-inline-start`,\n `inset-inline-end`, `text-align: start`) on the rails and accent\n stripe so the layout flips correctly under `dir=\"rtl\"`.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\nOne sentence before the artifact, nothing after.","tags":["docs","page","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-docs-page","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/docs-page","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,347 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:19.439Z","embedding":null,"createdAt":"2026-05-01T18:52:32.202Z","updatedAt":"2026-05-11T06:52:19.439Z","lastSeenAt":"2026-05-11T06:52:19.439Z","tsv":"'1':48 '1280w':323 '15':270 '2':76 '200':176 '240':123 '240px':177 '280px':124 '3':101,140 '350':255 '4':144,193 '5':141,250,269 '6':276 '60':291 '720px':152 '75':292 '8':145 '900w':328 'accent':138,303,360 'activ':51,308 'afford':224 'align':354 'anchor':185,230 'api':28,95 'articl':12,147,247 'artifact':379 'axi':110 'becom':333 'believ':258 'block':164,215 'bodi':13,57,148,280,317 'bold':131 'border':314,345 'border-inline-start':344 'box':166 'brief':23,82 'button':223 'callout':165,273,313 'center':153 'char':293 'check':279 'code':66,163,214,267,294 'collaps':325 'column':40,157,208 'command':97,265 'concret':94 'content':19 'contract':371 'copi':222 'copy-button':221 'correct':115,366 'css':201,203,339 'current':129,186 'data':241 'data-od-id':240 'design.md':52 'dir':117,368 'doc':2,25,32,89,259 'docs-pag':1 'document':5,26,41,198 'drawer':336 'drop':330 'ds':285,297 'edg':137 'emit':372 'end':16,174,351 'everi':233 'exampl':98 'express':106 'file':46 'fill':220 'flip':114,365 'generic':92,301 'grace':326 'grid':204 'group':126,142 'guid':27 'h1':158 'h2':161 'h2/h3':184,234 'height':70 'highlight':188 'html':45,197 'id':231,243 'includ':260 'inject':53 'inlin':8,15,109,120,135,169,173,202,342,346,350 'inline-end':14,172 'inline-start':7,119,134 'inset':349 'inset-inline-end':348 'item':310 'js':228 'lay':102 'layout':113,364 'least':254,262 'lede':159 'length':288 'like':87 'line':69,271,287 'line-height':68 'line-length':286 'link':127,146,170,238,311 'list':128,171 'logic':338 'look':86 'margin':341 'margin-inline-start':340 'max':73,150 'max-width':72,149 'mention':24 'middl':156 'mono':63,298 'monospac':216,302 'name':96 'nav':10,122,246,309,332 'need':229 'note':167 'noth':380 'od':242 'one':44,263,266,272,274,312,375 'output':370 'page':3,6,33,42,84,130,181,319 'paragraph':160 'paramet':100 'pick':77 'plausibl':99 'posit':210 'produc':35 'prose':61,251 'rail':213,358 'read':49 'readabl':321 'real':88 'refer':29 'region':105 'respect':67 'restrain':305 'rtl':118,369 'rule':75 'scroll':192 'scrollabl':11 'section':162,187 'self':278 'self-check':277 'sentenc':376 'shell':264 'singl':37,196 'skill':34 'skill-docs-page' 'snippet':268 'soft':218 'source-nexu-io' 'spot':290 'start':9,121,136,343,347,355 'sticki':125,178,209 'stripe':139,361 'surfac':219 'sweet':289 'tabl':17,275 'tag':374 'text':281,318,353 'text-align':352 'three':39,104,207 'three-column':38 'toc':175,237,249,329 'token':59,64,217,299 'top':335 'topic':79 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'tutori':31 'type':58 'use':20,55,295,306,337 'user':191 'visual':225 'warn':168 'width':74,151 'wirefram':93 'word':256 'work':239 'workflow':47 'wrap':282 'write':194,252","prices":[{"id":"a7f2c73a-a1b8-49ab-bcf5-47bd7e6442a7","listingId":"432df077-b6ab-4d66-a6b5-59a9d2696dd0","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:32.202Z"}],"sources":[{"listingId":"432df077-b6ab-4d66-a6b5-59a9d2696dd0","source":"github","sourceId":"nexu-io/open-design/docs-page","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/docs-page","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:32.202Z","lastSeenAt":"2026-05-11T06:52:19.439Z"},{"listingId":"432df077-b6ab-4d66-a6b5-59a9d2696dd0","source":"skills_sh","sourceId":"nexu-io/open-design/docs-page","sourceUrl":"https://skills.sh/nexu-io/open-design/docs-page","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:46.089Z","lastSeenAt":"2026-05-07T22:41:47.137Z"}],"details":{"listingId":"432df077-b6ab-4d66-a6b5-59a9d2696dd0","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"docs-page","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"9eb800affaa7e4f506dd16f54d0c732f52293c6f","skill_md_path":"skills/docs-page/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/docs-page"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"docs-page","description":"A documentation page — inline-start nav, scrollable article body,\ninline-end table of contents. Use when the brief mentions \"docs\",\n\"documentation\", \"guide\", \"API reference\", or \"tutorial\"."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/docs-page"},"updatedAt":"2026-05-11T06:52:19.439Z"}}