wiki-vitepress
Build VitePress Sites from Wiki Markdown
Transform generated wiki Markdown files into a polished, browsable VitePress static site. Includes dark theme, dark-mode Mermaid diagrams with click-to-zoom, and production-ready build output.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「wiki-vitepress」を使用しています。 Generate VitePress site from wiki pages
期待される結果:
Created wiki-site/ directory with .vitepress/config.mts (dark theme, Mermaid configured), custom.css (Mermaid dark styles), theme/index.ts (click-to-zoom setup), and 12 wiki pages. Site builds successfully to .vitepress/dist/.
「wiki-vitepress」を使用しています。 Configure Mermaid diagrams for dark mode
期待される結果:
Applied three-layer dark mode fix: 1) themeVariables in config.mts with custom colors, 2) CSS overrides targeting .mermaid SVG elements, 3) JavaScript polling in theme/index.ts to replace inline styles. All diagrams render correctly in dark mode.
セキュリティ監査
低リスクStatic analyzer detected 69 patterns but 68 are false positives from Markdown documentation (code fences mistaken for shell execution, crypto references in comments). One legitimate concern: innerHTML assignment at line 112 uses self-generated content (low risk). Safe to publish with documentation warning.
低リスクの問題 (1)
リスク要因
⚡ スクリプトを含む (1)
品質スコア
作れるもの
Technical Documentation Site
Build a professional documentation site from wiki Markdown files with dark theme and interactive diagrams.
Knowledge Base Export
Convert internal wiki content into a browsable static site for team knowledge sharing.
Open Source Project Docs
Generate polished documentation sites with Mermaid diagrams for GitHub repositories.
これらのプロンプトを試す
Create a VitePress site structure in wiki-site/ with dark theme config and copy all generated .md wiki files into the project.
Set up the VitePress config with Mermaid plugin and configure dark theme variables for mermaid.themeVariables including primaryColor, nodeBorder, and background colors.
Implement click-to-zoom functionality for Mermaid diagrams by wrapping .mermaid containers with event listeners that open fullscreen modals on click.
Run post-processing to fix Markdown syntax issues, then build the VitePress site with npm run docs:build and output the dist folder.
ベストプラクティス
- Use setup() with onMounted for DOM manipulation, not enhanceApp() which runs during SSR
- Apply polling for Mermaid SVG elements since they render asynchronously
- Ensure all wiki pages have YAML frontmatter with title and description
回避
- Do not use isCustomElement compiler option for bare generic parameters - causes crashes
- Avoid relying solely on CSS for Mermaid dark mode - inline styles require JavaScript replacement
- Do not attempt DOM access during SSR phase - document is undefined