feat(skills): vendor 34 tokenized HTML presentation templates

[vanceingalls]

Summary

Bulk-vendor 34 HTML slide-deck templates from zarazhangrui/beautiful-html-templates, tokenized with the --tp-primary / --tp-secondary / --tp-tertiary / --tp-accent contract so downstream code can re-theme each template at render time.

Each template ships with three files (plus an optional fourth):

• template.html — the slide deck (1920×1080 deck-stage / vanilla DOM)
• summary.html — picker-friendly preview slice
• template.json — name, tagline, scheme/density metadata
• deck-stage.js (10 templates) — web-component shim for templates that use it

Scope

• 114 files, ~70k lines
• One commit: feat(skills): vendor 34 tokenized HTML presentation templates
• No new code paths — these files are loaded at runtime by the picker (PR feat(skills): design picker UI (Phase 1 templates index + Phase 2 fine-tune) #974) and CLI command (PR feat(cli): hyperframes pick — open the design picker, gated behind feature flag #975)

Why

This layer is mechanical and visually self-validating. Splitting it out keeps the rest of the stack reviewable:

• Reviewers can skim the headers + spot-check a few files
• Subsequent PRs (feat(skills): hand-crafted design.html for each template #972 — feat(cli): hyperframes pick — open the design picker, gated behind feature flag #975) carry the actual code changes
• Bulk content out of the way

What's in the diff

The tokenization rewires each template's hard-coded palette to read from --tp-* CSS custom properties. The deck-stage.js shim is the same upstream component, with catch (e) and similar unused-binding patterns rewritten to bare catch {} so the repo's eslint pass stays green.

Test plan

• Spot-check 2-3 random template.html files visually (open in browser) — they render with their authored colors
• bunx oxlint skills/hyperframes/templates/presentations/**/*.js passes
• No new code paths to test in this PR — visual + lint check is the surface

🤖 Generated with Claude Code

[vanceingalls]

• feat(cli): hyperframes pick — open the design picker, gated behind feature flag #975
• feat(skills): design picker UI (Phase 1 templates index + Phase 2 fine-tune) #974
• feat(skills): design picker build script + skill docs #973
• feat(skills): hand-crafted design.html for each template #972
• feat(skills): vendor 34 tokenized HTML presentation templates #971 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[jrusso1020]

Spot-checked the stack shape rather than the 70k lines of vendored content. Posting as COMMENT (not stamping) per merge policy.

⚠️ One real blocker — MIT license attribution

The PR vendors 34 templates from zarazhangrui/beautiful-html-templates, which is licensed under MIT (Copyright (c) 2026 Zara Zhang). MIT requires the copyright notice + license text be preserved in "all copies or substantial portions of the Software."

What I checked:

• PR diff has 0 license-like files — no LICENSE, NOTICE, README, or attribution file in the 114-file changeset.
• CREDITS.md on the branch lists Remotion as prior art (Apache 2.0) but does NOT mention beautiful-html-templates or Zara Zhang.

This needs one of:

1. skills/hyperframes/templates/presentations/LICENSE containing the upstream MIT text + copyright, OR
2. A new section in CREDITS.md attributing the upstream repo + reproducing the MIT copyright notice
3. Both (cleaner)

Vendoring 70k lines of MIT-licensed work without attribution is a real compliance issue, not a cosmetic one. Easy to fix — one file or one section. Worth handling before merge.

Spot-checks I did do

• Directory structure: 35 template directories under skills/hyperframes/templates/presentations/ (34 from the table + 1 user-design scaffold). Matches the PR summary.
• File shape per template (confirmed via the file list): each has template.html + template.json + summary.html; 10 also have deck-stage.js as documented.
• Tokenization scheme consistency: verified the --tp-primary / --tp-secondary / --tp-tertiary / --tp-accent token contract claimed in the PR body matches what the picker UI in #974 injects (tpApplyAllPalettes on the iframe documentElement, both --tp-* and --primary/etc.). The two-level token scheme — picker injects --tp-* into templates, design.html files use --primary/etc. — is internally consistent.

Non-blocking

• Lint cleanup of deck-stage.js (rewriting catch (e) to catch {} per the PR body) is fine but worth a one-line note in the file headers so future contributors don't try to "fix" it back. Or a // vendored from <upstream> @ <commit> header.
• A git-style "vendored from" footer in each template's template.json (with the upstream commit SHA) would make the next bulk-refresh much cheaper.

CI: Fallow audit + lint + format all green per the merge state. The Mintlify-skipped check is fine — this PR doesn't touch docs.

Main ask: please add the MIT attribution before merging this layer.

— Rames Jusso