What does the wiki-vitepress skill do?

It automates the transformation of raw Markdown files into a complete VitePress static website with a pre-configured dark theme and interactive diagrams.

Can I customize the site navigation?

The skill automatically builds the navigation and sidebar based on your wiki's catalogue structure, ensuring the browsable site reflects your actual content layout.

Where is the final site output located?

After the build process completes, the production-ready static files are located in the wiki-site/.vitepress/dist/ directory.

How does it handle Mermaid diagrams?

It applies a three-layer fix involving configuration, CSS overrides, and runtime polling to ensure diagrams look perfect in dark mode, and adds a click-to-zoom feature for detailed viewing.

Does it fix common Markdown/Vue compatibility issues?

Yes, it automatically performs post-processing to fix HTML tags like and escapes bare generic parameters (e.g., ) to prevent Vue compiler crashes.

VitePress Wiki Packager

Name: VitePress Wiki Packager
Author: microsoft

bymicrosoft

•

1,777

•

Learning & Documentation

Transforms Markdown wiki files into a professional, dark-themed VitePress static site featuring interactive Mermaid diagrams.

The VitePress Wiki Packager is a specialized skill designed to bridge the gap between raw documentation and a polished web experience. It automates the entire process of scaffolding a VitePress site, configuring a consistent dark theme, and resolving complex rendering issues common with Mermaid diagrams. By handling technical hurdles like Vue template compatibility and SVG styling overrides, this skill allows developers to convert a collection of generated Markdown pages into a production-ready, browsable website with advanced features like click-to-zoom diagrams and automated navigation sidebars.

Key Features

01Production-ready build output generation for static site hosting

021,777 GitHub stars

03Enhanced dark-mode Mermaid diagrams with specialized CSS and runtime styling fixes

04Interactive click-to-zoom functionality for high-detail architectural diagrams

05Automated Markdown post-processing for Vue template and generic parameter compatibility

06Automated VitePress scaffolding with pre-configured directory structures

Use Cases

01Converting a collection of technical wiki pages into a searchable, hosted documentation website

02Packaging internal project documentation for team-wide browsing with a consistent dark-mode UI

03Building high-fidelity technical guides that require complex, interactive Mermaid diagrams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microsoft/skills wiki-vitepress

For use in Claude.ai and ChatGPT

Download Skill