draw-json-architecture-skill

A skill that explains any code architecture as an interactive viewer — Graph + JSON + HTML, 100% driven by JSON — and saves the self-contained .html to your repo's root architecture/ folder.

Installation

   

• Define a flow — name the path you want explained, e.g. onboarding to home or home to order placement. The skill walks that flow stop by stop.
• Define the lenses — tell it which lenses each stop is viewed through, e.g. ui, api, database (also auth, cache, queue, llm, …), and pick a color for each so the diagram paints every stop in its lens color.
• Get the viewer — the skill generates a self-contained <flow>.html Architecture Viewer (Graph + JSON + HTML panels) driven entirely by JSON, then verifies links, claims, and the generated artifacts before delivery.

Claude

/draw-json-architecture <flow>

Codex

$draw-json-architecture <flow>

Wireframe

Architecture home-to-order.html

Architecture of sample-app flow from home to order placement screen drawn using draw-json-architecture skill.

Changelog

Date	Changes	Version
Jun 1, 2026	Added draw-json-architecture	v1.0.0

Other Repos

Claude Code Best Practice

Codex CLI Best Practice

Gemini CLI Best Practice

Claude Code Hooks

Codex CLI Hooks

Gemini CLI Hooks