Use PROACTIVELY whenever a markdown (.md) file is created or updated anywhere in the project. Automatically generates styled HTML with language-appropriate templates (RTL for Hebrew, LTR for English). Also use when the user asks to convert markdown to HTML, generate documentation, or create HTML from .md files.
From md-html-docsnpx claudepluginhub moonsite/moonsite-claude-extensions --plugin md-html-docsThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Retrieves current documentation, API references, and code examples for libraries, frameworks, SDKs, CLIs, and services via Context7 CLI. Ideal for API syntax, configs, migrations, and setup queries.
Convert any markdown file to styled, self-contained HTML. Auto-detects language and picks the right template.
When this skill is invoked (manually or via hook), print the version banner:
md-html-docs v{version} | Released: {released}
Read version and released from this file's YAML frontmatter.
The plugin includes a self-contained Python converter (convert.py) with zero dependencies. It:
# heading, subtitle from next heading/blockquote/paragraphindex.html for folders listing documents and subfoldersCRITICAL: Always derive the converter path from this skill's base directory. The converter lives at ../../convert.py relative to this SKILL.md file.
CONVERTER="${SKILL_BASE_DIR}/../../convert.py"
Where SKILL_BASE_DIR is the "Base directory for this skill" shown at the top when this skill is loaded. For example, if the base directory is:
~/.claude/plugins/cache/moonsite-claude-extensions/md-html-docs/2.5.1/skills/md-html-docs
Then the converter path is:
~/.claude/plugins/cache/moonsite-claude-extensions/md-html-docs/2.5.1/convert.py
NEVER hardcode a version number in the path. Always resolve from the skill's own base directory to ensure you use the currently installed version.
index.htmlRun the converter directly using the resolved path:
python3 "$CONVERTER" path/to/file.md # single file
python3 "$CONVERTER" path/to/folder/ # folder (non-recursive)
python3 "$CONVERTER" --all docs/ # recursive + all indexes
python3 "$CONVERTER" --index docs/guides/ # regenerate index only
/md-html-docs enable # turn on auto-generation
/md-html-docs disable # turn off
/md-html-docs status # check current state
Add frontmatter to any .md file to control its title, description, icon, and accent color in index pages:
---
title: My Document Title
description: Brief description shown on index cards
icon: ๐
accent: purple
---
# Actual content starts here...
Supported fields: title, description, icon (emoji), accent (blue, green, purple, orange).
Frontmatter is stripped from the rendered HTML โ it only affects metadata.
.claude/md-html-docs.json)IMPORTANT โ set this up before generating HTML. Create .claude/md-html-docs.json in the project root:
{
"projectName": "Brosh",
"orgName": "Moonsite",
"logoText": "BR",
"colorScheme": "blue",
"footerText": "Brosh Documentation",
"documents": {
"intro.md": { "title": "Getting Started", "icon": "๐", "accent": "green" }
},
"folders": {
"specs": { "title": "Technical Specs", "icon": "๐" }
}
}
The sticky header displays these config values:
[logo circle] [project name] [doc title] ... [Index btn] [Layout buttons]
[org name]
| Config Field | Where It Shows | Example | Notes |
|---|---|---|---|
projectName | Header โ main label (bold) | "Brosh" | Product/project name |
orgName | Header โ subtitle below project name | "Moonsite" | Company/team. Leave empty "" to hide |
logoText | Header โ 2-char circle icon | "BR" | Auto-derived from first 2 chars of projectName if omitted |
If projectName and orgName show the same value, one of them is wrong. projectName = the product/project, orgName = the company/team that owns it. Set orgName to "" to hide it entirely.
projectName โ required โ product/project name shown in headerorgName โ company/team name shown below project name (set "" to hide)logoText โ 2-char text in header circle (auto-derived from projectName if omitted)colorScheme โ preset theme: blue, green, purple, orangeaccentColor, headerFrom, headerTo โ custom hex colors (override preset)footerText โ custom footer textdocuments โ per-file overrides keyed by filename: {"file.md": {title, description, icon, accent}}folders โ per-folder overrides keyed by folder name: {"guides": {title, description, icon, accent}}Priority chain: config documents/folders override > frontmatter > auto-extracted from headings.
Local .md links are automatically rewritten to .html during conversion:
See [the API docs](api.md) or [setup guide](guides/setup.md#configuration)
Becomes: <a href="api.html"> and <a href="guides/setup.html#configuration">.
CRITICAL: NEVER leave index pages with raw folder names or generic "documents N" descriptions. After ANY conversion (--all, folder, or single file), you MUST enrich ALL index pages so every item has:
This applies to BOTH folders AND documents in every index page.
Read content: For each .md file, read the first heading and first paragraph. For each folder, read the headings of its .md files to understand the section's purpose.
Update config: Write/update .claude/md-html-docs.json with enriched metadata for ALL folders and documents:
{
"projectName": "My Project",
"orgName": "Company Name",
"logoText": "MP",
"colorScheme": "blue",
"footerText": "My Project Documentation",
"folders": {
"brosh": { "title": "ืืจืืฉ โ ืคืืจืื ืืืืื", "description": "ืืกืืื ืืคืืื, ืืจืืฉืืช ืืขืจืืช ืืืจืืืืงืืืจื", "icon": "๐๏ธ" },
"common": { "title": "ืืกืืืื ืืฉืืชืคืื", "description": "ืชืฉืชืืช, API ืืชืืขืื ืืื ื ืืืื", "icon": "๐" },
"mock": { "title": "ื ืชืื ื ืืืืงื", "description": "ืืขืจืืช Mock ืื ืชืื ื ืืื ืืคืืชืื", "icon": "๐งช" }
},
"documents": {
"requirements-spec.md": { "title": "ืืจืืฉืืช ืืขืจืืช (FRS)", "description": "ืืจืืฉืืช ืคืื ืงืฆืืื ืืืืช, ืืกืื UI, ืชืืืืืื ืขืกืงืืื", "icon": "๐" },
"api-reference.md": { "title": "API Reference", "description": "ืชืืขืื Endpoints ืืื โ ืืืืืืช, ืขืกืงืืืช, ืจืืืื", "icon": "๐" }
}
}
.md files that don't have it:---
title: Developer Guide
description: Hands-on guide for integrating AI tools into daily development workflow
icon: ๐ป
---
--all to rebuild all indexes with the enriched metadata.BAD (never do this):
brosh | documents 5
common | documents 8
mock | document 1
GOOD (always do this):
๐๏ธ ืืจืืฉ โ ืคืืจืื ืืืืื | ืืกืืื ืืคืืื, ืืจืืฉืืช ืืขืจืืช ืืืจืืืืงืืืจื
๐ ืืกืืืื ืืฉืืชืคืื | ืชืฉืชืืช, API ืืชืืขืื ืืื ื ืืืื
๐งช ื ืชืื ื ืืืืงื | ืืขืจืืช Mock ืื ืชืื ื ืืื ืืคืืชืื
When to enrich: ALWAYS. Every time --all is run or a new folder/file is created. Never leave raw names.
.md-html-docs-ignore)Place a .md-html-docs-ignore file at the project root to exclude files and folders from conversion. Format is like .gitignore:
# Comments start with #
drafts/ # Skip entire directory
internal/ # Another directory to skip
secret-*.md # Glob pattern for filenames
specs/old/** # Everything under specs/old
!drafts/important.md # Re-include a specific file (negation)
The converter also has built-in exclusions for: node_modules, .venv, venv, __pycache__, .git, dist, .tox, .mypy_cache, .pytest_cache, env, .env.
.html files directly โ always edit .md and let the converter regenerate.md and .html together โ never commit one without the othermermaid, pintora, dot, graphviz, nomnoml, d2) render as interactive SVGs via client-side libraries (d2 uses Kroki.io API)