Learn Claude Code by exploring it.
______________________________________________________________________
您可以点击浏览一个模拟的Claude Code项目。侧边栏中的每个文件和文件夹都是真正的Claude Code概念——相同 .claude/ 目录、配置文件和脚手架,您可以在实际的仓库中找到。单击任何文件以了解它的功能、如何设置它,并查看可以复制到您自己的项目中的带注释的示例。
📚 你将学到什么
| 文件夹/文件 | 功能 |
|---|---|
CLAUDE.md | 跨会话持续存在的项目内存 |
.claude/settings.json | 权限、工具访问和护栏 |
.claude/rules/ | 特定文件类型的上下文约定 |
.claude/commands/ | 用于保存工作流的自定义斜线命令 |
.claude/skills/ | Claude自主加载知识文件夹 |
.claude/agents/ | 负责专业、委托任务的分代理 |
.claude/hooks/ | 在Claude生命周期事件上运行的Shell脚本 |
.claude/plugins/ | 使用自定义工具和资源扩展Claude |
.mcp.json | 用于外部工具集成的MCP服务器配置 |
src/ | 示例源代码与实际配置放在一起 |
| 内置/ | Claude Code附带的功能(无需设置) |
built-in/bundled-skills/ | /simplify, /batch, /debug, /loop, /claude-api |
探险家分为两部分。一切都在 .claude/ 是您创建和提交的项目配置。一切都在 built-in/ 涵盖了Claude Code开箱即用的功能,无需设置。一个视觉分隔符将两者分开。
每一段内容都被编写成一个真正的repo中的真正配置文件。你没在读 *关于* 配置,你正在阅读 *配置本身*,注释使您理解每一行。当你完成探索后,你可以直接将脚手架复制到你自己的项目中。
🚀 试试看
最快的入门方式是现场直播:
无需安装,无需注册,无需构建步骤。只需打开它并开始点击。
如果你想在本地运行它,克隆仓库并将任何静态服务器指向 site/ 目录:
git clone https://github.com/LukeRenton/explore-claude-code.git
cd explore-claude-code
npx serve site
# or
python -m http.server -d site 8080
# or just open site/index.html directly in your browser🏗️ 项目结构
整个网站是静态HTML、CSS和普通JavaScript。零构建步骤、零框架、零捆绑器。
explore-claude-code/
├── site/
│ ├── index.html # Single-page app entry point
│ ├── data/
│ │ └── manifest.json # Drives the entire UI (tree, content, badges, features)
│ ├── content/ # Source markdown and config files
│ ├── js/
│ │ ├── app.js # Main controller, routing, keyboard nav
│ │ ├── file-explorer.js # Sidebar tree with animated canvas connectors
│ │ ├── content-loader.js # Custom markdown parser and renderer
│ │ ├── terminal.js # Interactive terminal panel
│ │ ├── progress.js # Feature completion tracking (localStorage)
│ │ └── icons.js # Hand-crafted SVG icon library
│ └── css/ # Variables, layout, components, syntax, terminal, void
├── logo.png
└── README.md所有教育内容都存储在 site/data/manifest.json 以及中的源文件 site/content/清单是树结构、徽章、特征分组和内容引用的唯一真实来源。添加或更改内容,这就是你要去的地方。
🤝 贡献
欢迎投稿!以下是一些可以提供帮助的领域:
- 内容 在发货时查看新的Claude Code功能
- 无障碍 改进(键盘导航、屏幕阅读器、ARIA)
- 移动 体验改进
- 翻译 翻译成其他语言
如果你想添加或更新教育内容,有两个地方可以查看:
site/data/manifest.json用于树结构和元数据site/content/用于实际的markdown和配置文件
如果你有想法或发现更好的东西,可以随时打开一个问题。
⭐ 支持
如果你觉得这很有用,可以考虑给它一颗星!它帮助其他人发现项目。
