Compétences wiki-vitepress
📦

wiki-vitepress

Risque faible ⚡ Contient des 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.

Prend en charge: Claude Codex Code(CC)
🥉 72 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez Ă  utiliser

Tester

Utilisation de "wiki-vitepress". Generate VitePress site from wiki pages

RĂ©sultat attendu:

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

Utilisation de "wiki-vitepress". Configure Mermaid diagrams for dark mode

RĂ©sultat attendu:

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.

Audit de sécurité

Risque faible
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
Fichiers analysés
154
Lignes analysées
2
résultats
1
Total des audits
Problèmes à risque faible (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.

Facteurs de risque

⚡ Contient des scripts (1)
SKILL.md:112
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
88
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

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.

Essayez ces 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.

Bonnes pratiques

  • 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

Éviter

  • 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

Foire aux questions

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.

Détails du développeur

Auteur

sickn33

Licence

MIT

DĂ©pĂ´t

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

RĂ©f

main

Structure de fichiers

đź“„ SKILL.md