What is the final output of this skill?

It generates a complete directory structure and runs a production build, placing the final browsable HTML files in the wiki-site/.vitepress/dist/ folder.

Does it fix common Markdown errors?

Yes, it automatically handles Vue-specific syntax issues like bare generic tags and break tag compatibility to prevent VitePress build failures.

What is the Wiki VitePress Packager?

It is a Claude Code skill that automates the creation of a VitePress static site from Markdown documentation, specifically optimized for dark mode and Mermaid diagrams.

How does it handle Mermaid diagrams?

It applies a three-layer fix involving theme variables, CSS overrides, and dynamic style replacement to ensure diagrams render correctly in dark mode despite SVG inline style specificity.

Wiki VitePress Packager

Name: Wiki VitePress Packager
Author: linehaul-ai

bylinehaul-ai

•

内容管理

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

The Wiki VitePress Packager is a specialized Claude Code skill designed to bridge the gap between raw documentation and a browsable, production-ready website. It automates the entire VitePress scaffolding process, including complex configurations for dark-mode Mermaid diagrams, interactive click-to-zoom features, and CSS overrides for visual consistency. By handling common Vue template pitfalls—such as sanitizing bare generic tags and fixing break tags—it ensures a seamless build process, making it ideal for developers who need to quickly deploy comprehensive documentation sites or internal wikis from existing Markdown collections.

主要功能

01Intelligent Markdown post-processing for Vue template compatibility

02Interactive click-to-zoom functionality for large architectural diagrams

03Advanced dark-mode Mermaid diagram styling with high-specificity CSS and JS overrides

04Ready-to-deploy production build output with frontmatter validation

05Automated VitePress site scaffolding and configuration

063 GitHub stars

使用场景

01Creating a browsable internal knowledge base from AI-generated research pages

02Visualizing complex system architectures through dark-themed, interactive diagrams

03Converting a collection of project notes into a searchable developer documentation site

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add linehaul-ai/linehaulai-claude-marketplace wiki-vitepress

For use in Claude.ai and ChatGPT

Download Skill