The Problem

Claude Code's configuration system (.claude/ directories, CLAUDE.md, MCP servers, skills, agents, hooks) is powerful but poorly documented for newcomers. The official docs are reference material, not interactive examples. New users struggle to understand how these files fit together in a real project because there's no working scaffold to explore.

What This Does

explore-claude-code is a static, interactive documentation site. It presents a simulated Claude Code project—complete with .claude/ config files, CLAUDE.md, .mcp.json, and built-in features—as a clickable file tree. Each file contains annotated, real-world config examples you can copy into your own projects.

The site is zero-dependency vanilla JavaScript. The entire UI is driven by site/data/manifest.json, which defines the file tree, content paths, and metadata. Content lives as Markdown in site/content/; a custom parser in site/js/content-loader.js renders it. The fork adds a second content section covering built-in Claude Code features (bundled skills, CLI flags, keyboard shortcuts, modes) that ship without setup.

How It Is Wired

The static analysis shows 9 code files with no import edges between them—the modules are loaded as plain <script> tags, not ES modules. There is no internal call graph to trace.

Execution starts at site/index.html. It loads site/js/app.js, which acts as the main controller handling routing, keyboard navigation, and the terminal panel. app.js references the other modules directly: file-explorer.js renders the sidebar tree, content-loader.js parses Markdown and renders HTML, progress.js tracks user exploration, and terminal.js provides an interactive terminal simulation.

site/content/src/index.ts is a single TypeScript file, likely an example source file displayed in the explorer rather than part of the site's runtime. The site itself has no build step—npx serve site or python -m http.server -d site 8080 serves it directly.

How To Use It

Setup: None required. Clone and serve:

git clone https://github.com/moses-y/explore-claude-code.git
cd explore-claude-code
npx serve site

Configuration: No environment variables or API keys. The content is static Markdown.

Running it: Open the served URL. The live demo is at exploreclaudecode.com.

Real-World Use

A developer new to Claude Code clones this repo, opens the site, and clicks through .claude/skills/my-skill/SKILL.md to understand the YAML frontmatter and structure. They copy the scaffold into their own project, then reference site/content/.mcp.json to configure their MCP servers. The built-in section teaches them /simplify, /debug, and other commands they didn't know existed.

Code Health & Issues

Static analysis of the 9 code files found: 7 internal modules, 0 import edges, 0 circular dependencies. All modules have instability 0 (no imports in or out). This is consistent with a no-build vanilla JS architecture—simple, but it means no module bundling, tree-shaking, or type checking.

  • Medium - No CI/CD pipeline - No .github/workflows/ or CI config. No automated build or test gate; regressions would go undetected.
  • Low - 2 test files - Tests exist but there's no test runner config (package.json with test script is absent), so they likely require manual invocation.
  • Low - No lockfile - No package.json or lockfile, consistent with zero dependencies, but also means no pinned tooling versions.

The Bottom Line

This is a well-executed educational tool, not a production codebase. The zero-dependency static approach fits the use case perfectly—no build step means the content is instantly editable and deployable. The lack of CI and structured testing is acceptable for a documentation site. Anyone learning Claude Code or onboarding a team to it should use this as a hands-on reference.