wiki-vitepress
Build VitePress Sites from Wiki Markdown
Transform generated wiki Markdown files into a polished, browsable VitePress static site. Includes dark theme, dark-mode Mermaid diagrams with click-to-zoom, and production-ready build output.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "wiki-vitepress". Generate VitePress site from wiki pages
Expected outcome:
Created wiki-site/ directory with .vitepress/config.mts (dark theme, Mermaid configured), custom.css (Mermaid dark styles), theme/index.ts (click-to-zoom setup), and 12 wiki pages. Site builds successfully to .vitepress/dist/.
Using "wiki-vitepress". Configure Mermaid diagrams for dark mode
Expected outcome:
Applied three-layer dark mode fix: 1) themeVariables in config.mts with custom colors, 2) CSS overrides targeting .mermaid SVG elements, 3) JavaScript polling in theme/index.ts to replace inline styles. All diagrams render correctly in dark mode.
Security Audit
Low RiskStatic analyzer detected 69 patterns but 68 are false positives from Markdown documentation (code fences mistaken for shell execution, crypto references in comments). One legitimate concern: innerHTML assignment at line 112 uses self-generated content (low risk). Safe to publish with documentation warning.
Low Risk Issues (1)
Risk Factors
⚡ Contains scripts (1)
Quality Score
What You Can Build
Technical Documentation Site
Build a professional documentation site from wiki Markdown files with dark theme and interactive diagrams.
Knowledge Base Export
Convert internal wiki content into a browsable static site for team knowledge sharing.
Open Source Project Docs
Generate polished documentation sites with Mermaid diagrams for GitHub repositories.
Try These Prompts
Create a VitePress site structure in wiki-site/ with dark theme config and copy all generated .md wiki files into the project.
Set up the VitePress config with Mermaid plugin and configure dark theme variables for mermaid.themeVariables including primaryColor, nodeBorder, and background colors.
Implement click-to-zoom functionality for Mermaid diagrams by wrapping .mermaid containers with event listeners that open fullscreen modals on click.
Run post-processing to fix Markdown syntax issues, then build the VitePress site with npm run docs:build and output the dist folder.
Best Practices
- Use setup() with onMounted for DOM manipulation, not enhanceApp() which runs during SSR
- Apply polling for Mermaid SVG elements since they render asynchronously
- Ensure all wiki pages have YAML frontmatter with title and description
Avoid
- Do not use isCustomElement compiler option for bare generic parameters - causes crashes
- Avoid relying solely on CSS for Mermaid dark mode - inline styles require JavaScript replacement
- Do not attempt DOM access during SSR phase - document is undefined