ReddRadar
Agent skill
wiki-vitepress
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.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/sickn33/wiki-vitepress
SKILL.md
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:buildcommand - 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
withMermaidwrapper fromvitepress-plugin-mermaid - Set
appearance: 'dark'for dark-only theme - Configure
themeConfig.navandthemeConfig.sidebarfrom 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
titleanddescription
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
onMountedfires. Must poll. isCustomElementcompiler option for bare<T>causes worse crashes — do NOT use it- Node text in Mermaid uses inline
stylewith highest specificity — CSS alone won't fix it enhanceApp()runs during SSR wheredocumentdoesn't exist — usesetup()only
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?