{"id":"98654850-1e6a-4ca0-857d-e5a9be751e2e","shortId":"Axt99D","kind":"skill","title":"wiki-vitepress","tagline":"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 page","description":"# Wiki VitePress Packager\n\nTransform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams.\n\n## When to Use\n- User asks to \"build a site\" or \"package as VitePress\"\n- User runs the `/deep-wiki:build` command\n- User wants a browsable HTML output from generated wiki pages\n\n## VitePress Scaffolding\n\nGenerate the following structure in a `wiki-site/` directory:\n\n```\nwiki-site/\n├── .vitepress/\n│   ├── config.mts\n│   └── theme/\n│       ├── index.ts\n│       └── custom.css\n├── public/\n├── [generated .md pages]\n├── package.json\n└── index.md\n```\n\n## Config Requirements (`config.mts`)\n\n- Use `withMermaid` wrapper from `vitepress-plugin-mermaid`\n- Set `appearance: 'dark'` for dark-only theme\n- Configure `themeConfig.nav` and `themeConfig.sidebar` from the catalogue structure\n- Mermaid config must set dark theme variables:\n\n```typescript\nmermaid: {\n  theme: 'dark',\n  themeVariables: {\n    primaryColor: '#1e3a5f',\n    primaryTextColor: '#e0e0e0',\n    primaryBorderColor: '#4a9eed',\n    lineColor: '#4a9eed',\n    secondaryColor: '#2d4a3e',\n    tertiaryColor: '#2d2d3d',\n    background: '#1a1a2e',\n    mainBkg: '#1e3a5f',\n    nodeBorder: '#4a9eed',\n    clusterBkg: '#16213e',\n    titleColor: '#e0e0e0',\n    edgeLabelBackground: '#1a1a2e'\n  }\n}\n```\n\n## Dark-Mode Mermaid: Three-Layer Fix\n\n### Layer 1: Theme Variables (in config.mts)\nSet via `mermaid.themeVariables` as shown above.\n\n### Layer 2: CSS Overrides (`custom.css`)\nTarget Mermaid SVG elements with `!important`:\n\n```css\n.mermaid .node rect,\n.mermaid .node circle,\n.mermaid .node polygon { fill: #1e3a5f !important; stroke: #4a9eed !important; }\n.mermaid .edgeLabel { background-color: #1a1a2e !important; color: #e0e0e0 !important; }\n.mermaid text { fill: #e0e0e0 !important; }\n.mermaid .label { color: #e0e0e0 !important; }\n```\n\n### Layer 3: Inline Style Replacement (`theme/index.ts`)\nMermaid inline `style` attributes override everything. Use `onMounted` + polling to replace them:\n\n```typescript\nimport { onMounted } from 'vue'\n\n// In setup()\nonMounted(() => {\n  let attempts = 0\n  const fix = setInterval(() => {\n    document.querySelectorAll('.mermaid svg [style]').forEach(el => {\n      const s = (el as HTMLElement).style\n      if (s.fill && !s.fill.includes('#1e3a5f')) s.fill = '#1e3a5f'\n      if (s.stroke && !s.stroke.includes('#4a9eed')) s.stroke = '#4a9eed'\n      if (s.color) s.color = '#e0e0e0'\n    })\n    if (++attempts >= 20) clearInterval(fix)\n  }, 500)\n})\n```\n\nUse `setup()` with `onMounted`, NOT `enhanceApp()` — DOM doesn't exist during SSR.\n\n## Click-to-Zoom for Mermaid Diagrams\n\nWrap each `.mermaid` container in a clickable wrapper that opens a fullscreen modal:\n\n```typescript\ndocument.querySelectorAll('.mermaid').forEach(el => {\n  el.style.cursor = 'zoom-in'\n  el.addEventListener('click', () => {\n    const modal = document.createElement('div')\n    modal.className = 'mermaid-zoom-modal'\n    modal.innerHTML = el.outerHTML\n    modal.addEventListener('click', () => modal.remove())\n    document.body.appendChild(modal)\n  })\n})\n```\n\nModal CSS:\n```css\n.mermaid-zoom-modal {\n  position: fixed; inset: 0;\n  background: rgba(0,0,0,0.9);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 9999; cursor: zoom-out;\n}\n.mermaid-zoom-modal .mermaid { transform: scale(1.5); }\n```\n\n## Post-Processing Rules\n\nBefore VitePress build, scan all `.md` files and fix:\n- Replace `<br/>` with `<br>` (Vue template compiler compatibility)\n- Wrap bare `<T>` generic parameters in backticks outside code fences\n- Ensure every page has YAML frontmatter with `title` and `description`\n\n## Build\n\n```bash\ncd wiki-site && npm install && npm run docs:build\n```\n\nOutput goes to `wiki-site/.vitepress/dist/`.\n\n## Known Gotchas\n\n- Mermaid renders async — SVGs don't exist when `onMounted` fires. Must poll.\n- `isCustomElement` compiler option for bare `<T>` causes worse crashes — do NOT use it\n- Node text in Mermaid uses inline `style` with highest specificity — CSS alone won't fix it\n- `enhanceApp()` runs during SSR where `document` doesn't exist — use `setup()` only\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["wiki","vitepress","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-wiki-vitepress","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/wiki-vitepress","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34404 github stars · SKILL.md body (4,535 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:51:59.192Z","embedding":null,"createdAt":"2026-04-18T21:47:36.724Z","updatedAt":"2026-04-22T00:51:59.192Z","lastSeenAt":"2026-04-22T00:51:59.192Z","tsv":"'/.vitepress/dist':484 '/deep-wiki':37,86 '0':286,395,398,399,400 '0.9':401 '1':199 '1.5':427 '16213e':185 '1a1a2e':178,189,243 '1e3':165,180,232,305,308 '2':211 '20':322 '2d2d3d':176 '2d4a3e':174 '3':259 '4a9eed':170,172,183,236,313,315 '500':325 '9999':415 'a5f':166,181,233,306,309 'action':551 'align':405 'align-item':404 'alon':522 'appear':137 'applic':545 'ask':25,74,589 'async':489 'attempt':285,321 'attribut':267 'background':177,241,396 'background-color':240 'backtick':452 'bare':448,503 'bash':467 'boundari':597 'browsabl':42,92 'build':27,76,87,434,466,477 'catalogu':150 'caus':504 'cd':468 'center':407,411 'circl':227 'clarif':591 'clear':564 'clearinterv':323 'click':339,368,381 'click-to-zoom':338 'clickabl':351 'clusterbkg':184 'code':454 'color':242,245,255 'command':88 'compat':446 'compil':445,500 'config':125,153 'config.mts':115,127,203 'configur':144 'const':287,296,369 'contain':348 'content':410 'crash':506 'criteria':600 'css':212,221,386,387,521 'cursor':416 'custom.css':118,214 'dark':16,64,138,141,156,162,191 'dark-mod':190 'dark-on':140 'describ':552,568 'descript':465 'diagram':21,69,344 'directori':110 'display':402 'div':372 'doc':476 'document':532 'document.body.appendchild':383 'document.createelement':371 'document.queryselectorall':290,359 'doesn':333,533 'dom':332 'e0e0e0':168,187,246,251,256,319 'edgelabel':239 'edgelabelbackground':188 'el':295,298,362 'el.addeventlistener':367 'el.outerhtml':379 'el.style.cursor':363 'element':218 'enhanceapp':331,527 'ensur':456 'environ':580 'environment-specif':579 'everi':457 'everyth':269 'execut':547 'exist':335,493,535 'expert':585 'fenc':455 'file':8,56,438 'fill':231,250 'fire':496 'fix':197,288,324,393,440,525 'flex':403 'follow':103 'foreach':294,361 'frontmatt':461 'fullscreen':356 'generat':5,46,53,96,101,120 'generic':449 'goe':479 'gotcha':486 'highest':519 'html':43,93 'htmlelement':300 'import':220,234,237,244,247,252,257,277 'index':414 'index.md':124 'index.ts':117 'inlin':260,265,516 'input':594 'inset':394 'instal':473 'interact':19,67 'iscustomel':499 'item':406 'justifi':409 'justify-cont':408 'known':485 'label':254 'layer':196,198,210,258 'let':284 'limit':556 'linecolor':171 'mainbkg':179 'markdown':7,55 'match':565 'md':121,437 'mermaid':20,68,135,152,160,193,216,222,225,228,238,248,253,264,291,343,347,360,375,389,421,424,487,514 'mermaid-zoom-mod':374,388,420 'mermaid.themevariables':206 'miss':602 'modal':357,370,377,384,385,391,423 'modal.addeventlistener':380 'modal.classname':373 'modal.innerhtml':378 'modal.remove':382 'mode':192 'must':154,497 'node':223,226,229,511 'nodebord':182 'npm':472,474 'onmount':271,278,283,329,495 'open':354 'option':501 'output':44,94,478,574 'outsid':453 'overrid':213,268 'overview':555 'packag':31,51,80 'package.json':123 'page':48,98,122,458 'paramet':450 'permiss':595 'plugin':134 'polish':11,59 'poll':272,498 'polygon':230 'posit':392 'post':429 'post-process':428 'primarybordercolor':169 'primarycolor':164 'primarytextcolor':167 'process':430 'public':119 'rect':224 'render':488 'replac':262,274,441 'requir':126,593 'review':586 'rgba':397 'rule':431 'run':35,84,475,528 's.color':317,318 's.fill':303,307 's.fill.includes':304 's.stroke':311,314 's.stroke.includes':312 'safeti':596 'scaffold':100 'scale':426 'scan':435 'scope':567 'secondarycolor':173 'set':136,155,204 'setinterv':289 'setup':282,327,537 'shown':208 'site':14,29,62,78,109,113,471,483 'skill':543,559 'skill-wiki-vitepress' 'source-sickn33' 'specif':520,581 'ssr':337,530 'static':13,61 'stop':587 'stroke':235 'structur':104,151 'style':261,266,293,301,517 'substitut':577 'success':599 'svg':217,292 'svgs':490 'target':215 'task':563 'templat':444 'tertiarycolor':175 'test':583 'text':249,512 'theme':17,65,116,143,157,161,200 'theme/index.ts':263 'themeconfig.nav':145 'themeconfig.sidebar':147 'themevari':163 'three':195 'three-lay':194 'titl':463 'titlecolor':186 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':4,52,425 'treat':572 'typescript':159,276,358 'use':22,72,128,270,326,509,515,536,541,557 'user':24,34,39,73,83,89 'valid':582 'variabl':158,201 'via':205 'vitepress':3,12,33,50,60,82,99,114,133,433 'vitepress-plugin-mermaid':132 'vue':280,443 'want':40,90 'wiki':2,6,47,49,54,97,108,112,470,482 'wiki-sit':107,111,469,481 'wiki-vitepress':1 'withmermaid':129 'won':523 'workflow':549 'wors':505 'wrap':345,447 'wrapper':130,352 'yaml':460 'z':413 'z-index':412 'zoom':341,365,376,390,418,422 'zoom-in':364 'zoom-out':417","prices":[{"id":"1be12ccc-a341-4d8e-9a28-dcea1f4ff7f9","listingId":"98654850-1e6a-4ca0-857d-e5a9be751e2e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:47:36.724Z"}],"sources":[{"listingId":"98654850-1e6a-4ca0-857d-e5a9be751e2e","source":"github","sourceId":"sickn33/antigravity-awesome-skills/wiki-vitepress","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/wiki-vitepress","isPrimary":false,"firstSeenAt":"2026-04-18T21:47:36.724Z","lastSeenAt":"2026-04-22T00:51:59.192Z"}],"details":{"listingId":"98654850-1e6a-4ca0-857d-e5a9be751e2e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"wiki-vitepress","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34404,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-21T16:43:40Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"576430e0932c097873754191644ab0ed24dce98f","skill_md_path":"skills/wiki-vitepress/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/wiki-vitepress"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"wiki-vitepress","description":"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."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/wiki-vitepress"},"updatedAt":"2026-04-22T00:51:59.192Z"}}