docs-page
|
pinned to #fb9ae97updated 3 months ago
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
3 months ago
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.
Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.fb9ae97· 3 months ago
Behavioral checks ran but aren't published for this artifact; the static checks above ran at publish time.
Documentation
4 passed1 warningDescription 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- releasecurrentfb9ae97warn3 months ago
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
Verification Before Completion
Evidence before assertions, always
Writing Plans
Turn specs into phased implementation plans
Test-Driven Development
Red → green → refactor discipline for any feature or bugfix
mh install skills/docs-page