architecture-viz-studio

80 / 100 · Low risk

Fine to try.

By bmad-labs/skills (GitHub) · design · 19 stars · scanned at commit c636fe5

Use when the user wants to visualize, present, "show", animate, or build an interactive web page for a software architecture, system design, technical concept, data model, pipeline, or product story — phrases like "intro page", "architecture visualization", "interactive diagram", "scrollytelling", "3D system map", "ERD page", "design walkthrough", "make our architecture look impressive", or "present this design to stakeholders". Also use before hand-rolling Three.js, GSAP or SVG architecture di…

Works with any agent that supports SKILL.md skills.

What this skill can do

Downloads and installs other software

The author does not mention this.

Found in 6 places.

skills/architecture-viz-studio/SKILL.md, line 130(Scripts need Playwright: `npm i -D @playwright/test axe-core pngjs && npx playwright install chromium`.)
skills/architecture-viz-studio/SKILL.md, line 262its `node_modules`. Install once: `npm i -D @playwright/test axe-core pngjs && npx playwright install chromium`.
skills/architecture-viz-studio/references/gotchas-and-lessons.md, line 262`npx playwright install` provides), not the bare `playwright` package.

Show 3 more

skills/architecture-viz-studio/scripts/slop-lint.mjs, line 24Requires Playwright (npm i -D @playwright/test; npx playwright install chromium).
skills/architecture-viz-studio/scripts/text-audit.mjs, line 17Requires Playwright (npm i -D @playwright/test && npx playwright install chromium).
skills/architecture-viz-studio/scripts/verify.mjs, line 38Requires Playwright: npm i -D @playwright/test && npx playwright install chromium

Connects to the internet

The author does not mention this.

Found in 3 places.

skills/architecture-viz-studio/assets/edit-mode/edit-mode.js, line 993fetch(state.bridge + '/feedback', {
skills/architecture-viz-studio/scripts/bundle-standalone.mjs, line 55const r = await fetch(url);
skills/architecture-viz-studio/scripts/gen-viz-manifest.mjs, line 30fetch('viz-manifest.json') → EditMode.init({ manifest })

Install

Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.

if [ -e ~/.agents/skills/'architecture-viz-studio' ] || [ -L ~/.agents/skills/'architecture-viz-studio' ]; then echo 'A skill folder named architecture-viz-studio already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/bmad-labs/skills' "$d" && git -C "$d" checkout --quiet 'c636fe5b40f0f6a5fb1fd3a14e7735bd2428eef5' -- 'skills/architecture-viz-studio' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/architecture-viz-studio' ~/.agents/skills/'architecture-viz-studio' && rm -rf "$d"; fi

Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'architecture-viz-studio' ~/.claude/skills/'architecture-viz-studio' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.

Badge for your README

The badge for bmad-labs/skills shows the score of its lowest-scoring skill.

SkillTrust badge for bmad-labs/skills

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/bmad-labs/skills.svg)](https://zalavijaysinh.github.io/skilltrust/repos/bmad-labs/skills/)

Score history

Date	Version	Score
2026-11-11	`c636fe5`	80
2026-11-08	`c965156`	80