[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69B2C554FFYB8DAFGTTQTFQ":3,"skill-same:01M69B2C554FFYB8DAFGTTQTFQ":77},{"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":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":52,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M69B2C554FFYB8DAFGTTQTFQ","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.","microsoft\u002Fskills","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69AJYYW4E1RMSYCQDJ4FJSH",3195,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fplugins\u002Fdeep-wiki\u002Fskills\u002Fwiki-vitepress\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,9],"wiki vitepress","wiki","vitepress","diagrams","when","dark","static","static site","mode","dark-mode","theme","click","pages","mermaid diagrams","use","generated","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.\nlicense: MIT\nmetadata:\n  author: Microsoft\n  version: \"1.0.0\"\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,"license":15,"metadata":45,"description":7},{"author":12,"version":46},"1.0.0","main","3f5b461b2314e01c400564051e92469114c5b68f",".github\u002Fplugins\u002Fdeep-wiki\u002Fskills\u002Fwiki-vitepress",365,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills","https:\u002F\u002Fmicrosoft.github.io\u002Fskills\u002F","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-11-12 02:02:58",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add microsoft\u002Fskills --skill wiki-vitepress",{"tool":63,"command":64},"bunx","bunx skills add microsoft\u002Fskills --skill wiki-vitepress",{"tool":66,"command":67},"pnpm","pnpm dlx skills add microsoft\u002Fskills --skill wiki-vitepress","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fplugins\u002Fdeep-wiki\u002Fskills\u002Fwiki-vitepress\u002FSKILL.md",true,[71],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Fmonitoring-patterns.md","REFERENCE","参考文档",10593,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Frsmdt-the-startup\u002Fplugins\u002Fteam\u002Fskills\u002Finfrastructure\u002Fobservability-design\u002Freferences\u002Fmonitoring-patterns.md",[78,106,144,171,192,230],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":89,"publishedAt":40},"01M69B4JCRQV5SPXAFCKXQRV0H","skill-creator","Guide for creating effective skills for AI coding agents working with Azure SDKs and Microsoft Foundry services. Use when creating new skills or updating existing skills.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fskill-creator\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[90,91,92,9,93,94,95,96,97,98,99,33,100,101,102,103,104,23,105],"skill creator","creator","coding agents","foundry","microsoft foundry","ai coding agents","azure","services","coding","guide","ai coding","with","sdks","for","Existing","new",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":122,"publishedAt":40},"01M69B4FD57V1MYKRWAJJECTZ7","podcast-generation","Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creation from content, or integrating with Azure OpenAI Realtime API for real audio output. Covers full-stack implementation from React frontend to Python FastAPI backend with WebSocket streaming.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fpodcast-generation\u002FSKILL.md",[112,115,118,121],{"categoryNo":113,"categoryName":114,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":116,"categoryName":117,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":119,"categoryName":120,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},[123,124,125,126,127,128,129,96,130,131,132,133,134,135,136,137,138,139,140,141,142,23,143],"podcast generation","podcast","generation","frontend","python","react","realtime","azure openai","generate","streaming","api","Audio","stack","text","model","fastapi","creation","python fastapi","narrative","features","fastapi backend",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":151,"publishedAt":40},"01M69B4CYPM5SESY5ZWEFDXEQZ","microsoft-docs","Understand Microsoft technologies by querying official documentation. Use whenever the user asks how something works, wants tutorials, needs configuration options, limits, quotas, or best practices for any Microsoft technology (Azure, .NET, M365, Windows, Power Platform, etc.)—even if they don't mention \"docs.\" If the question is about understanding a concept rather than writing code, this is the right skill.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fmicrosoft-docs\u002FSKILL.md",[150],{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},[152,9,153,154,155,156,157,158,159,160,161,96,162,163,164,33,165,60,166,167,168,169,170,103],"docs","microsoft docs","MCP","writing","cli","mcp server","windows","power platform","official","documentation","learn","best practices","question","power","back","technology","platform","learn mcp","concept",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":175,"categories":176,"keywords":178,"publishedAt":40},"01M69B49C3YPD1ZJ3NC0HPCY58","mcp-builder","Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP), Node\u002FTypeScript (MCP SDK), or C#\u002F.NET (Microsoft MCP SDK).","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fmcp-builder\u002FSKILL.md",[177],{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},[154,179,180,181,127,182,183,184,9,185,186,137,187,188,99,33,189,190,191,101,103,23],"mcp builder","builder","typescript","llms","sdk","model context protocol","fastmcp","Tools","node","context","integrate","mcp sdk","building mcp servers",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":210,"publishedAt":40},"01M69B467A7CDMFQ0T6Q0ZA12Q","kql","KQL language expertise for writing correct, efficient Kusto Query Language queries. Covers syntax gotchas, join patterns, dynamic types, datetime pitfalls, regex patterns, serialization, memory management, result-size discipline, and advanced functions (geo, vector, graph). USE THIS SKILL whenever writing, debugging, or reviewing KQL queries — even simple ones — because the gotchas section prevents the most common errors that waste tool calls and cause expensive retry cascades. Trigger on: KQL, Kusto, ADX, Azure Data Explorer, Fabric Real-Time Intelligence, EventHouse, Log Analytics, log analysis, data exploration, time series, anomaly detection, summarize, where clause, join, extend, project, let statement, parse operator, extract function, any mention of pipe-forward query syntax.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fkql\u002FSKILL.md",[198,201,202,207],{"categoryNo":199,"categoryName":200,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},{"categoryNo":203,"categoryName":204,"taxonomyType":205,"taxonomyTypeDesc":206},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",{"categoryNo":208,"categoryName":209,"taxonomyType":205,"taxonomyTypeDesc":206},"01JBSEEDCAT000000000000036","内容创作者",[194,155,211,212,213,96,214,215,216,217,218,219,220,221,222,223,224,225,226,103,227,228,229],"summarize","memory","analytics","vector","time series","tool","discipline","log","geo","exploration","pipe","time","project","regex","join","datetime","section","anomaly","parse",{"skillNo":231,"name":232,"nameZh":6,"description":233,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":234,"categories":235,"keywords":236,"publishedAt":40},"01M69B44HJQ7897EZ7NE7DWQX3","github-issue-creator","Convert raw notes, error logs, voice dictation, or screenshots into crisp GitHub-flavored markdown issue reports. Use when the user pastes bug info, error messages, or informal descriptions and wants a structured GitHub issue. Supports images\u002FGIFs for visual evidence.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgithub-issue-creator\u002FSKILL.md",[],[237,238,239,240,91,241,242,243,244,245,246,247,33,248,249,250,251,252,253,103,23],"github","github issue creator","github issue","issue","issue creator","screenshots","notes","logs","error messages","messages","convert","evidence","reports","images","info","visual","error"]