How are Mermaid diagrams handled in dark mode?

The skill applies a unique three-layer fix using config variables, CSS overrides, and runtime JavaScript polling to ensure diagrams match the dark theme perfectly.

Where is the site output located after the build?

The final production-ready files are generated in the wiki-site/.vitepress/dist/ directory.

What Markdown fixes does it perform automatically?

It ensures Vue compatibility by replacing problematic HTML tags and wrapping bare generic parameters (like ) in backticks.

What does the wiki-vitepress skill do?

It automates the conversion of Markdown files into a production-ready VitePress website, complete with themed styling and interactive diagrams.

Does it support zooming for large diagrams?

Yes, it automatically implements a click-to-zoom feature that opens diagrams in a fullscreen modal for better readability.

VitePress Wiki Packager

Name: VitePress Wiki Packager
Author: haniakrim21

byhaniakrim21

•

学習とドキュメンテーション

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

The wiki-vitepress skill automates the end-to-end process of turning raw Markdown documentation into a polished, browsable website. It handles complex scaffolding, including configuration for dark-mode themes and advanced Mermaid diagram rendering with custom click-to-zoom functionality. The skill also includes vital post-processing logic to ensure Markdown compatibility with the Vue template compiler, fixing common issues like bare generic parameters and HTML syntax errors to ensure a seamless production build.

主な機能

01Triple-layer dark mode fix for Mermaid diagrams including CSS and JS overrides

02Optimized production build workflow for static site deployment

03Built-in click-to-zoom modal functionality for interactive technical diagrams

04Automated VitePress project scaffolding and directory structure generation

051 GitHub stars

06Automated Markdown post-processing for Vue template compatibility

ユースケース

01Building a professional technical knowledge base with complex architecture diagrams

02Converting a collection of project wiki pages into a searchable documentation portal

03Publishing developer-focused documentation with a consistent dark-mode aesthetic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add haniakrim21/everything-claude-code wiki-vitepress

For use in Claude.ai and ChatGPT

Download Skill