Menu
Render a Mermaid diagram to a self-contained HTML file and a PNG, using the browse shim as the renderer — no heavy diagram toolchain to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Fast headless browser for QA testing and site dogfooding. Navigate any URL, interact with elements, verify page state, diff before/after actions, take annotated screenshots, check responsive layouts, test forms and uploads, handle dialogs, and assert element states. ~100ms per command.
Chief Security Officer mode. Infrastructure-first security audit: secrets archaeology, dependency supply chain, CI/CD pipeline security, LLM/AI security, skill supply chain scanning, plus OWASP Top 10, STRIDE threat modeling, and active verification. Two modes: daily (zero-noise, 8/10 confidence gate) and comprehensive (monthly deep scan, 2/10 bar). Trend tracking across audit runs.
CEO/founder-mode plan review. Rethink the problem, find the 10-star product, challenge premises, expand scope when it creates a better product. Four modes: SCOPE EXPANSION (dream big), SELECTIVE EXPANSION (hold scope + cherry-pick expansions), HOLD SCOPE (maximum rigor), SCOPE REDUCTION (strip to essentials).
Update the installed vibestack pack to the latest release — detect the install (global git checkout or a project-local vendored copy), run the upgrade, run version migrations, and show what changed.
Safety guardrails for destructive commands. Warns before rm -rf, DROP TABLE, force-push, git reset --hard, kubectl delete, and similar destructive operations. User can override each warning.
Generate missing documentation from scratch for a feature, module, or entire project. Uses the Diataxis framework (tutorial / how-to / reference / explanation) to produce complete, structured documentation. Can be invoked standalone or called by /document-release when it finds coverage gaps.
| name | diagram |
| description | Render a Mermaid diagram to a self-contained HTML file and a PNG, using the browse shim as the renderer — no heavy diagram toolchain to install. |
| allowed-tools | ["Bash","Read","Write"] |
| triggers | ["draw a diagram","make a mermaid diagram","render this flowchart","diagram this","visualize this as a graph"] |
Use to turn a description or some Mermaid source into a picture — "draw a diagram", "make a flowchart", "diagram this architecture", "visualize this as a graph".
vibestack renders Mermaid by wrapping it in a self-contained HTML page
(Mermaid from a CDN) and screenshotting it with the browse shim. No extra
toolchain: the HTML opens in any browser even with no shim, and the PNG is
produced by the same $B you already use for QA.
{{include lib/snippets/browse-setup.md}}
If the user gave Mermaid, use it. Otherwise write it from their description
(flowchart, sequenceDiagram, erDiagram, classDiagram, gantt, etc.).
Pick an output base path (default ./diagram).
OUT="${OUT:-./diagram}" # base path; produces $OUT.html and $OUT.png
mkdir -p "$(dirname "$OUT")"
cat > "$OUT.html" <<'HTML'
<!DOCTYPE html><html><head><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<style>body{margin:0;padding:20px;background:#fff;font-family:system-ui}</style>
</head><body>
<pre class="mermaid">
__MERMAID__
</pre>
<script>mermaid.initialize({startOnLoad:true,theme:'default'});</script>
</body></html>
HTML
Replace the __MERMAID__ placeholder with the actual source (write the file with
the Write tool if the diagram has characters awkward for a heredoc).
if [ -n "${B:-}" ] && [ "$("$B" status 2>/dev/null)" != "BROWSE_NOT_AVAILABLE" ]; then
"$B" daemon >/dev/null 2>&1 & # the daemon lets Mermaid finish drawing before capture
sleep 1
"$B" chain "goto file://$(cd "$(dirname "$OUT")" && pwd)/$(basename "$OUT").html" "wait 1200" "screenshot $OUT.png"
"$B" daemon-stop >/dev/null 2>&1 || true
echo "DIAGRAM: $OUT.png (and $OUT.html)"
else
echo "DIAGRAM_HTML_ONLY: $OUT.html — open it in a browser (no shim for PNG)"
fi
Show the PNG path (and the HTML). If the chain reported an error, the Mermaid likely has a syntax issue — fix the source and re-render.
{{include lib/snippets/capture-learnings.md}}