LukeRenton/explore-claude-code

What it solves

Claude Code comes with many configuration files, folders, and built-in features, but learning what each one does usually means reading scattered documentation or digging into a real project. This project turns that learning into a clickable replica of an actual Claude Code repository, so you can see every file where it would live, read annotated real-world config examples, and understand each concept in context.

How it works

The site is a single-page static app built with plain HTML, CSS, and vanilla JavaScript — zero dependencies, frameworks, or build steps. A file-explorer sidebar shows a tree of files and folders exactly like a real repo, split into two sections: everything under .claude/ (project config you create and commit) and everything under built-in/ (features that ship with Claude Code out of the box).

Click any file to see its actual content, written as if it were a real config file, with inline annotations explaining every line.So you're not just reading about the config — you're reading the config itself and learning how to set it up. The whole UI is driven by a single manifest.json file that holds the tree structure, content references, and badges; the source content lives as markdown and config files in a content/ folder.

Navigation features include a quick-search palette (Ctrl/Cmd + K) to jump to any entry, light and dark themes that remember your choice, deep links that let you share any page, arrow-key navigation through entries, and an interactive terminal panel that emulates slash commands like /help, /init, and /doctor. You can also track which features you've explored via a completion tracker stored in the browser.

Who it's for

Anyone learning Claude Code, from beginners wanting to know what .claude/ actually does to experienced users who want annotated examples they can copy directly into their own projects. It's also useful for developers who want to see how concepts like permissions, commands, skills, agents, hooks, and MCP servers fit together in a real repo layout.

Highlights

• Every file and folder in the sidebar is a real Claude Code concept — CLAUDE.md, .claude/settings.json, .claude/rules/, .claude/commands/, .claude/skills/, .claude/agents/, .claude/hooks/, .claude/plugins/, .claude/mods/, .mcp.json, and more.
• Built-in features are separated visually, with entries for bundled skills like /simplify, /batch, /code-review, /run, and /plugin-authoring.
• Content is written as annotated real config files, so you can copy the scaffolding directly into your own projects.
• Live at exploreclaudecode.com with no install, signup, or build step; also runs locally from any static server.
• Clean, hand-crafted architecture — a manifest file drives the entire UI, making it easy to add or update content.
• Contributions welcome for new feature content, accessibility, mobile refinements, and translations.