video-craft - SKILL.md Agent Skill

name: video-craft description: Frame-level visual composition and product demo presentation for Remotion videos. Use when the user says "video looks generic", "make video frames look better", "video frame design", "device frame", "product demo video craft", "video CTA", "end card", "video composition", "video craft", "screenshot in video", "frame quality", or when reviewing Remotion compositions for visual quality. Sits on top of marketing-video — adds the visual design layer for each frame. Does NOT claim "create a video" or "marketing video" — those route to marketing-video.

Preamble (run first)

_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null | grep -o '"telemetryTier": *"[^"]*"' | head -1 | sed 's/.*"telemetryTier": *"//;s/"$//'  || echo "anonymous")
_TEL_TIER="${_TEL_TIER:-anonymous}"
_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" || echo "no")
_TEL_START=$(date +%s)
_SESSION_ID="$$-$(date +%s)"
mkdir -p ~/.superstack
echo "TELEMETRY: $_TEL_TIER"
echo "TEL_PROMPTED: $_TEL_PROMPTED"
if [ "$_TEL_TIER" != "off" ]; then
_TEL_EVENT='{"skill":"video-craft","phase":"launch","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}'
echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null || true
_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null | grep -o '"convexUrl":"[^"]*"' | head -1 | cut -d'"' -f4 || echo "")
[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"video-craft","phase":"launch","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
true
fi

If TEL_PROMPTED is no: Before starting the skill workflow, ask the user about telemetry. Options: A) Sure (anonymous) B) No thanks. This only happens once.

Wrong skill? See SKILL_ROUTER.md for all available skills.

Video Craft

Frame-level visual composition and product demo presentation for Remotion videos. This skill makes each frame of a video look intentionally designed, not just correctly animated.

marketing-video handles the production pipeline (interview, storytelling, animation mechanics, rendering). This skill handles how each static frame looks — composition, device framing, backgrounds, effect choices, and end-card design.

Authority Model

marketing-video → production pipeline, animation mechanics, baseline quality (type minimums, safe zones, spring physics)
design-taste → aesthetic direction. This skill CONSUMES it, does not redefine it.
This skill → frame composition for time-bounded viewing, product demo presentation, end-card design, effect families

Inherits (does NOT restate): type minimums, mobile safe zones, text readability, spring defaults from marketing-video. Color restraint, asymmetry, whitespace from design-taste.

When to Fire

Reviewing Remotion compositions for visual quality
Building product demo videos with screenshots
Designing end cards / CTA frames
User says "the video frames look generic" or "make this look more polished"
marketing-video invokes this skill during creative direction or build phases

Do NOT fire on "create a video" or "marketing video" — those route to marketing-video.

Workflow

Check design-taste for aesthetic direction (or ask user to pick one)
Identify which reference is relevant:
- Composing video frames or end cards → references/frame-composition.md
- Building product demo scenes → references/product-demo-patterns.md
Produce a frame brief per scene
Run preflight checklist before rendering

Frame Brief (per scene)

Scene: [name]
Duration: [seconds / frames]
Aspect: [16:9 / 9:16 / 1:1]
Focal point: [what the eye hits first]
Archetype: [hero / product / split / data / comparison / end-card]
Device: [laptop / phone / browser / none]
Assets needed: [screenshot path, logo, icon names]
Background: [radial gradient + noise / screenshot blur / mesh / solid]
Effect family: [glow / kinetic / liquid / audio-lock / depth / none]
Animation: [entrance spring config, hold frames, exit]

Preflight Checklist

Every frame has one clear focal point
Screenshots are in device frames, not floating raw
Backgrounds have depth (gradient + noise or vignette), not flat solid
Max 8 words per text block on screen
Hold time >= (word_count x 0.3) + 1 seconds per text frame
End card has minimum 3 seconds and one action only
Effect families limited to 1-2 per video
Aesthetic direction chosen before any frame work

Resources

references/

references/frame-composition.md — Frame archetypes (16:9 and 9:16), time-bounded readability, background depth, effect families, end-card archetypes (clean/metric/action/loop)
references/product-demo-patterns.md — Remotion-ready: device frames (laptop/phone/browser), cursor choreography, zoom recipes, screenshot prep, annotation patterns

Cross-skill references

marketing-video — production pipeline, animation mechanics, baseline quality rules
design-taste — aesthetic direction consumed before frame work
number-formatting — for any metrics displayed in frames

Telemetry (run last)

_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":"video-craft","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.