CtrlK
BlogDocsLog inGet started
Tessl Logo

wiki-vitepress

Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams. Use when user asks to "build a site" or "package as VitePress", user runs the /deep-wiki, or user wants a browsable HTML output from generated wiki pages.

64

Quality

76%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/wiki-vitepress/SKILL.md

The canonical home for this skill is wiki-vitepress in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Wiki VitePress Packager

Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams.

When to Use

  • 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:
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 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; }

Layer 3: Inline Style Replacement (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.

Click-to-Zoom for Mermaid Diagrams

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); }

Post-Processing Rules

Before VitePress build, scan all .md files and fix:

  • Replace <br/> with <br> (Vue template compiler compatibility)
  • Wrap bare <T> generic parameters in backticks outside code fences
  • Ensure every page has YAML frontmatter with title and description

Build

cd wiki-site && npm install && npm run docs:build

Output goes to wiki-site/.vitepress/dist/.

Known Gotchas

  • Mermaid renders async — SVGs don't exist when onMounted fires. Must poll.
  • isCustomElement compiler option for bare <T> causes worse crashes — do NOT use it
  • Node text in Mermaid uses inline style with highest specificity — CSS alone won't fix it
  • enhanceApp() runs during SSR where document doesn't exist — use setup() only

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
Path

plugins/AI-Agents-Safe-Coding-Skills-claude/skills/wiki-vitepress/SKILL.md

Commit

56bf65c

Last updated
First committed

Canonical home

administrakt0r/AI-Agents-Safe-Coding-Skills
In sync

since Aug 19, 2026

Also appears in

administrakt0r/AI-Agents-Safe-Coding-Skills
In sync

since Aug 19, 2026

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill