make-hyperframes

A Claude Code skill that produces short-form brand video ads (and optional static-image companions) using HyperFrames — an HTML-to-MP4 pipeline rendered locally via headless Chromium + FFmpeg.

The skill wraps the full creative-strategy workflow: brand DNA extraction → customer avatar selection → creative framework + scene copy → HyperFrames composition authoring → lint/QC/render → snapshot output. Fully local. No cloud APIs.

What's inside

For videos (Phases 1–8):

• Reads a local brand toolkit (or falls back to web research) and presents brand DNA in a consistent format
• Picks one of 6 video frameworks (Problem→Agitation→Solution, Price Anchor, Feature→Benefit→Permission, Identity Mirror, Social Proof, Before→After)
• Writes scene-by-scene copy with hard rules against marketing-language clichés
• Authors an index.html with GSAP timeline and brand assets, then runs npm run check and npm run render
• QC pass with mid-scene + transition-boundary snapshots before reporting

For static ads (Phase 9):

• 6 image-ad frameworks (Stack, Side-by-Side Comparison, Screenshot+Caption, Testimonial Card, Before/After, Stat-Forward)
• Real-asset workflow — reads brand/assets/logo.svg from a brand kit and embeds it in the composition
• Single-frame composition rendered as PNG via hyperframes snapshot

Verification gates:

• Framework #4 (Testimonial Card) and #6 (Stat-Forward) require explicit user confirmation that named customers and specific stats are real and authorized for use — guards against FTC false-advertising risk from placeholder content in brand kits.

Install

# Clone into your global skills folder
git clone https://github.com/archemike/make-hyperframes ~/.claude/skills/make-hyperframes

The skill will then be available globally in Claude Code as make-hyperframes. Invoke with:

/make-hyperframes <brand-website-url-or-kebab-name>

Dependencies

• HyperFrames CLI (autoloaded via npx --yes hyperframes@0.6.20 ... — no manual install needed)
• Node.js, modern Chromium (HyperFrames manages this for you)
• Optional: a brand toolkit directory at /Users/mob/code/brandtoolkit-<name>/ for local-first brand DNA

Brand toolkit convention

If you maintain brand toolkits, the skill expects this layout:

brandtoolkit-<brand>/
├── brand/
│   ├── brand-guide.md
│   ├── voice-dna.md
│   ├── buyer-personas.md
│   ├── hooks-by-awareness.md
│   ├── value-props.md
│   └── assets/
│       └── logo.svg
└── ad-brain/
    └── naming-convention.md  (optional)

Without a brand toolkit, the skill falls back to WebFetch + WebSearch.

License

MIT — see LICENSE.