重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
wiki-vitepress by sickn33/antigravity-awesome-skills
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill wiki-vitepress将生成的 wiki Markdown 文件转换为具有深色主题和交互式 Mermaid 图表的精美 VitePress 静态站点。
/deep-wiki:build 命令在 wiki-site/ 目录中生成以下结构:
wiki-site/
├── .vitepress/
│ ├── config.mts
│ └── theme/
│ ├── index.ts
│ └── custom.css
├── public/
├── [generated .md pages]
├── package.json
└── index.md
config.mts)vitepress-plugin-mermaid 的 withMermaid 包装器广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
appearance: 'dark'themeConfig.nav 和 themeConfig.sidebarmermaid: {
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'
}
}
如上所示,通过 mermaid.themeVariables 设置。
custom.css)使用 !important 定位 Mermaid SVG 元素:
.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; }
theme/index.ts)Mermaid 的内联 style 属性会覆盖所有样式。使用 onMounted + 轮询来替换它们:
import { onMounted } from 'vue'
// 在 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)
})
使用带有 onMounted 的 setup(),而不是 enhanceApp() —— 在 SSR 期间 DOM 不存在。
将每个 .mermaid 容器包装在一个可点击的包装器中,点击时打开全屏模态框:
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)
})
})
模态框 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); }
在 VitePress 构建之前,扫描所有 .md 文件并修复:
<br/> 替换为 <br>(Vue 模板编译器兼容性)<T> 泛型参数title 和 description 的 YAML 前言cd wiki-site && npm install && npm run docs:build
输出位于 wiki-site/.vitepress/dist/。
onMounted 触发时 SVG 不存在。必须使用轮询。<T> 的 isCustomElement 编译器选项会导致更严重的崩溃 —— 请勿使用它style —— 仅靠 CSS 无法修复它enhanceApp() 在 SSR 期间运行,此时 document 不存在 —— 仅使用 setup()此技能适用于执行概述中描述的工作流程或操作。
每周安装次数
53
代码仓库
GitHub 星标数
29.5K
首次出现
2026年2月17日
安全审计
安装于
codex52
opencode52
kimi-cli51
gemini-cli51
amp51
github-copilot51
Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams.
/deep-wiki:build commandGenerate 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.mts)Use withMermaid wrapper from vitepress-plugin-mermaid
Set appearance: 'dark' for dark-only theme
Configure themeConfig.nav and themeConfig.sidebar from 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' } }
Set via mermaid.themeVariables as shown above.
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; }
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.
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); }
Before VitePress build, scan all .md files and fix:
<br/> with <br> (Vue template compiler compatibility)<T> generic parameters in backticks outside code fencestitle and descriptioncd wiki-site && npm install && npm run docs:build
Output goes to wiki-site/.vitepress/dist/.
onMounted fires. Must poll.isCustomElement compiler option for bare <T> causes worse crashes — do NOT use itstyle with highest specificity — CSS alone won't fix itenhanceApp() runs during SSR where document doesn't exist — use setup() onlyThis skill is applicable to execute the workflow or actions described in the overview.
Weekly Installs
53
Repository
GitHub Stars
29.5K
First Seen
Feb 17, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex52
opencode52
kimi-cli51
gemini-cli51
amp51
github-copilot51
文档查找工具:实时获取库、框架和API最新文档,替代训练数据
1,300 周安装
OpenTelemetry 语义约定指南:标准化遥测属性、跨栈关联与可观测性最佳实践
46 周安装
Flutter BLoC 模式最佳实践指南:状态管理、依赖注入与导航规范
46 周安装
skill-comply:AI编码智能体合规性自动化测试工具 - 验证Claude技能规则遵循
46 周安装
ljg-card:内容转PNG图片工具,支持长图、信息图、漫画等多种视觉化格式
46 周安装
Trello项目管理技能:Membrane集成指南与API自动化操作教程
46 周安装
Linear CLI Watch:实时监听Linear问题变更,支持自定义轮询与JSON输出的命令行工具
46 周安装