Explore Claude Code
LukeRenton/explore-claude-codeСимулятор проекта Claude Code для изучения команд, MCP, скиллов, CLAUDE.md и хуков. Каждый файл — реальная концепция с аннотациями и примерами для копирования в свои проекты.
Установка
git clone https://github.com/LukeRenton/explore-claude-code.gitREADME
Симулированный проект Claude Code, по которому можно кликать. Каждый файл и папка в боковой панели — реальная концепция Claude Code: та же директория .claude/, конфигурационные файлы и структура, которую вы найдёте в настоящем репозитории. Нажмите на любой файл, чтобы узнать, что он делает, как его настроить, и увидеть аннотированные примеры, которые можно скопировать в свои проекты.
📚 Что вы изучите
| Папка / Файл | Возможность |
|---|---|
CLAUDE.md | Память проекта, сохраняющаяся между сессиями |
.claude/settings.json | Разрешения, доступ к инструментам и ограничения |
.claude/rules/ | Контекстные соглашения для конкретных типов файлов |
.claude/commands/ | Пользовательские слэш-команды для сохранённых рабочих процессов |
.claude/skills/ | Папки знаний, которые Claude загружает автономно |
.claude/agents/ | Субагенты для специализированных делегированных задач |
.claude/hooks/ | Shell-скрипты, запускаемые на событиях жизненного цикла Claude |
.claude/plugins/ | Расширение Claude пользовательскими инструментами и ресурсами |
.mcp.json | Конфигурация MCP-сервера для интеграции внешних инструментов |
src/ | Пример исходного кода рядом с реальными конфигами |
| built-in/ | Возможности, поставляемые с Claude Code (настройка не требуется) |
built-in/bundled-skills/ | /simplify, /batch, /debug, /loop, /claude-api |
Проводник разделён на два раздела. Всё, что находится в .claude/, — это конфигурация проекта, которую вы создаёте и коммитите. Всё, что находится в built-in/, — это возможности, поставляемые с Claude Code из коробки, без какой-либо настройки. Два раздела разделены визуальным разделителем.
Каждый фрагмент контента написан так, как будто это реальный конфигурационный файл в реальном репозитории. Вы не читаете о конфиге — вы читаете сам конфиг, аннотированный так, чтобы вы понимали каждую строку. Когда вы закончите изучение, можно скопировать структуру прямо в свои проекты.
🚀 Попробовать
Самый быстрый способ начать — живой сайт:
Никакой установки, регистрации и шагов сборки. Просто откройте и начните кликать.
Если хотите запустить локально, клонируйте репозиторий и укажите любой статический сервер на директорию site/:
git clone https://github.com/LukeRenton/explore-claude-code.git
cd explore-claude-code
npx serve site
# или
python -m http.server -d site 8080
# или просто откройте site/index.html напрямую в браузере🏗️ Структура проекта
Весь сайт — это статический HTML, CSS и vanilla JavaScript. Никаких шагов сборки, фреймворков и бандлеров.
explore-claude-code/
├── site/
│ ├── index.html # Точка входа одностраничного приложения
│ ├── data/
│ │ └── manifest.json # Управляет всем UI (дерево, контент, бейджи, фичи)
│ ├── content/ # Исходные markdown и конфигурационные файлы
│ ├── js/
│ │ ├── app.js # Главный контроллер, маршрутизация, навигация с клавиатуры
│ │ ├── file-explorer.js # Дерево боковой панели с анимированными canvas-коннекторами
│ │ ├── content-loader.js # Парсер и рендерер markdown
│ │ ├── terminal.js # Интерактивная панель терминала
│ │ ├── progress.js # Отслеживание прогресса (localStorage)
│ │ └── icons.js # Библиотека SVG-иконок ручной работы
│ └── css/ # Переменные, разметка, компоненты, синтаксис, терминал
├── logo.png
└── README.md
Весь образовательный контент хранится в site/data/manifest.json, а исходные файлы — в site/content/. Манифест является единственным источником истины для структуры дерева, бейджей, группировок функций и ссылок на контент. Чтобы добавить или изменить контент, нужно идти именно туда.
🤝 Участие в разработке
Вклад приветствуется! Вот области, где помощь была бы особенно полезна:
- Контент для новых возможностей Claude Code по мере их выхода
- Доступность (навигация с клавиатуры, скринридеры, ARIA)
- Мобильный опыт
- Переводы на другие языки
Если хотите добавить или обновить образовательный контент, обратите внимание на два места:
site/data/manifest.json— структура дерева и метаданныеsite/content/— сами markdown и конфигурационные файлы
Открывайте issue, если есть идеи или вы заметили что-то, что можно улучшить.
⭐ Поддержка
Если проект оказался полезным, поставьте звезду! Это помогает другим найти его.