docs-page
|
pinned to #fb9ae97updated last week
Ask your AI client: “install skills/docs-page”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install skills/docs-pagemetahub onboarded this repo on the author's behalf.
If you own github.com/nexu-io/open-design on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
77,070
Last commit
last week
Latest release
published
- #agent-skills
- #ai-agents
- #ai-design
- #byok
- #claude-code-for-design
- #claude-design
- #codex-design
- #coding-agents
- #cursor-design
- #design-systems
- #design-tools
- #desktop-app
- #figma-alternative
- #generative-ai
- #hermes-agent
- #local-first
- #no-code
- #prototyping
- #ui-generator
- #vibe-coding
About this skill
Pulled from SKILL.md at publish time.
Produce a single, three-column documentation page in one HTML file.
Evaluation report
WarningsAutomated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.fb9ae97· last week
Documentation
41Description qualitywarn
49 words · 305 chars — manifest description is empty; graded the GitHub repo description instead
A skill's manifest description doubles as its trigger — add one to SKILL.md (15+ words, e.g. “use this skill when …”).
README is present and substantial
54,272 chars · 20 sections · 10 code blocks
Tags / topics declared
20 total — agent-skills, ai-agents, ai-design, byok, claude-code-for-design, claude-design (+14)
README has usage / example sections
found: Quick start
Homepage / docs URL declared
https://open-design.ai
Release history
1- releasecurrentfb9ae97warnlast week
Contents
Produce a single, three-column documentation page in one HTML file.
Workflow
- 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.
- Pick a topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.
- 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.
- Inline-start nav (240–280px, sticky): grouped link list, current
page bolded with an
- 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-idon the nav, article, and TOC.
- 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.
- 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 underdir="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.
Reviews
No reviews yet. Be the first.
Related
Planning With Files
Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B acquisition.
Browser Use
🌐 Make websites accessible for AI agents. Automate tasks online with ease.
Frontend Slides
Create beautiful slides on the web using Claude's frontend skills
mh install skills/docs-page