Use this plugin when the user wants a "Product Promo · 30s" HyperFrames motion video — Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.
SkillScore82Maintained
Automatic
◆Marketing & Content pack
Last verified 8/28/2026
What it changes
Passed 18 of 22 test cases with the skill, and 7 of 22 without it.
Without skill32%
With skill82%
Checks it passed that the model alone missed
Edits source/index.html directly for logo updates.
Identifies GSAP as the underlying motion animation library.
Replaces text placeholders directly inside source/index.html.
and 13 more in the full report
12 fixed6 passed either way3 still failing1 broke
Pass-rate lift
+50 pp
Tokens
-6%
Agent turns
0%
Response time
-23%
Model gemini-3.6-flashMeasured 8/28/2026v118 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 12
Prompt
What is the primary file path entry point for customizing content in the 30-second frame product promo project, and what technologies power its animation composition?
What was checked, without and with the skill
Checked
Without skill
With skill
Identifies source/index.html as the primary entry point file.
Missed
Passed
Identifies GSAP as the underlying motion animation library.
Missed
Passed
case-19 · gemini-3.6-flash · 8/28/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
A HyperFrames-ready HTML + CSS + GSAP motion composition, bundled under source/. It renders deterministically to MP4 / WEBM at 16:9, default 30s, 30fps.
Best for: 30-second product promo · B2B SaaS launch · Multi-feature reel with sound
Workflow
Read source/index.html to understand the named layers and the animation timeline.
Replace the sample copy (headlines, figures, labels) with the user's real content; keep the motion timing and visual signature intact.
Keep the composition self-contained under source/; do not introduce external network assets that would break a headless render.
Render to MP4 via the html-video / HyperFrames renderer.