Create marketing videos for Solana projects using Remotion (code-driven) and Renoise (AI-generated). Use when a user says "marketing video", "product video", "promo video", "deck review", "video pitch", "create a video", or "Remotion project".
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
marketing-video
description
Create marketing videos for Solana projects using Remotion (code-driven) and Renoise (AI-generated). Use when a user says "marketing video", "product video", "promo video", "deck review", "video pitch", "create a video", or "Remotion project".
If TEL_PROMPTED is no: Before starting the skill workflow, ask the user about telemetry.
Use AskUserQuestion:
Help superstack get better! We track which skills get used and how long they take —
no code, no file paths, no PII. Change anytime in ~/.superstack/config.json.
/deck-review — Convert pitch deck into video format
"Create a marketing video for my Solana project"
"Make a product demo video"
"Turn my pitch deck into a video"
"Create a social media promo"
"Make a TikTok for my dApp"
Non-Negotiables
Never skip the interview. Don't guess the product, the audience, or the visual direction. Ask.
Never ask about animation technicalities. The user doesn't care about spring configs or TransitionSeries. Ask about their product, their story, their taste.
Stay opinionated. If the user's idea for a video is weak (too long, wrong audience, no hook), say so plainly and redirect.
Visual taste first, code second. Establish what the video should FEEL like before writing a single line of Remotion.
Gather elements proactively. Ask for screenshots, logos, brand colors. If they don't have them, source SVG icons (Lucide, Heroicons), generate color palettes, and suggest illustration styles.
One-stop shop. This skill handles everything: interview → concept → storyboard → element gathering → scaffold → code → render → platform cuts. The user should not need another tool.
Workflow
Step 1: Context Gathering (Before You Ask Anything)
Silently check for existing context. Read these files if they exist — don't ask the user to repeat themselves:
.superstack/idea-context.md → Product concept, audience, value prop
.superstack/build-context.md → Tech stack, features, deployment status
Also check: Does a Remotion project already exist in the working directory? (remotion.config.ts or package.json with remotion dependency)
Auto-detect product assets. Before the interview, scan the project for usable visual material:
If you find assets, mention them during the interview: "I noticed you have screenshots in public/ and an SVG logo — I can use those directly."
Step 2: The Interview (Deep, Product-Focused)
This is a conversation, not a questionnaire. Start with the anchor questions. Pull deeper based on their answers. Do NOT move to production until you can clearly articulate: what the product does, who cares, why it matters, and what the video should make someone feel.
Round 1 — The Product (mandatory, ask all):
"Explain your product to me like I'm a potential user, not a developer."
Why: Forces them out of technical jargon. The video needs to speak the user's language.
"Who specifically is going to watch this video? Not 'everyone' — give me one person."
Why: A video for a DeFi degen is completely different from one for a hackathon judge.
Follow-up if vague: "Is this person technical? Do they already use crypto? What are they doing when they see your video — scrolling Twitter, browsing a landing page, sitting in a pitch meeting?"
"What's the single thing you want the viewer to DO after watching?"
Why: Every frame exists to drive toward this one action. No action = no point.
Push back if they say "learn about us" — that's not an action. "Sign up", "try the demo", "visit the site", "vote for us" — those are actions.
Round 2 — The Story (mandatory, ask all):
"What problem does your product solve? Describe the pain — make me feel it."
Why: The best videos start with a problem the viewer already has. No problem = no hook.
"What's the 'aha moment' in your product? The thing that makes people go 'oh wait, that's actually cool.'"
Why: This becomes the centerpiece of the video. If they can't name it, probe: "What do users compliment most? What's the demo moment that gets reactions?"
"Do you have a number that would make someone stop scrolling?"
Why: Metrics are the most powerful hooks in crypto content. Examples: "$2M TVL", "400ms settlement", "50K transactions", "10x cheaper than Ethereum".
If they don't have a metric: "What's the most concrete proof your product works? User count? Transaction volume? Speed comparison?"
Round 3 — The Taste (mandatory, ask all):
"Show me a video you love — from any brand, any industry. Something that captures the energy you want."
Why: This reveals more about desired quality and tone than any multiple-choice question. If they can't name one, offer reference anchors:
"Clean and minimal, like an Apple product launch?"
"Fast and punchy, like a crypto Twitter banger?"
"Technical and nerdy, like a developer conference talk?"
"Bold and cinematic, like a movie trailer?"
"Playful and meme-y, like a TikTok trend?"
"What vibe should this video have? Pick one: confident, urgent, playful, mysterious, authoritative, rebellious."
Why: Vibe determines everything — color palette, animation speed, typography weight, music choice.
"Where will people see this? What platform?"
Why: Determines format (16:9 vs 9:16), duration (15s vs 3min), and hook window (1s for TikTok, 5s for YouTube).
Round 4 — The Assets (mandatory, ask all):
"Do you have: a logo, brand colors, and a screenshot of your product? Share what you have."
Why: Real product footage separates professional from generic. If they have nothing, that's OK — we'll generate visuals.
If they have a logo: Get it as SVG if possible, PNG otherwise
If they have brand colors: Get hex codes
If they have screenshots: Get them in the highest resolution possible
If they have NOTHING: "No worries. I'll set up a visual system — we'll use SVG icons, a generated color palette, and animated text to build the video."
"Do you have a preferred writing tone for text overlays and captions? Lowercase and casual, or polished and proper?"
Why: Text overlays and post copy should match the founder's voice. Read ../tone-guide.md for defaults.
"Any specific text that MUST appear? Tagline, URL, metric, hackathon name?"
Why: Some text is non-negotiable (sponsor logos, hackathon branding, product URL).
Round 5 — The Constraint (ask if needed):
"Is there a deadline? Hackathon submission, launch date, pitch meeting?"
Why: If they need it in 2 hours, we're doing a fast Remotion template or Renoise. If they have a week, we can be more ambitious.
"Budget for extras? Voiceover (ElevenLabs), music, stock footage?"
Why: Determines whether we use SFX only (free) or add TTS voiceover / licensed music.
Interview Rules
Adapt, don't script. If the user gives a rich answer to question 1 that covers questions 2-4, skip them. If they're terse, dig deeper.
Challenge weak hooks. If their "scroll-stopping metric" is "we use Solana" — that's not a hook. Push for something specific and surprising.
No false praise. If their video concept is too ambitious for a 15s Twitter clip, say so. If their product doesn't have a clear visual story yet, help them find one.
Never ask about animation preferences. Users don't know what spring damping means and shouldn't need to. Ask about FEEL, not technique. You translate taste → technique.
3 questions max per message. Don't dump all 13 questions at once. Conversational rounds.
Step 2.5: Live Research (mandatory before creative direction)
Every metric shown in a video must be current. Before producing the creative brief, research:
Pull current TVL, volume, user counts for the product and its competitors using web search or MCP tools (DefiLlama, CoinGecko)
Get the latest ecosystem stats relevant to the hook (eg. total Solana perps volume, number of tokens launched on pump.fun, etc.)
Verify any numbers the user mentioned in the interview
Every number that appears as text in the video must come from this research pass. Outdated metrics in a video are worse than no metrics.
Check for recent hacks/exploits. Don't reference hacked protocols positively. Verify before citing any protocol as a competitor or comparison.
Step 3: Creative Direction (You Decide, User Approves)
After the interview, YOU produce the creative direction. Don't ask the user to pick from a menu — present a single confident recommendation they can approve or push back on.
Output a Creative Brief that includes:
Video Concept — One sentence: "A 30-second Twitter clip that opens with your $2M settlement metric, shows a 3-step product demo, and ends with a QR code to your site."
Key visual elements: What appears on screen in each scene
Scene-by-Scene Storyboard — Written out, frame by frame:
Scene 1 (0-3s): HOOK — Large animated metric "$2.1M" springs in on black background.
Subtitle fades up: "settled in 30 days. Zero bank accounts."
Scene 2 (3-8s): PROBLEM — Text reveals line by line: "AI agents can't pay each other
without a human co-signer." Red-tinted, desaturated.
Scene 3 (8-22s): DEMO — Product screenshot slides in from right. Animated arrows point
to key features. Step labels appear in sequence.
Scene 4 (22-27s): PROOF — Three metric cards spring in with stagger: "50K+ txns",
"120 agents", "<400ms settlement"
Scene 5 (27-30s): CTA — "Try it now" with URL and QR code. Light leak transition.
Visual Elements Needed — Concrete list:
Screenshots to capture / provide
SVG icons to use (from Lucide, Heroicons, or custom)
Illustrations or diagrams to create
Brand assets (logo placement, colors)
Approach Decision — Remotion or Renoise, with reasoning:
Need pixel-perfect control or live data? → Remotion
Need it in 10 minutes with no code? → Renoise
Need both? → Renoise for creative cuts + Remotion for product demos
Present this to the user for approval. Wait for their OK or adjustments before building anything.
Step 4: Element Gathering
Before writing any code, gather all visual elements:
Brand Assets:
Logo (SVG preferred, PNG fallback) → save to public/
Brand colors → define as constants
Brand fonts → load via @remotion/google-fonts
Product Assets:
Screenshots → save to public/ at 2x resolution minimum
Screen recordings → save to public/ as MP4
If no screenshots exist, help the user capture them or describe scenes with animated text + SVG icons
SVG Icons (from Lucide React or similar):
Remotion renders React components — any React icon library works natively:
// Install: npm install lucide-react
import { Zap, Shield, Wallet, ArrowRight, ChevronDown } from "lucide-react";
// Use in compositions — animatable via useCurrentFrame()
<Zap size={64} color="#14F195" style={{ opacity, transform: `scale(${scale})` }} />
Use evolvePath() for line-drawing reveals of logos, charts, diagrams.
Use @remotion/shapes for animated geometric primitives (circles, stars, polygons).
Color Palette Generation:
If the user has no brand colors, generate a professional palette:
Primary: Pick from their product's existing UI, or default to Solana purple #9945FF
Accent: Complementary color (e.g., #14F195 for Solana green)
Background: Dark (#0a0a0f to #12101a — never pure black)
Text: White (#ffffff) with rgba(255,255,255,0.7) for secondary
Danger/warning: For "before" scenes — desaturated reds #e94560
Step 5: Build (Remotion Workflow)
Apply video-craft preflight checklist before rendering (one focal point per frame, depth in backgrounds, screenshots in device frames, max 8 words per text block, 1-2 effect families max). Load video-craft references as needed during build:
This installs 38 rule modules to ~/.claude/skills/ — giving Claude the complete Remotion knowledge base for all future sessions. The official skills cover: animations, timing, transitions, light leaks, audio, SFX, captions, voiceover, charts, 3D, fonts, Tailwind, Lottie, maps, and more.
Scene 1: Hook — metric or bold claim (0-90 frames, 3s)
Scene 2: Problem — the pain point (90-240, 5s)
Scene 3: Demo — product in action (240-660, 14s)
Scene 4: Proof — metrics/social proof (660-810, 5s)
Scene 5: CTA — try it now (810-900, 3s)
4. Apply advanced techniques from the Remotion skills reference:
Animations: All animation via useCurrentFrame() + interpolate() or spring(). NEVER use CSS transitions or Tailwind animate-* classes.
Default spring: {damping: 200} — No bounce. Bounce (damping: 8) is a deliberate choice, not a default.
Transitions: Use <TransitionSeries> with fade(), slide(), wipe(), clockWipe() for scene changes
Light leaks: Use @remotion/light-leaks as <TransitionSeries.Overlay> for cinematic scene transitions
Text animations: Typewriter (string slicing, never per-character opacity), word-highlight for key phrases
Charts: Animated bar charts with staggered spring entrance, pie charts with stroke-dashoffset, line charts with evolvePath
Thumbnail images for each platform (1280x720 for YouTube, 1080x1080 for Instagram)
Caption file (.srt) for accessibility
Post copy — suggested tweet/caption text for each platform
Resources
Writing Tone
../tone-guide.md — Default writing tone for text overlays, captions, and post copy. Ask the user's tone preference during the interview. Covers casing, sentence style, and format-specific notes for video text and social copy.
references/
references/scene-templates.md — 16 pre-built LEGO-block scenes + 3 full composition recipes. Mix and match: hooks, problems, demos, metrics, CTAs, testimonials, terminals, logo reveals
video-craft — frame-level visual composition and product demo presentation. Invoke during creative direction and build phases for higher frame-by-frame quality.
Output from create-pitch-deck skill → convert pitch deck to video
.superstack/idea-context.md — project concept, target audience, value proposition
.superstack/build-context.md — tech stack, features built, screenshots
Quick Start
# 1. Install official Remotion skills (one-time):
npx skills add remotion-dev/skills
# 2. Remotion (code-driven video):
npx create-video@latest marketing-video
cd marketing-video && npm install
npx remotion add @remotion/transitions @remotion/light-leaks @remotion/google-fonts @remotion/noise @remotion/captions @remotion/media-utils
npx remotion studio # Preview in browser
npx remotion render ProductDemo out/product-demo.mp4 --crf 18 --color-space bt709
# 3. Renoise (AI-generated video):
# Use /renoise:director — single entry point for all video creation
# Use /renoise:renoise-gen for specific text-to-video or image-to-video tasks
# Use /renoise:gemini-gen to analyze product visuals for better prompts
Framework Credits
This skill incorporates patterns and best practices from:
remotion-dev/skills — Official Remotion agent skill with 38 rule modules covering animations, transitions, text, charts, audio, 3D, captions, light leaks, noise, and more. Install: npx skills add remotion-dev/skills
@remotion/mcp — Official Remotion MCP server for documentation lookup (optional, for advanced queries)
Remotion (remotion.dev) — Programmatic video framework for React
Renoise — AI video generation platform
Disney's 12 Principles of Animation — Applied to motion graphics for professional quality
Hook-Proof-CTA framework — Social media video structure
Platform-specific best practices from Twitter, TikTok, YouTube creator guidelines
Decision Points
Remotion vs Renoise? Remotion for reproducible, data-driven, pixel-perfect videos. Renoise for creative/artistic content and rapid iteration. Use both for a full content suite.
Which format first? Start with the platform where your audience lives. Usually Twitter (16:9, 30s) for crypto projects.
Storytelling framework? Hook-Proof-CTA for social, Problem-Demo-Result for product demos, Speedrun for hackathons.
Captions? Always yes. 85% of social video is watched muted.
Music? Optional for social (most watch muted). Recommended for landing pages and pitch videos.
Telemetry (run last)
After the skill workflow completes (success, error, or abort), log the telemetry event.
Determine the outcome from the workflow result: success if completed normally, error
if it failed, abort if the user interrupted.
Run this bash:
_TEL_END=$(date +%s)
_TEL_DUR=$(( _TEL_END - ${_TEL_START:-$_TEL_END} ))
_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null | grep -o '"telemetryTier": *"[^"]*"' | head -1 | sed 's/.*"telemetryTier": *"//;s/"$//' || echo "anonymous")
if [ "$_TEL_TIER" != "off" ]; then
echo '{"skill":"marketing-video","phase":"launch","event":"completed","outcome":"OUTCOME","duration_s":"'"$_TEL_DUR"'","session":"'"$_SESSION_ID"'","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","platform":"'$(uname -s)-$(uname -m)'"}' >> ~/.superstack/telemetry.jsonl 2>/dev/null || true
true
fi
Replace OUTCOME with success/error/abort based on the workflow result.
