[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F0DBY784RVTSACEPYY21TZ":3,"skill-same:01M6F0DBY784RVTSACEPYY21TZ":73},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M6F0DBY784RVTSACEPYY21TZ","wiki-vitepress",null,"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.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fwiki-vitepress\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"wiki vitepress","vitepress","wiki","use","with","output","zoom","theme","click","pages","build","diagrams","mermaid diagrams","generated","site","markdown","website","create","packages","mermaid","2026-11-10 10:12:30",false,"---\nname: wiki-vitepress\ndescription: 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.\n---\n\n# 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 Activate\n\n- User asks to \"build a site\" or \"package as VitePress\"\n- User runs the `\u002Fdeep-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\u002F` directory:\n\n```\nwiki-site\u002F\n├── .vitepress\u002F\n│   ├── config.mts\n│   └── theme\u002F\n│       ├── index.ts\n│       └── custom.css\n├── public\u002F\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\u002Findex.ts`)\nMermaid inline `style` attributes override everything. Use `onMounted` + polling to replace them:\n\n```typescript\nimport { onMounted } from 'vue'\n\n\u002F\u002F 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 `\u003Cbr\u002F>` with `\u003Cbr>` (Vue template compiler compatibility)\n- Wrap bare `\u003CT>` 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\u002F.vitepress\u002Fdist\u002F`.\n\n## Known Gotchas\n\n- Mermaid renders async — SVGs don't exist when `onMounted` fires. Must poll.\n- `isCustomElement` compiler option for bare `\u003CT>` 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","# 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 Activate\n\n- User asks to \"build a site\" or \"package as VitePress\"\n- User runs the `\u002Fdeep-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\u002F` directory:\n\n```\nwiki-site\u002F\n├── .vitepress\u002F\n│   ├── config.mts\n│   └── theme\u002F\n│       ├── index.ts\n│       └── custom.css\n├── public\u002F\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\u002Findex.ts`)\nMermaid inline `style` attributes override everything. Use `onMounted` + polling to replace them:\n\n```typescript\nimport { onMounted } from 'vue'\n\n\u002F\u002F 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 `\u003Cbr\u002F>` with `\u003Cbr>` (Vue template compiler compatibility)\n- Wrap bare `\u003CT>` 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\u002F.vitepress\u002Fdist\u002F`.\n\n## Known Gotchas\n\n- Mermaid renders async — SVGs don't exist when `onMounted` fires. Must poll.\n- `isCustomElement` compiler option for bare `\u003CT>` 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",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fwiki-vitepress",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill wiki-vitepress",{"tool":59,"command":60},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill wiki-vitepress",{"tool":62,"command":63},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill wiki-vitepress","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fwiki-vitepress\u002FSKILL.md",true,[67],{"path":68,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":71,"sourceHtmlUrl":72},"skill-report.json","REFERENCE","参考文档",8808,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fwiki-vitepress\u002Fskill-report.json",[74,88,97,106,112,119],{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":84,"publishedAt":39},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[79],{"categoryNo":80,"categoryName":81,"taxonomyType":82,"taxonomyTypeDesc":83},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[85,86,87],"model","model hierarchy","model hierarchy skill",{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":94,"publishedAt":39},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[93],{"categoryNo":80,"categoryName":81,"taxonomyType":82,"taxonomyTypeDesc":83},[95,25,96],"MCP","zoom mcp",{"skillNo":98,"name":99,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":39},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[103,104,105,25],"sdk","zoom apps sdk","apps",{"skillNo":107,"name":108,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":39},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[108],{"skillNo":113,"name":114,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":118,"publishedAt":39},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[117],{"categoryNo":80,"categoryName":81,"taxonomyType":82,"taxonomyTypeDesc":83},[114],{"skillNo":120,"name":121,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":39},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[121]]