wiki-vitepresslisted
Install: claude install-skill aiskillstore/marketplace
# Wiki VitePress Packager
Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams.
## When to Activate
- User asks to "build a site" or "package as VitePress"
- User runs the `/deep-wiki:build` command
- User wants a browsable HTML output from generated wiki pages
## VitePress Scaffolding
Generate the following structure in a `wiki-site/` directory:
```
wiki-site/
├── .vitepress/
│ ├── config.mts
│ └── theme/
│ ├── index.ts
│ └── custom.css
├── public/
├── [generated .md pages]
├── package.json
└── index.md
```
## Config Requirements (`config.mts`)
- Use `withMermaid` wrapper from `vitepress-plugin-mermaid`
- Set `appearance: 'dark'` for dark-only theme
- Configure `themeConfig.nav` and `themeConfig.sidebar` from the catalogue structure
- Mermaid config must set dark theme variables:
```typescript
mermaid: {
theme: 'dark',
themeVariables: {
primaryColor: '#1e3a5f',
primaryTextColor: '#e0e0e0',
primaryBorderColor: '#4a9eed',
lineColor: '#4a9eed',
secondaryColor: '#2d4a3e',
tertiaryColor: '#2d2d3d',
background: '#1a1a2e',
mainBkg: '#1e3a5f',
nodeBorder: '#4a9eed',
clusterBkg: '#16213e',
titleColor: '#e0e0e0',
edgeLabelBackground: '#1a1a2e'
}
}
```
## Dark-Mode Mermaid: Three-Layer Fix
### Layer 1: Theme Variables (in config.mts)
Set via `mermaid.themeVariables` as shown above.
### Layer 2: CSS Overrides (`custom.css`)
Target Me