Two files, one repository
LukeRenton/explore-claude-code ships 2 formats across 3 indexed files. The question worth asking is whether the second one says anything the first does not.
CompareCLAUDE.md ↔ AGENTS.md
| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 10 | 7 | 0% |
| Commands | 0 | 0 | 3 | 0% |
| Section tags | 1 | 1 | 1 | 33% |
What each file covers
Sections
0 shared · 10 only in A · 7 only in B- − Agents
- − Quick Start
- − How Subagents Work
- − Where Agents Live
- − Built-in Subagents
- − Frontmatter Reference
- − Agent Teams
- − Subagents vs Agent Teams
- − Common Patterns
- − Tips
- + CLAUDE.md
- + What This Is
- + Serving Locally
- + Any static server, pointed at the site/ directory
- + Architecture
- + Critical Invariants
- + Content Design Principles
Commands
0 shared · 0 only in A · 3 only in B- + npx serve site
- + python -m http.server -d site 8080
- + node.label
Section tags
1 shared · 1 only in A · 1 only in B- − code-style
- + architecture
- agent-behaviour
Line diff
LukeRenton/explore-claude-code · site/content/.claude/agents/AGENTS.md
@@ −1 @@
1# Agents
2
3Agents are isolated Claude instances you create and configure for specialised tasks. They come in two forms: [subagents](^Focused workers that run inside your session, do a job, and return a summary) that operate within your session, and [agent teams](^Multiple independent Claude Code sessions coordinating through a shared task list) that coordinate across separate sessions.
4
5## Quick Start
6
71. Run `/agents` inside Claude Code to open the interactive agent manager
82. Select **Create new agent**, then choose a scope (project or user)
93. Use **Generate with Claude** and describe what the agent should do
104. Select which tools the agent can access, pick a model, and save
11
12Your agent is available immediately. Try it: "Use the my-agent agent to review this module."
13
14## How Subagents Work
15
16Subagents are `.md` files with YAML frontmatter for configuration and a Markdown body that becomes the system prompt. Each subagent runs in its own context window, uses only the tools you allow, and returns a summary to your main conversation.
17
181. Claude matches your request to a subagent's `description` field
192. A new context window is created with the subagent's system prompt
203. The subagent works independently (reading files, running commands, etc.)
214. Results are summarised back to your main conversation
22
23Subagents can run in the foreground (blocking) or background (concurrent). Press `Ctrl+B` to send a running task to the background.
24
25## Where Agents Live
26
27| Location | Scope | Priority |
28|----------|-------|----------|
29| `--agents` CLI flag | Current session only | 1 (highest) |
30| `.claude/agents/` | This project (check into version control) | 2 |
31| `~/.claude/agents/` | All your projects | 3 |
32| Plugin `agents/` directory | Where the plugin is enabled | 4 (lowest) |
33
34When multiple agents share the same name, the higher-priority location wins.
35
36## Built-in Subagents
37
38Claude Code ships with subagents it uses automatically:
39
40- **Explore**: fast, read-only codebase search (runs on Haiku)
41- **Plan**: structured planning and analysis
42- **General-purpose**: flexible helper for miscellaneous delegation
43
44You can create custom agents that override built-ins by using the same name at a higher priority scope.
45
46## Frontmatter Reference
47
48| Field | Required | Purpose |
49|-------|----------|---------|
50| `name` | Yes | Unique identifier (lowercase, hyphens) |
51| `description` | Yes | When Claude should delegate to this agent |
52| `tools` | No | Allowlist of tools (inherits all if omitted) |
53| `disallowedTools` | No | Denylist removed from inherited tools |
54| `model` | No | `sonnet`, `opus`, `haiku`, or `inherit` (default) |
55| `permissionMode` | No | `default`, `acceptEdits`, `dontAsk`, `bypassPermissions`, `plan` |
56| `maxTurns` | No | Maximum agentic turns before the agent stops |
57| `skills` | No | Skills to inject into the agent's context at startup |
58| `mcpServers` | No | MCP servers available to this agent |
59| `hooks` | No | Lifecycle hooks scoped to this agent |
60| `memory` | No | Persistent memory scope: `user`, `project`, or `local` |
61| `background` | No | Set `true` to always run as a background task |
62| `isolation` | No | Set `worktree` to run in a temporary git worktree |
63
64## Agent Teams
65
66Agent teams coordinate multiple independent Claude Code sessions working in parallel. One session acts as the lead; others are teammates with their own context windows.
67
68Agent teams are experimental. Enable them in `settings.json`:
69
70```json
71{
72 "env": {
73 "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
74 }
75}
76```
77
78Then describe the team structure in natural language:
79
80```
81Create an agent team to review PR #142. Spawn three reviewers:
82one focused on security, one checking performance, one validating tests.
83```
84
85### Subagents vs Agent Teams
86
87| | Subagents | Agent Teams |
88|---|-----------|-------------|
89| Communication | Report results back to caller only | Teammates message each other directly |
90| Context | Own window; results return to main session | Own window; fully independent |
91| Coordination | Main agent manages all work | Shared task list with self-coordination |
92| Best for | Focused tasks where only the result matters | Complex work requiring discussion |
93| Token cost | Lower (results summarised back) | Higher (each teammate is a separate instance) |
94
95Use subagents for quick, focused workers. Use agent teams when teammates need to share findings and coordinate on their own.
96
97## Common Patterns
98
99- **Isolate verbose output**: delegate test runs or log analysis to a subagent so the output stays out of your main context
100- **Parallel research**: spawn multiple subagents to investigate different parts of a codebase simultaneously
101- **Chain subagents**: use one for analysis, pass its findings to another for implementation
102- **Competing hypotheses**: spawn agent team members to investigate different theories and debate each other
103
104## Tips
105
106- Write detailed `description` fields so Claude knows when to delegate. Include "use proactively" for agents you want used automatically
107- Grant only the tools an agent needs. A read-only reviewer should not have Write or Edit
108- Subagents cannot spawn other subagents. For nested delegation, use skills or chain from the main conversation
109- Use `memory: user` to let agents build knowledge across sessions. Ask them to "check your memory" before starting and "save what you learned" after finishing
110- Agent teams work best with 3-5 teammates and 5-6 tasks each. More teammates means more coordination overhead
111- Teammates load `CLAUDE.md` from the working directory, so project conventions apply to the whole team
LukeRenton/explore-claude-code · CLAUDE.md
@@ +1 @@
1# CLAUDE.md
2
3This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4
5## What This Is
6
7An 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.
8
9## Serving Locally
10
11```bash
12# Any static server, pointed at the site/ directory
13npx serve site
14python -m http.server -d site 8080
15```
16
17Opening `site/index.html` directly also works (fetches manifest via relative path).
18
19## Architecture
20
21All educational content is stored as JSON strings inside `site/data/manifest.json`. This single file drives the entire UI — tree structure, file content, labels, badges, and feature groupings. To add or change content, edit the manifest.
22
23**Component classes (all vanilla JS, no modules, loaded via `<script>` tags):**
24
25- `App` (app.js) — Controller. Loads manifest, wires components, handles keyboard nav (arrow keys), hash routing, traffic light buttons, and the void easter egg (minimize button → canvas particle animation).
26- `FileExplorer` (file-explorer.js) — Sidebar tree. Draws connector lines (├── └──) on `<canvas>` elements inside `.tree-children-guided` containers. `.claude` is auto-expanded on load.
27- `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.
28- `Terminal` (terminal.js) — Right-side panel. Interactive slash command emulator (`/help`, `/init`, `/doctor`, `/diff`, `/compact`, `/model`, `/cost`, `/status`, `/config`, `/memory`). Animated output sequences.
29- `ProgressTracker` (progress.js) — Tracks visited features in localStorage under key `tcc-progress`.
30
31**CSS is split by concern:** `variables.css` (design tokens), `layout.css` (shell/sidebar/content grid), `components.css` (tree items, badges, content panels, frontmatter), `syntax.css` (Prism overrides), `terminal.css`, `void.css` (easter egg).
32
33## Critical Invariants
34
35**Canvas DPI scaling:** `_createCanvas()` in file-explorer.js already calls `ctx.scale(dpr, dpr)`. Callers must never scale the context again or tree connector lines will misalign on high-DPI displays (coordinates get multiplied by dpr²).
36
37**Static tree line timing:** The `.claude` directory is auto-expanded on load. `_drawStaticLines` uses double `requestAnimationFrame` to ensure the browser has completed layout before measuring `offsetTop`/`getBoundingClientRect`. If the zero-dimension guard triggers, it retries on the next frame.
38
39**Frontmatter handling:** The markdown renderer detects `---` fenced blocks at the start of content and renders them as styled tables. Without this, `---` becomes `<hr>` and YAML `#` comments render as headings.
40
41**Manifest node schema:** Each tree node has `name`, `path`, `type` ("file"|"directory"|"separator"). Files can have: `content` (markdown/code string), `feature` (groups related files), `badge`, `label`, `description`, `command`. Directories have `children` array. Separator nodes have only `type: "separator"` and render as a dashed divider line.
42
43**Content title priority:** The content loader displays `node.label` first, then falls back to the feature title, then the file name. This matters for the built-in section where multiple files share a feature but need distinct titles (e.g., each bundled skill shows its `/command` name, not "Bundled Skills").
44
45**Related files for built-in section:** Files under `built-in/` only link back to overview files (e.g., `BUNDLED-SKILLS.md`), not to every sibling sharing the same feature. This is filtered in `content-loader.js`.
46
47**Code block first-line indent bug:** The global `code` styles (padding, background, border) were inherited by `<code>` inside `.md-code-block`, causing a visible indent on the first line of rendered code blocks. Fixed by resetting `<code>` inside `.md-code-block` to `padding: 0; background: none; border: none`.
48
49**Content file line endings:** Always use Unix (LF) line endings for content files in `site/content/`. Windows CRLF can cause rendering issues in code blocks even though the markdown renderer normalises line endings.
50
51## Content Design Principles
52
53- Content should feel like exploring a real repo — self-describing boilerplate that explains itself
54- Concise overview for scanning, with depth available for those who want it
55- Each `.claude/` subfolder has a grounding entry-point file (e.g., `SKILLS.md`) outside the scaffolding, then the scaffolding demonstrates the actual structure
56- The `built-in/` section covers features that ship with Claude Code and require no setup. A visual separator (dashed line) divides it from the `.claude/` project config above. Each built-in category gets an overview file and individual entries in subdirectories
57- Avoid em-dashes in content. Use commas, periods, or colons instead
@@ −1 +1 @@
1−# Agents
1+# CLAUDE.md
22
3−Agents are isolated Claude instances you create and configure for specialised tasks. They come in two forms: [subagents](^Focused workers that run inside your session, do a job, and return a summary) that operate within your session, and [agent teams](^Multiple independent Claude Code sessions coordinating through a shared task list) that coordinate across separate sessions.
3+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
44
5−## Quick Start
5+## What This Is
66
7−1. Run `/agents` inside Claude Code to open the interactive agent manager
8−2. Select **Create new agent**, then choose a scope (project or user)
9−3. Use **Generate with Claude** and describe what the agent should do
10−4. Select which tools the agent can access, pick a model, and save
7+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.
118
12−Your agent is available immediately. Try it: "Use the my-agent agent to review this module."
9+## Serving Locally
1310
14−## How Subagents Work
11+```bash
12+# Any static server, pointed at the site/ directory
13+npx serve site
14+python -m http.server -d site 8080
15+```
1516
16−Subagents are `.md` files with YAML frontmatter for configuration and a Markdown body that becomes the system prompt. Each subagent runs in its own context window, uses only the tools you allow, and returns a summary to your main conversation.
17+Opening `site/index.html` directly also works (fetches manifest via relative path).
1718
18−1. Claude matches your request to a subagent's `description` field
19−2. A new context window is created with the subagent's system prompt
20−3. The subagent works independently (reading files, running commands, etc.)
21−4. Results are summarised back to your main conversation
19+## Architecture
2220
23−Subagents can run in the foreground (blocking) or background (concurrent). Press `Ctrl+B` to send a running task to the background.
21+All educational content is stored as JSON strings inside `site/data/manifest.json`. This single file drives the entire UI — tree structure, file content, labels, badges, and feature groupings. To add or change content, edit the manifest.
2422
25−## Where Agents Live
23+**Component classes (all vanilla JS, no modules, loaded via `<script>` tags):**
2624
27−| Location | Scope | Priority |
28−|----------|-------|----------|
29−| `--agents` CLI flag | Current session only | 1 (highest) |
30−| `.claude/agents/` | This project (check into version control) | 2 |
31−| `~/.claude/agents/` | All your projects | 3 |
32−| Plugin `agents/` directory | Where the plugin is enabled | 4 (lowest) |
25+- `App` (app.js) — Controller. Loads manifest, wires components, handles keyboard nav (arrow keys), hash routing, traffic light buttons, and the void easter egg (minimize button → canvas particle animation).
26+- `FileExplorer` (file-explorer.js) — Sidebar tree. Draws connector lines (├── └──) on `<canvas>` elements inside `.tree-children-guided` containers. `.claude` is auto-expanded on load.
27+- `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.
28+- `Terminal` (terminal.js) — Right-side panel. Interactive slash command emulator (`/help`, `/init`, `/doctor`, `/diff`, `/compact`, `/model`, `/cost`, `/status`, `/config`, `/memory`). Animated output sequences.
29+- `ProgressTracker` (progress.js) — Tracks visited features in localStorage under key `tcc-progress`.
3330
34−When multiple agents share the same name, the higher-priority location wins.
31+**CSS is split by concern:** `variables.css` (design tokens), `layout.css` (shell/sidebar/content grid), `components.css` (tree items, badges, content panels, frontmatter), `syntax.css` (Prism overrides), `terminal.css`, `void.css` (easter egg).
3532
36−## Built-in Subagents
33+## Critical Invariants
3734
38−Claude Code ships with subagents it uses automatically:
35+**Canvas DPI scaling:** `_createCanvas()` in file-explorer.js already calls `ctx.scale(dpr, dpr)`. Callers must never scale the context again or tree connector lines will misalign on high-DPI displays (coordinates get multiplied by dpr²).
3936
40−- **Explore**: fast, read-only codebase search (runs on Haiku)
41−- **Plan**: structured planning and analysis
42−- **General-purpose**: flexible helper for miscellaneous delegation
37+**Static tree line timing:** The `.claude` directory is auto-expanded on load. `_drawStaticLines` uses double `requestAnimationFrame` to ensure the browser has completed layout before measuring `offsetTop`/`getBoundingClientRect`. If the zero-dimension guard triggers, it retries on the next frame.
4338
44−You can create custom agents that override built-ins by using the same name at a higher priority scope.
39+**Frontmatter handling:** The markdown renderer detects `---` fenced blocks at the start of content and renders them as styled tables. Without this, `---` becomes `<hr>` and YAML `#` comments render as headings.
4540
46−## Frontmatter Reference
41+**Manifest node schema:** Each tree node has `name`, `path`, `type` ("file"|"directory"|"separator"). Files can have: `content` (markdown/code string), `feature` (groups related files), `badge`, `label`, `description`, `command`. Directories have `children` array. Separator nodes have only `type: "separator"` and render as a dashed divider line.
4742
48−| Field | Required | Purpose |
49−|-------|----------|---------|
50−| `name` | Yes | Unique identifier (lowercase, hyphens) |
51−| `description` | Yes | When Claude should delegate to this agent |
52−| `tools` | No | Allowlist of tools (inherits all if omitted) |
53−| `disallowedTools` | No | Denylist removed from inherited tools |
54−| `model` | No | `sonnet`, `opus`, `haiku`, or `inherit` (default) |
55−| `permissionMode` | No | `default`, `acceptEdits`, `dontAsk`, `bypassPermissions`, `plan` |
56−| `maxTurns` | No | Maximum agentic turns before the agent stops |
57−| `skills` | No | Skills to inject into the agent's context at startup |
58−| `mcpServers` | No | MCP servers available to this agent |
59−| `hooks` | No | Lifecycle hooks scoped to this agent |
60−| `memory` | No | Persistent memory scope: `user`, `project`, or `local` |
61−| `background` | No | Set `true` to always run as a background task |
62−| `isolation` | No | Set `worktree` to run in a temporary git worktree |
43+**Content title priority:** The content loader displays `node.label` first, then falls back to the feature title, then the file name. This matters for the built-in section where multiple files share a feature but need distinct titles (e.g., each bundled skill shows its `/command` name, not "Bundled Skills").
6344
64−## Agent Teams
45+**Related files for built-in section:** Files under `built-in/` only link back to overview files (e.g., `BUNDLED-SKILLS.md`), not to every sibling sharing the same feature. This is filtered in `content-loader.js`.
6546
66−Agent teams coordinate multiple independent Claude Code sessions working in parallel. One session acts as the lead; others are teammates with their own context windows.
47+**Code block first-line indent bug:** The global `code` styles (padding, background, border) were inherited by `<code>` inside `.md-code-block`, causing a visible indent on the first line of rendered code blocks. Fixed by resetting `<code>` inside `.md-code-block` to `padding: 0; background: none; border: none`.
6748
68−Agent teams are experimental. Enable them in `settings.json`:
49+**Content file line endings:** Always use Unix (LF) line endings for content files in `site/content/`. Windows CRLF can cause rendering issues in code blocks even though the markdown renderer normalises line endings.
6950
70−```json
71−{
72− "env": {
73− "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
74− }
75−}
76−```
51+## Content Design Principles
7752
78−Then describe the team structure in natural language:
79−
80−```
81−Create an agent team to review PR #142. Spawn three reviewers:
82−one focused on security, one checking performance, one validating tests.
83−```
84−
85−### Subagents vs Agent Teams
86−
87−| | Subagents | Agent Teams |
88−|---|-----------|-------------|
89−| Communication | Report results back to caller only | Teammates message each other directly |
90−| Context | Own window; results return to main session | Own window; fully independent |
91−| Coordination | Main agent manages all work | Shared task list with self-coordination |
92−| Best for | Focused tasks where only the result matters | Complex work requiring discussion |
93−| Token cost | Lower (results summarised back) | Higher (each teammate is a separate instance) |
94−
95−Use subagents for quick, focused workers. Use agent teams when teammates need to share findings and coordinate on their own.
96−
97−## Common Patterns
98−
99−- **Isolate verbose output**: delegate test runs or log analysis to a subagent so the output stays out of your main context
100−- **Parallel research**: spawn multiple subagents to investigate different parts of a codebase simultaneously
101−- **Chain subagents**: use one for analysis, pass its findings to another for implementation
102−- **Competing hypotheses**: spawn agent team members to investigate different theories and debate each other
103−
104−## Tips
105−
106−- Write detailed `description` fields so Claude knows when to delegate. Include "use proactively" for agents you want used automatically
107−- Grant only the tools an agent needs. A read-only reviewer should not have Write or Edit
108−- Subagents cannot spawn other subagents. For nested delegation, use skills or chain from the main conversation
109−- Use `memory: user` to let agents build knowledge across sessions. Ask them to "check your memory" before starting and "save what you learned" after finishing
110−- Agent teams work best with 3-5 teammates and 5-6 tasks each. More teammates means more coordination overhead
111−- Teammates load `CLAUDE.md` from the working directory, so project conventions apply to the whole team
53+- Content should feel like exploring a real repo — self-describing boilerplate that explains itself
54+- Concise overview for scanning, with depth available for those who want it
55+- Each `.claude/` subfolder has a grounding entry-point file (e.g., `SKILLS.md`) outside the scaffolding, then the scaffolding demonstrates the actual structure
56+- The `built-in/` section covers features that ship with Claude Code and require no setup. A visual separator (dashed line) divides it from the `.claude/` project config above. Each built-in category gets an overview file and individual entries in subdirectories
57+- Avoid em-dashes in content. Use commas, periods, or colons instead
