Packages generated wiki Markdown into a VitePress static site with dark theme, dark-mode Mermaid diagrams with click-to-zoom, and production build output. Use when the user wants to create a browsable website from generated wiki pages.
npxskills add microsoft/skills--skill wiki-vitepressLoading…
Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams.
/deep-wiki:build commandGenerate 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.mts)withMermaid wrapper from vitepress-plugin-mermaidappearance: 'dark'themeConfig.nav and themeConfig.sidebar from the catalogue structuremermaid: {
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'
}
}
Set via mermaid.themeVariables as shown above.
custom.css)Target Mermaid SVG elements with !important:
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon { fill: #1e3a5f !important; stroke: #4a9eed !important; }
.mermaid .edgeLabel { background-color: #1a1a2e !important; color: #e0e0e0 !important; }
.mermaid text { fill: #e0e0e0 !important; }
.mermaid .label { color: #e0e0e0 !important; }
theme/index.ts)Mermaid inline style attributes override everything. Use onMounted + polling to replace them:
import { onMounted } from 'vue'
// In setup()
onMounted(() => {
let attempts = 0
const fix = setInterval(() => {
document.querySelectorAll('.mermaid svg [style]').forEach(el => {
const s = (el as HTMLElement).style
if (s.fill && !s.fill.includes('#1e3a5f')) s.fill = '#1e3a5f'
if (s.stroke && !s.stroke.includes('#4a9eed')) s.stroke = '#4a9eed'
if (s.color) s.color = '#e0e0e0'
})
if (++attempts >= 20) clearInterval(fix)
}, 500)
})
Use setup() with onMounted, NOT enhanceApp() — DOM doesn't exist during SSR.
Wrap each .mermaid container in a clickable wrapper that opens a fullscreen modal:
document.querySelectorAll('.mermaid').forEach(el => {
el.style.cursor = 'zoom-in'
el.addEventListener('click', () => {
const modal = document.createElement('div')
modal.className = 'mermaid-zoom-modal'
modal.innerHTML = el.outerHTML
modal.addEventListener('click', () => modal.remove())
document.body.appendChild(modal)
})
})
Modal CSS:
.mermaid-zoom-modal {
position: fixed; inset: 0;
background: rgba(0,0,0,0.9);
display: flex; align-items: center; justify-content: center;
z-index: 9999; cursor: zoom-out;
}
.mermaid-zoom-modal .mermaid { transform: scale(1.5); }
Before VitePress build, scan all .md files and fix:
<br/> with <br> (Vue template compiler compatibility)<T> generic parameters in backticks outside code fencestitle and descriptioncd wiki-site && npm install && npm run docs:build
Output goes to wiki-site/.vitepress/dist/.
onMounted fires. Must poll.isCustomElement compiler option for bare <T> causes worse crashes — do NOT use itstyle with highest specificity — CSS alone won't fix itenhanceApp() runs during SSR where document doesn't exist — use setup() only
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).