wiki-vitepress_skill

Overview

This skill packages generated wiki Markdown into a ready-to-build VitePress static site. It scaffolds a dark-only theme, configures dark-mode Mermaid diagrams, and produces a production build output ready for deployment. Use it to convert a collection of wiki pages into a browsable HTML site with click-to-zoom diagram support.

How this skill works

The packager creates a wiki-site/ directory with VitePress config, a theme extension, public assets, and the generated .md pages. It injects a config.mts that uses the withMermaid wrapper, sets appearance: 'dark', and applies specific Mermaid themeVariables for consistent dark rendering. It also adds CSS overrides and a client-side setup script that patches inline Mermaid styles and enables click-to-zoom modals for diagrams. Finally, it runs a pre-build pass to fix Markdown issues and ensures frontmatter before producing .vitepress/dist.

When to use it

• You want a browsable static site from generated wiki Markdown.
• You need dark-mode-first presentation with consistent Mermaid diagrams.
• You require click-to-zoom interactive diagrams for documentation.
• You plan to deliver a production-ready build folder for deployment.
• You run the /deep-wiki:build command or ask to "build a site".

Best practices

• Ensure each page has YAML frontmatter with title and description before packaging.
• Run the Markdown post-processing to replace <br/> with <br> and backtick bare <T> generics.
• Use setup() with onMounted and a short polling loop to patch Mermaid inline styles (avoid enhanceApp()).
• Keep Mermaid themeVariables and CSS overrides in sync to avoid visual drift.
• Test builds locally (npm install && npm run docs:build) and inspect .vitepress/dist before deploy.

Example use cases

• Convert an internal wiki export into a public documentation site with dark theme.
• Produce a documentation site for an API that includes Mermaid diagrams and flowcharts.
• Deliver a browsable knowledge base for a team with click-to-zoom visuals for complex diagrams.
• Automate nightly builds of updated wiki content into a static site for stakeholders.