explore-claude-code: Instructions file for Claude Code

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What This Is

An interactive educational website that teaches Claude Code features by simulating a project you explore. Static HTML/CSS/JS — zero build steps, no framework, no bundler.

Serving Locally

# Any static server, pointed at the site/ directory
npx serve site
python -m http.server -d site 8080

Opening site/index.html directly also works (fetches manifest via relative path).

Architecture

site/data/manifest.json drives the entire UI — tree structure, labels, badges, and feature groupings. Each file node points at its source via contentFile (a path under site/content/). To add or change content, edit the manifest and the matching content file, then run node scripts/validate-content.js.

Component classes (all vanilla JS, no modules, loaded via <script> tags):

• App (app.js) — Controller. Loads manifest, wires components, handles keyboard nav (arrow keys), hash routing, traffic light buttons, the Cmd/Ctrl+K search palette, the light/dark theme toggle, and the void easter egg (minimize button → canvas particle animation).
• FileExplorer (file-explorer.js) — Sidebar tree. Draws connector lines (├── └──) on <canvas> elements inside .tree-children-guided containers. .claude and built-in are auto-expanded on load (expandedDirs).
• ContentLoader (content-loader.js) — Renders file content. Has a hand-rolled markdown parser supporting: YAML frontmatter (rendered as tables), fenced code blocks, tables, lists, inline formatting, and links. Markdown files get a Rendered/Raw toggle. Syntax highlighting via Prism.js, with the language picked from the file extension in _detectLanguage (.mjs maps to JavaScript, .ts/.d.ts to TypeScript); a new extension needs a mapping there and, if not already loaded, a Prism component <script> in index.html. Each page header carries a "Copy link" button that copies a deep link (origin + #path).
• Terminal (terminal.js) — Right-side panel. Interactive slash command emulator (/help, /init, /doctor, /diff, /compact, /model, /cost, /status, /config, /memory). Animated output sequences.
• Search (search.js) — Cmd/Ctrl+K command palette. Fuzzy-matches over a flattened index of every file's title, path, description, and badge (metadata only, not full body text), then jumps to the result via explorer.selectPath. Opens from the title-bar search button or the shortcut.
• ProgressTracker (progress.js) — Tracks visited features in localStorage under key tcc-progress.