Habilidades wiki-vitepress
📦

wiki-vitepress

Baixo Risco ⚡ Contém scripts

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.

Suporta: Claude Codex Code(CC)
🥉 72 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "wiki-vitepress". Generate VitePress site from wiki pages

Resultado esperado:

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/.

A utilizar "wiki-vitepress". Configure Mermaid diagrams for dark mode

Resultado esperado:

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.

Auditoria de Segurança

Baixo Risco
v1 • 2/25/2026

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
Arquivos analisados
154
Linhas analisadas
2
achados
1
Total de auditorias
Problemas de Baixo Risco (1)
SKILL.md:112
innerHTML Usage
innerHTML assignment at line 112 sets modal content from el.outerHTML. While content is self-generated (not user input), innerHTML is generally discouraged due to potential XSS risks if content source changes.

Fatores de risco

⚡ Contém scripts (1)
SKILL.md:112
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
50
Comunidade
88
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

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.

Tente Estes Prompts

Basic VitePress Setup 
Create a VitePress site structure in wiki-site/ with dark theme config and copy all generated .md wiki files into the project.
Configure Mermaid Dark Mode 
Set up the VitePress config with Mermaid plugin and configure dark theme variables for mermaid.themeVariables including primaryColor, nodeBorder, and background colors.
Add Click-to-Zoom for Diagrams 
Implement click-to-zoom functionality for Mermaid diagrams by wrapping .mermaid containers with event listeners that open fullscreen modals on click.
Build Production Site 
Run post-processing to fix Markdown syntax issues, then build the VitePress site with npm run docs:build and output the dist folder.

Melhores Práticas

  • 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

Evitar

  • 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

Perguntas Frequentes

Why do Mermaid diagrams not render in dark mode?
Mermaid applies inline styles with high specificity. You need the three-layer fix: themeVariables in config, CSS overrides with !important, and JavaScript to replace inline styles on rendered SVGs.
Why use setup() instead of enhanceApp() for DOM manipulation?
enhanceApp() runs during server-side rendering where document does not exist. setup() with onMounted only executes in the browser where DOM is available.
How do I enable click-to-zoom for diagrams?
Add event listeners to .mermaid elements that create a fullscreen modal div containing the SVG when clicked. The modal should close when clicked and use scale transform for zoom effect.
What Markdown syntax issues need fixing before build?
Replace br/ with br for Vue compatibility, wrap bare T generic parameters in backticks outside code fences, and ensure every page has YAML frontmatter with title and description.
Where does the built site output go?
The production build outputs to wiki-site/.vitepress/dist/ directory after running npm run docs:build.
Can I use this with light mode instead of dark mode?
Yes, change appearance to 'dark-mode' in config.mts and adjust the Mermaid theme variables and CSS colors for light backgrounds and dark text.

Detalhes do Desenvolvedor

Autor

sickn33

Licença

MIT

Repositório

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/wiki-vitepress

Referência

main

Estrutura de arquivos

📄 SKILL.md