FreePublished on GitHub

cinematic-product-promo-plan

End-to-end production plan template for feeling-first cinematic product promos: brief interrogation, 45s beat structure (cold open through brand), hero-element metaphor, storyboard fidelity ladder, visual system (palette, type, camera, texture), motion mix and easing vocabulary, audio and captions, tooling (animatic through HTML or AE), deliverables matrix, accessibility, review milestones, and compromises to accept or refuse. Use when planning, pitching, storyboarding, or producing polished brand films for any SaaS or consumer product—not category-specific; pair with skills/design/animated-video-philosophy for broader motion principles.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123 stars(GitHub 123 + cccskills 0)

Run score Not tested

See how to install

Files included (2)

SKILL.md1.2 KB
production-plan.md15.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Cinematic product promo plan

Read production-plan.md for the full phased plan. Adapt nouns (hero element, environments, metaphors) to the product; keep phases, timing discipline, and technical commitments.

How to apply it

Run Phase 0 before any boards or style frames.
Lock Phase 1 animatic pacing before polish; prove the journey midpoint first when possible.
Cross-check motion choices with animated-video-philosophy if both skills are installed.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

animated-video-philosophy

Free

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

archive-broll

Free

Find, preview, cut and credit archival B-roll from the Internet Archive (archive.org) for a Helios video — public-domain, CC BY and CC BY-SA film plus Prelinger Archives. Use when a Helios composition needs real footage as a plate, cutaway, masked fill or texture. Not for generating footage or editing the user's own camera video.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

create-composition

Free

Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

example-canvas

Free

Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

example-chartjs

Free

Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

example-d3-animation

Free

Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

See all skills by BintzGavin

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/BintzGavin/helios --skill cinematic-product-promo-plan

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/BintzGavin/helios/tree/main/skills/design/cinematic-product-promo-plan

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/cinematic-product-promo-plan/ for Claude Code, or ~/.agents/skills/cinematic-product-promo-plan/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: BintzGavin/helios
Stars: 123
Forks: 9
Category: Design
License: Apache-2.0
Original language: English
Last updated: Oct 26, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.