Add a 60-second demo video to the README showing the full workflow

[sebastientaggart]

Problem to Fix

The README has no video demo. Developers evaluating Code Cannon can only read text and look at static images — there's no way to quickly see the tool in action before deciding to adopt it.

Why it Matters

A short demo video is the single fastest way to convert a curious visitor into a user. Developers scanning GitHub repos spend seconds deciding whether to dig deeper. A 60–90 second video showing the full workflow — from /start to /submit-for-review — answers "what does this actually do?" instantly, in a way that text and screenshots cannot.

General Approach

Record a short (60–90 second) screen recording demonstrating the Code Cannon workflow, then embed it directly in the README. The video will be hosted on GitHub itself (uploaded via an issue comment to get a permanent URL), so there are no third-party dependencies or costs.

Recording & editing checklist:

1. Record using macOS built-in screen recording (Cmd+Shift+5). Select a clean terminal window, ideally at a legible font size (16pt+).
2. Edit in QuickTime Player (Edit → Trim) to cut dead air at the start/end. If more cuts are needed, use iMovie (free, pre-installed). Export as H.264 .mp4, targeting under 10MB.
3. Upload by dragging the .mp4 into a comment on this issue. GitHub will host it and return a permanent URL.
4. Embed in the README using an HTML video tag right after the header image or in the "What you get" section.

Script:

Timestamp	What's on screen	Notes
0:00–0:05	Title card: "Code Cannon in 60 seconds"	Can be a simple text slide or terminal echo
0:05–0:15	Show .codecannon.yaml — highlight that one config drives everything	Keep it brief, just open the file
0:15–0:25	Run sync.sh — show skill files appearing in .claude/commands/	Terminal output, no narration needed
0:25–0:45	Run /start "Add dark mode" — issue created, branch created, code written	The "aha moment" — this is the core demo
0:45–1:00	Run /submit-for-review — PR opens, review runs, merge	Show the full loop closing
1:00–1:10	End card: "One workflow. Every agent." + repo URL	Simple closing

Tips for a clean recording:

• Close all notifications (Focus mode on Mac)
• Use a clean terminal with no personal info in the prompt
• Bump terminal font to 16pt+ so it's legible at README embed size
• Pre-stage the repo so commands run quickly (avoid long waits on screen)
• If a step takes too long, cut it in editing and add a brief "..." transition
• No background music, no webcam — just the terminal

README embed format:

<video src="https://github.com/user-attachments/assets/..." autoplay loop muted playsinline width="100%"></video>

Complexity

Verification / QA effort: trivial
Verification is just watching the video plays in the README on GitHub — one visual check.

Acceptance Criteria

• A demo video (60–90 seconds, under 10MB) is recorded showing the /start → code → /submit-for-review workflow
• The video is hosted on GitHub (uploaded via issue comment) with no third-party dependencies
• The README embeds the video using an HTML video tag, visible and auto-playing (muted) when visitors load the page
• The video is legible at typical README viewing width (terminal font 16pt+, no tiny text)

[sebastientaggart]

Agent Implementation Notes

This is a non-code task — the implementation is the human recording and editing the video. The only code change will be adding the <video> embed to README.md.

README edit — single change in README.md:

Add a video tag immediately after line 1 (the header image) or after the "What you get" section (line 28 area). Suggested placement: right after the header image, before the # Code Cannon heading, so it's the first thing visitors see after the logo.

<video src="https://github.com/user-attachments/assets/PLACEHOLDER" autoplay loop muted playsinline width="100%"></video>

The PLACEHOLDER URL will be replaced with the real GitHub-hosted URL after the video is uploaded to a comment on this issue.

No other files change. This is a documentation-only update.

[sebastientaggart]

⏺ Update(README.md)
  ⎿  Added 3 lines
      1  ![Code Cannon](.github/assets/readme-header.png)
      2
      3 +<!-- Demo video: replace VIDEO_URL after uploading .mp4 to a GitHub issue comment -->
      4 +<video src="VIDEO_URL" autoplay loop muted playsinline width="100%"></video>
      5 +
      6  # Code Cannon