[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6G9G8YJANR5FESNM60Z32PC":3,"skill-same:01M6G9G8YJANR5FESNM60Z32PC":63},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":13,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":48,"install":49,"resources":62},"01M6G9G8YJANR5FESNM60Z32PC","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.","ricardoaevt\u002Fnexus-roms","ricardoaevt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F164531880?v=4","01M6DGFGSV6CF9AKPHABBREC79","01M6DGFGYNNPJVDFQA05TDPSBN",0,"AGPL-3.0","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fmicrosoft_skills\u002F.github\u002Fplugins\u002Fdeep-wiki\u002Fskills\u002Fwiki-vitepress\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"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","d41309588593cee5c2fb44062474efc3a99fbcb6",".agent\u002Fskills\u002Fmicrosoft_skills\u002F.github\u002Fplugins\u002Fdeep-wiki\u002Fskills\u002Fwiki-vitepress","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms","https:\u002F\u002Fgithub.com\u002Fricardoaevt","2026-03-23 00:05:03",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add ricardoaevt\u002Fnexus-roms --skill wiki-vitepress",{"tool":55,"command":56},"bunx","bunx skills add ricardoaevt\u002Fnexus-roms --skill wiki-vitepress",{"tool":58,"command":59},"pnpm","pnpm dlx skills add ricardoaevt\u002Fnexus-roms --skill wiki-vitepress","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fmicrosoft_skills\u002F.github\u002Fplugins\u002Fdeep-wiki\u002Fskills\u002Fwiki-vitepress\u002FSKILL.md",true,[],[64,85,100,115,126,135],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":68,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":38},"01M6G9HYKQRK6HBKVTZM3258M3","openspec-propose","Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.","MIT","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fopenspec-propose\u002FSKILL.md",[],[72,73,74,31,22,75,76,77,28,78,79,21,80,81,82,83,84],"openspec propose","openspec","cli","proposal","complete","get","implementation","ready","user","artifacts","tasks","change","design",{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":68,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":38},"01M6G9HV9V20WFCHYVSDNQMJVK","openspec-new-change","Start a new OpenSpec change using the experimental artifact workflow. Use when the user wants to create a new feature, fix, or modification with a structured step-by-step approach.","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fopenspec-new-change\u002FSKILL.md",[],[73,92,83,93,74,94,95,96,21,80,35,97,98,99,22],"openspec new change","new feature","structured","artifact","workflow","start","fix","feature",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":68,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":38},"01M6G9HRF6R89QZXGSFC9DRQW3","openspec-explore","Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fopenspec-explore\u002FSKILL.md",[],[107,108,73,21,109,74,83,80,110,111,112,113,114],"openspec explore","explore","partner","think","thinking partner","thinking","ideas","requirements",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":68,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":38},"01M6G9HP3APFCXZG7XRWBMM524","openspec-continue-change","Continue working on an OpenSpec change by creating the next artifact. Use when the user wants to progress their change, create the next artifact, or continue their workflow.","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fopenspec-continue-change\u002FSKILL.md",[],[73,122,123,83,96,74,35,80,21,124,95,125],"continue","openspec continue change","next","progress",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":68,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":132,"publishedAt":38},"01M6G9HKT3WMSDBSKA7YM4MSSQ","openspec-archive-change","Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fopenspec-archive-change\u002FSKILL.md",[],[133,73,134,83,74,96,80,21,78,76],"openspec archive change","archive",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":68,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":38},"01M6G9HHEG0RJK4E0YTVZZ6A8T","openspec-apply-change","Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.","https:\u002F\u002Fgithub.com\u002Fricardoaevt\u002Fnexus-roms\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fopenspec-apply-change\u002FSKILL.md",[],[73,83,142,143,82,97,122,144,80,21,78,74],"openspec apply change","implement","work"]