shellbot-video-generator_skill

Overview

This skill programs professional motion-graphics videos using React + Remotion and a repeatable production workflow. It automates project scaffolding, asset collection, scene building, live previews via Remotion Studio, and optional renders. It requires FIRECRAWL_API_KEY when scraping a website for brand assets and metadata.

How this skill works

I follow a strict AIDA story arc (Attention, Interest, Desire, Action) and a default step-by-step Remotion workflow: scrape brand data (optional), scaffold a project from the local template, install dependencies, build scenes, run Remotion Studio, and expose the dev server through a Cloudflare tunnel so you can preview live. Assets come from Firecrawl scrapes, user uploads, or manual downloads and are referenced with staticFile() inside Remotion components. Rendering to video is only performed when you explicitly ask.

When to use it

• Creating promotional videos, product demos, or social media spots that need polished motion graphics.
• Producing animated explainers, short films, or commercials with consistent brand styling.
• When you want programmatic, repeatable video output from templates and data-driven assets.
• When you need live preview and rapid iteration via Remotion Studio and hot reload.
• When brand assets can be scraped from a website (requires FIRECRAWL_API_KEY) or provided by the user.

Best practices

• Always collect required visual assets (logo, screenshots, hero images, brand colors) before designing scenes.
• Follow the AIDA arc and include a hook within the first 3 seconds and a CTA with an incentive at the end.
• Use overlapping sequences, layered compositions, and spring-based animations instead of slide-style slideshows.
• Use Firecrawl to extract brand metadata and images into public/images/brand/ for consistent styling.
• Keep text short, limit fonts to a display + body pairing, and prefer Lucide React icons over emoji.

Example use cases

• A 30-second product demo that scrapes a product page, pulls logo and screenshots, and produces a branded promo video.
• A social ad sequence with varied scene lengths, dynamic transitions, and a strong 3-second hook.
• An animated explainer that demonstrates three real use cases (desire) and ends with a limited-time CTA.
• A repeatable template for weekly feature highlights where content is swapped programmatically and re-rendered on demand.