# Section 7 — Skills

## What this section does

1. **Read** a real community Skill — HyperFrames, from HeyGen — already pre-installed at `.claude/skills/hyperframes/SKILL.md` inside this section folder.
2. **Use** it on the 20 course-slide screenshots in `inputs/slide-screenshots/` to render a short course trailer.
3. **Compare** how `description` triggers and project-scoped install make Claude pick the right Skill automatically.

You will not author a `SKILL.md` from scratch in this section. Reading a well-built community Skill teaches the anatomy faster than writing a toy one.

## Launch Claude Code from this section folder

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

Skills only auto-discover from `<cwd>/.claude/skills/`, so you must launch from inside `07-skills/` for the Skill to be found.

## Prerequisites

- **Node.js ≥ 22** — only needed if you want to run the optional MP4 render step. Check with `node --version`.

```text
07-skills/                            ← launch claude from here
  .claude/
    skills/
      hyperframes/                    ← pre-installed; Claude Code auto-discovers it
        SKILL.md
      hyperframes-cli/                ← companion skills installed alongside
      hyperframes-media/
      hyperframes-registry/
      folder-graph/                   ← used by the bonus track
      lottie/  gsap/  tailwind/  three/  ...
  installed-skill-reference.md        ← read this; describes what to look for in SKILL.md
  outputs/
    course-trailer/                   ← the rendered MP4 + composition.html land here
  inputs/
    BRIEF.md                        ← creative brief for the trailer
    raw-message.txt                   ← the natural-language ask
    composition-reference.html        ← a minimal HyperFrames composition (reference only)
    hyperframes-quickstart.md         ← CLI cheat-sheet
    slide-screenshots/                ← 20 course-journey screenshots (00-cover.jpg → 19-part10-final.png)
```

---

## Optional — Re-run the published install command

> The workshop already ships the Skill pre-installed, so you can skip this. Run it only if you want to see the install-from-registry flow live.

```bash
npx skills add heygen-com/hyperframes
```

Run from inside `07-skills/`. This is the command that produced the `.claude/skills/hyperframes/` directory you already have. Running it again is a no-op refresh. If `npx` cannot find the package, check `node --version` is ≥ 22 and retry.

---


## Prompt — Use the Skill to make a course trailer

```text
Use the HyperFrames Skill to make an 8-second course trailer from the 20
slide screenshots in inputs/slide-screenshots/. The images are
named in course-order (00-cover → 19-part10-final).

Brief:
- Length: ~8 seconds.
- Pace: build energy across the course journey (cover → fundamentals → workflows → finale).
- Final frame: overlay the tagline "Claude Code Zero to Hero · 2026".
- Resolution: 1920x1080.
- Do not embed any music; leave audio for the optional render step.
```
---

## If it goes wrong

| Problem | Fix |
| --- | --- |
| 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 HyperFrames by name in the prompt, or quote its `description` trigger to make Claude load it. |
| Want to re-run the published install | `npx skills add heygen-com/hyperframes` from inside `07-skills/`. Requires `node --version` ≥ 22. |
| `npx hyperframes render` fails | Run `npx hyperframes preview` first; the browser console often shows the bad image path or timing error. |
| No time for the render step | The `composition.html` alone still counts as a complete Section 7 deliverable. |
