LukeRenton/explore-claude-code

<p align="center"> <img src="logo.png" alt="Explore Claude Code" width="360"> </p> <p align="center"> <strong>Learn Claude Code by exploring it.</strong> </p> <p align="center"> <a href="https://exploreclaudecode.com"><img src="https://img.shields.io/badge/live%20demo-exploreclaudecode.com-c47a50?style=flat-square" alt="Live Demo"></a> <a href="https://github.com/LukeRenton/explore-claude-code/blob/main/LICENSE"><img src="https://img.shields.io/github/license/LukeRenton/explore-claude-code?style=flat-square&color=8e82ad" alt="License"></a> <a href="https://github.com/LukeRenton/explore-claude-code/stargazers"><img src="https://img.shields.io/github/stars/LukeRenton/explore-claude-code?style=flat-square&color=b8965e" alt="Stars"></a> <img src="https://img.shields.io/badge/zero%20dependencies-vanilla%20JS-3a3632?style=flat-square" alt="Zero Dependencies"> </p>

---

A simulated Claude Code project you can click through. Every file and folder in the sidebar is a real Claude Code concept — the same .claude/ directory, config files, and scaffolding you'd find in an actual repo. Click any file to learn what it does, how to set it up, and see annotated examples you can copy into your own projects.

<p align="center"> <img src="current.png" alt="Screenshot" width="820"> </p>

📚 What You'll Learn

| Folder / File | Feature | |---|---| | CLAUDE.md | Project memory that persists across sessions | | .claude/settings.json | Permissions, tool access, and guardrails | | .claude/rules/ | Contextual conventions scoped to specific file types | | .claude/commands/ | Custom slash commands for saved workflows | | .claude/skills/ | Knowledge folders Claude loads autonomously | | .claude/agents/ | Subagents for specialised, delegated tasks | | .claude/hooks/ | Shell scripts that run on Claude lifecycle events | | .claude/plugins/ | Extend Claude with custom tools and resources | | .mcp.json | MCP server config for external tool integrations | | `src