Brickwise
A Claude Code skill that explains a codebase or any topic as an interactive 3D brick model. Brick size shows complexity.
Every concept is a brick, related concepts form a sub-assembly, and a brick’s size is its complexity. The output is one self-contained HTML page of about 40 KB.
Live demos
Drag to orbit, press E to explode, click a brick to read it.
Theory of Relativity (stack)
Web Request Lifecycle (themed: a train)
Brickwise Internals (the repo explaining itself)
Controls
| Action | Input |
|---|---|
| Orbit, zoom, pan | drag, scroll, right-drag |
| Pull groups apart | E or Explode |
| Take one group apart | click it while exploded |
| Read a brick | hover for the title, click for the explanation |
| Back | Esc |
Pipeline
target -> Claude -> JSON spec -> validator -> fixed three.js viewer -> one HTML page- Claude writes only a spec, never 3D code.
- The validator rejects overlaps, floating bricks, sizes that don’t match complexity, and unknown fields, and returns every error in one pass.
- Stack: Python 3.10+ standard library, three.js 0.160, pytest, headless-Chrome smoke test, GitHub Actions.
Install
/plugin marketplace add JCPetrelli/brickwise
/plugin install brickwise@brickwise
