Shellbot Product Video

---

name: shellbot-product-video

description: "Create conversion-focused product marketing videos with Remotion + React using the AIDA framework (Attention, Interest, Desire, Action). Use when building launch videos, paid social ads, app promos, SaaS explainers, or product teasers that must follow this arc: (1) establish the problem, (2) introduce the solution, (3) show use cases instead of feature lists, and (4) end with a call-to-action that includes an incentive. Use Freepik only for ancillary assets (for example Nano Banana 2 stills, Kling inserts/transitions, and ElevenLabs voiceover/music), while core storytelling, timing, and final assembly stay in Remotion code."

---

# Shellbot Product Video

Overview

Build one thing well: product marketing videos that convert.

Keep Remotion as the source of truth for pacing, layout, animation, and render output. Use external generation tools only to enrich scenes.

Built by the [ShellBot Team](https://getshell.ai).

Non-Negotiable Story Structure (AIDA)

Follow this structure in order:

1. Establish the problem being solved.

2. Introduce the solution.

3. Show use cases, not feature lists.

4. End with a CTA that includes an incentive.

Reject drafts that skip any step.

Workflow

1) Bootstrap the Remotion Base Project

List bundled templates:

./scripts/bootstrap_template.sh --list

Bootstrap the chosen template:

./scripts/bootstrap_template.sh --template cinematic-product-16x9 ./my-product-video
cd ./my-product-video
npm install

To also copy official Remotion rule asset snippets into the project:

./scripts/bootstrap_template.sh --template cinematic-product-16x9 --include-rule-assets ./my-product-video

Template bundle:

Then adapt scene content/components and composition metadata in `src/Root.tsx` for the brief.

2) Capture Brief Inputs

Collect these fields before writing scenes:

If use cases are missing and only features are present, ask for use-case phrasing.

3) Build AIDA Narrative and Timing

Use this duration allocation as a starting point:

Generate a structured plan with:

python3 scripts/brief_to_aida_plan.py --in brief.json --out plan.json --duration-sec 45 --fps 30

4) Map Story to Remotion Scenes

Implement scenes as React components and sequence them using `Sequence`.

Keep transitions purposeful and short (usually 8-18 frames).

Load [references/remotion-product-video-playbook.md](references/remotion-product-video-playbook.md) when writing or reviewing Remotion code.

Load [references/remotion-rules-index.md](references/remotion-rules-index.md) and then only the specific files needed from `references/remotion-rules/`.

5) Add Ancillary Assets (Optional but Useful)

Use Freepik-generated assets only to support scenes:

Do not let generated clips replace the whole narrative structure.

Load [references/freepik-ancillary-assets.md](references/freepik-ancillary-assets.md) when planning asset generation.

6) Assemble, QA, and Render

Run this QA gate before rendering:

Then render via Remotion CLI or renderer API.

Creative Rules

Deliverables

Produce these outputs for each request:

1. AIDA script draft.

2. Scene plan JSON (`plan.json`).

3. Remotion project from the selected bundled template customized for the brief.

4. Asset manifest listing generated inputs and their intended scene usage.

5. Final render command(s).

References

Use this skill for product marketing videos only. For other video categories, use a different skill.