# Working Notes

## Audience

The audience is yourself — a learner who just finished the Claude Code Zero to Hero workshop. The deliverable is a short "course trailer" you would share on LinkedIn or in a team chat to say "I learned this."

## Creative Brief

- **Length:** ~8 seconds total. With 20 source images that is roughly 0.4 seconds per frame on average — tight punch, montage energy.
- **Resolution:** 1920×1080.
- **Source images:** 20 screenshots from the course slides in `slide-screenshots/`, numbered `00-cover.jpg` through `19-part10-final.png` to match the course's part-by-part journey.
- **Pace:** start slow on the cover, accelerate through the workflow parts, hold the final frame for the tagline.
- **Tagline:** overlay on the final frame: *"Claude Code Zero to Hero · 2026"*.
- **Music:** optional — leave out for the first render to keep the workshop short.

## Tool

The trailer is composed and rendered with **HyperFrames** (`heygen-com/hyperframes`), installed as a Claude Code Skill via:

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

After install, the Skill lives at `.claude/skills/hyperframes/SKILL.md`. Claude reads its `description` and decides when to use it. The actual render still happens through `npx hyperframes`:

- Preview: `npx hyperframes preview` (live reload in browser)
- Render: `npx hyperframes render` (writes an MP4)

Requires Node.js ≥ 22. No global install.

## Field Notes

- HyperFrames timing uses `data-start` and `data-duration` (in seconds) on each element.
- Tracks are layered with `data-track-index`. Lower indices render behind higher ones.
- `<img>`, `<video>`, and `<audio>` are all supported. For this trailer we mostly use `<img>` with an overlay `<div>` for the tagline.

## Reporting Rules

- Language of the `skill-reflection.md` artifact: English.
- Do not embed instructor names or contact details in the trailer.
- Do not claim certification or credentials in the tagline — this is a personal "what I learned" artifact.
- Keep the tagline brief; long text on a sub-second frame is illegible.

## Suggested Output Shape

The Section 7 deliverable has two parts:

1. **`07-skills/outputs/course-trailer/composition.html`** — the HyperFrames composition the installed Skill writes. Optional: the `render.mp4` next to it if Node.js ≥ 22 is available.
2. **`07-skills/outputs/skill-reflection.md`** — your three-paragraph reflection on what makes the installed Skill's `description` trigger correctly, how the install changed Claude's behavior, and one repeating task in your own work worth packaging as a future Skill.
