Boxbox — Development skill for Claude Code
Generate a beautiful zoomable HTML diagram of this codebase, designed for non-coders.
How to install Boxbox
Installs to ~/.claude/skills/aiunlocked1412-boxbox-boxbox/SKILL.md
mkdir -p ~/.claude/skills/aiunlocked1412-boxbox-boxbox && curl -fsSL https://raw.githubusercontent.com/aiunlocked1412/boxbox/HEAD/commands/boxbox.md -o ~/.claude/skills/aiunlocked1412-boxbox-boxbox/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Boxbox does
description: Generate a beautiful zoomable HTML diagram of this codebase, designed for non-coders argument-hint: "[output-dir] (default: .boxbox)"
/boxbox — Visualize this system
You are running the **BoxBox** plugin. Your job: produce a beautiful, beginner-friendly HTML diagram that explains what this codebase does, written for someone who does **not** know programming (e.g. a vibe-coder, a designer, a founder using AI to build their app).
Audience reminder
The reader is **not
Alternatives in Development
- Cipher — An opensource memory layer specifically designed for coding agents 3.6k ★
- Desloppify — Agent harness to make your slop code well-engineered and beautiful 3k ★
- Diagram 2.3k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Codebase To Course Fork
A Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML course for non-tech
Generate Web Diagram
Generate a beautiful standalone HTML diagram and open it in the browser
Code2Config
A Claude Code skill for turning a codebase to an interactive parameter tuning interface for non-technical vibe
Archflow
Claude Code skill that turns any codebase into an animated HTML architecture diagram
Claude Report Skill
A Claude Code skill that generates beautiful HTML reports instead of long terminal output
Slides Skill
A comprehensive Claude Code skill for generating beautiful HTML presentations using Reveal.js
Related Agents
Boxbox Visualizer
Takes the analyzer's graph.json and renders a beautiful, beginner-friendly self-contained HTML diagram. Used b
Excalidraw Diagram Skill
Skill to give Claude Code (and any coding agent) the ability to generate beautiful and practical Excalidraw di
UI UX Developer
Use when building or modifying UI components, pages, hooks, theme-token usage, styling, layouts, or any visual