Package Wiki Markdown into VitePress Site

This skill transforms generated wiki Markdown files into a polished, browsable VitePress static site with a dark-only theme and interactive Mermaid diagrams. It scaffolds a full wiki-site/ directory (.vitepress/config.mts, a custom theme folder with index.ts and custom.css, public/, the generated .md pages, package.json, index.md), configures config.mts with the withMermaid wrapper from vitepress-plugin-mermaid, sets appearance: 'dark', and derives themeConfig.nav/themeConfig.sidebar directly from the wiki's catalogue structure.

Its most detailed content is a three-layer fix for getting Mermaid diagrams to actually render in dark mode, since a single approach doesn't work: Layer 1 sets Mermaid's own themeVariables (primary/secondary/tertiary colors, background, node border, edge label background) in config.mts; Layer 2 adds CSS overrides in custom.css targeting Mermaid SVG node/edge/text elements with !important; Layer 3 handles Mermaid's inline style attributes, which have higher specificity than any CSS and override both prior layers - fixed with a setup() + onMounted() polling loop (since Mermaid renders asynchronously and the SVG doesn't exist yet when onMounted first fires) that directly rewrites element style.fill/style.stroke/style.color properties. It explicitly warns against using enhanceApp() for this, since that runs during SSR where document doesn't exist. It also covers click-to-zoom for Mermaid diagrams (a fullscreen modal opened on click, with 1.5x scale), pre-build Markdown post-processing (replacing self-closing <br/> with <br> for Vue's template compiler, wrapping bare <T> generic type parameters in backticks outside code fences, ensuring every page has YAML frontmatter with title and description), and flags the isCustomElement compiler option as making the bare-<T> problem worse rather than better, so it should not be used.

Use this skill when asked to build a site or package generated wiki content as VitePress, when the /deep-wiki:build command is run, or when browsable HTML output is wanted from previously generated wiki Markdown pages - typically as the final packaging step after a wiki catalogue has already been generated.

It is specifically the VitePress packaging/rendering layer - it assumes the Markdown content itself already exists and focuses on getting it to build and render correctly, especially the notoriously fiddly dark-mode Mermaid diagram styling.

Input is a set of generated wiki Markdown files, with a catalogue/navigation structure, to package. Output is a complete VitePress project scaffold with dark theme, correctly-styled dark-mode Mermaid diagrams with all three layers applied, click-to-zoom diagram interaction, and post-processed Markdown, built via npm run docs:build into static HTML at wiki-site/.vitepress/dist/.

cd wiki-site && npm install && npm run docs:build

Built on VitePress and the vitepress-plugin-mermaid package (withMermaid wrapper), using Vue's setup()/onMounted() lifecycle rather than enhanceApp(), which runs during SSR. Companion to wiki-generation skills that produce the source Markdown this skill packages.

Teams turning AI-generated wiki or documentation Markdown into an actual browsable static site, who need the specific dark-mode Mermaid rendering fixes and VitePress build configuration rather than generic static-site-generator setup.