# Section 7 — Skills · Bonus Track: folder-graph

> Optional second exercise. Do this after you finish the main HyperFrames track in `INSTRUCTIONS.md`, or if you'd rather work with a smaller, purely-local Skill.

## What this section does

1. **Inspect** a pre-installed local Skill — `folder-graph` — that ships inside this section at `.claude/skills/folder-graph/`.
2. **Use** it to render the whole workspace (`..`) as an Obsidian-style D3 graph.
3. **Read** the Skill's `SKILL.md` and compare its `description` shape to the HyperFrames one.

Where HyperFrames teaches "install a published community Skill via `npx`", folder-graph teaches the other end of the spectrum: a Skill that ships inside the section folder and is discoverable the moment Claude Code launches in that directory. Same anatomy, different distribution channel.

## Launch Claude Code from this section folder

```bash
cd 07-skills
claude
```

Same launch position as the main HyperFrames track — both Skills live in `07-skills/.claude/skills/`.

## Prerequisites

- **Node.js ≥ 18.3** (same Node you set up for HyperFrames is plenty).

```text
07-skills/                              ← launch claude from here
  .claude/
    skills/
      folder-graph/                     ← already installed; Claude Code auto-discovers it
        SKILL.md
        scripts/build_graph.mjs         ← the actual graph builder
        assets/graph.template.html      ← the D3 HTML template
      hyperframes/                      ← installed alongside (main track)
      ...
  outputs/
    folder-graph.html                   ← your generated graph lands here
```

---

## Prompt 1 — Read the pre-installed Skill

Paste this into Claude Code:

```text
A local Skill is pre-installed at .claude/skills/folder-graph/SKILL.md.

Read it, then tell me:
1. What is the exact description line? Is it specific enough that you would
   reach for this Skill instead of a one-off prompt?
2. Compare it to the HyperFrames description. Which one is easier to trigger,
   and why?
3. What does the Skill produce, and where does it write the output?

Do not run the Skill yet. Just read it and explain it back to me.
```

---

## Prompt 2 — Use the Skill to graph the workspace

```text
Use the folder-graph Skill to render the whole course workspace as an Obsidian-style graph.

- Target folder: the parent directory (..) — i.e. the workspace root
- Output: outputs/folder-graph.html
- Use the Skill's default ignore list so .git, node_modules, .claude, etc. are skipped

After it runs, tell me:
- How many nodes and links the graph has.
- The single command you ran (so I can re-run it on a different folder later).
```

Expected: a single self-contained HTML file at `outputs/folder-graph.html`. Open it:

```bash
open outputs/folder-graph.html
```

You should see a force-directed graph with the workspace root in the middle, each section folder branching off, and individual files at the leaves. Hover for filenames; type in the search box to filter; click a node to highlight its neighbors.

---

## If it goes wrong

| Problem | Fix |
| --- | --- |
| `node --version` is below 18.3 | Reinstall Node 22 LTS (same version HyperFrames needs) and retry. |
| Claude says it can't find the Skill | Confirm you launched `claude` from inside `07-skills/`. Skills auto-discover from `<cwd>/.claude/skills/` only. |
| Skill is there but Claude doesn't use it | Mention `folder-graph` by name in the prompt, or quote its `description` line, to force Claude to load it. |
| Graph file is huge / slow to open | Pass `--max-files 1000` or add `--ignore <dirname>` for noisy folders. |
| Output landed inside the scanned folder | The Skill already excludes its own output file from the walk. Delete the previous HTML first if you want a fully clean re-run. |

---

## Why this is a good second exercise

- **Pre-installed = zero setup friction.** `cd` into the section, launch Claude Code, the Skill is there. Contrasts cleanly with the HyperFrames `npx` flow.
- **Small, readable Skill.** ~200 lines of Node + ~400 lines of D3/HTML — students can read the whole thing in 10 minutes.
- **Same SKILL.md shape as HyperFrames.** Reinforces the anatomy without piling on new concepts.
- **The artifact is the workspace.** The graph is literally a picture of the folder they've been working in for the whole course.
