Video Shortform

Name: Video Shortform
Author: nexu-io

nexu-io/open-design

216 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

Plan and produce short-form video scripts, hooks, and visual briefs for TikTok, Reels, and Shorts to promote products after launch.

About

open-design video-shortform helps Claude Code craft short-form video concepts—hooks, scripts, shot lists, and platform-specific creative direction—for growing audience reach on vertical video channels after product launch.

Hook writing
Platform-native formats
Script structure
Visual briefs

Video Shortform by the numbers

216 all-time installs (skills.sh)
+2 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #598 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/open-design --skill video-shortform

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/video-shortform.svg)](https://skillselion.com/skills/nexu-io/open-design/video-shortform)

Installs	216
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

What it does

Plan and produce short-form video scripts, hooks, and visual briefs for TikTok, Reels, and Shorts to promote products after launch.

Files

SKILL.mdMarkdownGitHub ↗

Video Shortform Skill

Short-form (≤ 10s) is the sweet spot for current text-to-video models — they're great at one shot with one idea, weaker at multi-cut narratives. Plan one shot per call.

Special case: hyperframes-html is not a photoreal text-to-video model. It's a local HTML-to-MP4 renderer. For that model, do not roleplay cinematography or "real-world" camera physics. Treat the brief as a motion design card / title-frame / product interstitial, ask at most one clarifying question, then dispatch immediately.

Resource map

video-shortform/
├── SKILL.md
└── example.html

Workflow

Step 0 — Read the project metadata

videoModel, videoLength (seconds), videoAspect. These are hard-locks — clamp the prompt to whatever the chosen model supports (Seedance 2 caps at 10s; Kling 4 supports up to 10s + image-to-video; Veo 3 supports 8s with audio).

Step 1 — Plan the shot

Write the shotlist BEFORE calling the model:

Slot	Content
Subject	What's in frame?
Camera	Static / pan / push-in / orbit?
Lighting	Key direction + temperature
Motion	What moves, at what pace? Subject motion vs camera motion.
Sound	Ambient bed? (only if the model supports audio)

Normally, show this to the user as a one-sentence plan before dispatching — they can redirect cheaply.

For hyperframes-html, skip the extra pre-dispatch narration once the user has answered the discovery form. Collapse the plan into the actual generation prompt and dispatch immediately.

Step 2 — Compose the prompt

Use the format the upstream model prefers (Seedance: motion + camera + mood; Kling: subject + camera + style; Veo: subject + cinematography + sound). Bind the project's videoAspect and videoLength directly to the API parameters; never put them in prose.

For hyperframes-html, write a concise motion-design brief instead of a camera-realism prompt. Focus on subject, layout, palette, motion character, and overall tone. Do not spend turns narrating environment checks, missing side files, or "I am about to dispatch" status updates.

Step 3 — Dispatch via the media contract

Use the unified dispatcher — do not call provider APIs by hand:

"$OD_NODE_BIN" "$OD_BIN" media generate \
  --project "$OD_PROJECT_ID" \
  --surface video \
  --model "<videoModel from metadata>" \
  --aspect "<videoAspect from metadata>" \
  --length <videoLength seconds> \
  --output "<short-slug>-<seconds>s.mp4" \
  --prompt "<assembled shot prompt from Step 2>"

The command prints one line of JSON: {"file": {"name": "...", ...}}. The bytes land in the project; the FileViewer plays it automatically.

Step 4 — Hand off

Reply with: shot summary, the filename returned by the dispatcher, and one sentence on what to try if the user wants a variation.

For hyperframes-html, keep the reply especially short: what was rendered, the filename, and one concrete variation idea.

Hard rules

One shot per turn. Multi-shot timelines belong in a hyperframes /

interactive-video skill, not here.

Match videoAspect exactly — re-renders are slow.
Never ship a video without saving the file — the user expects

something to play in the file viewer.

When the underlying model fails (NSFW filter, content policy,

timeout), report the error verbatim. Don't silently retry.

Do not claim a render has been "sent", "started", or "is running"

unless you have already called "$OD_NODE_BIN" "$OD_BIN" media generate.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Short-form video — example</title>
    <style>
      :root {
        --bg: #0e0d0c;
        --panel: #1a1816;
        --ink: #f5efe5;
        --muted: #8b8579;
        --accent: #c96442;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
        font-family: 'Iowan Old Style', 'Charter', Georgia, serif; }
      body { min-height: 100dvh; display: grid; place-items: center; padding: 32px; }
      .stage {
        width: min(720px, 92vw);
        background: var(--panel);
        border-radius: 8px;
        padding: 22px;
        box-shadow: 0 24px 60px rgba(0,0,0,0.45);
      }
      .frame {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: 6px;
        overflow: hidden;
        background:
          radial-gradient(circle at 30% 35%, #d8b08b 0%, #6f4a35 40%, #1a120c 80%);
      }
      .frame::after {
        content: ''; position: absolute; inset: 0;
        background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px);
        pointer-events: none;
        animation: scan 12s linear infinite;
      }
      @keyframes scan { from { background-position-y: 0; } to { background-position-y: 200px; } }
      .frame .mug {
        position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%);
        width: 28%; aspect-ratio: 1 / 1;
        background: radial-gradient(ellipse at 35% 35%, #f5efe5 0%, #c2b8a7 50%, #6f6757 100%);
        border-radius: 18% 18% 22% 22% / 28% 28% 18% 18%;
        box-shadow: 18px 6px 30px rgba(0,0,0,0.45);
        animation: turn 6s ease-in-out infinite alternate;
      }
      .frame .mug::after {
        content: ''; position: absolute; right: -14%; top: 28%;
        width: 18%; height: 44%;
        border: 6px solid #c2b8a7; border-left: none; border-radius: 0 100% 100% 0 / 0 50% 50% 0;
      }
      @keyframes turn { from { transform: translate(-50%, -50%) rotate(-6deg); } to { transform: translate(-50%, -50%) rotate(6deg); } }
      .frame .timecode {
        position: absolute; left: 14px; bottom: 12px;
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 11px; letter-spacing: 0.16em;
        color: var(--muted);
        background: rgba(0,0,0,0.4);
        padding: 4px 8px; border-radius: 999px;
      }
      .frame .badge {
        position: absolute; left: 14px; top: 12px;
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
        color: var(--accent);
      }
      .meta {
        display: grid; grid-template-columns: 1fr auto; gap: 10px;
        align-items: end; margin-top: 18px;
      }
      .title { font-size: 22px; line-height: 1.1; margin: 0; }
      .sub { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
    </style>
  </head>
  <body>
    <div class="stage">
      <div class="frame">
        <span class="badge">● REC</span>
        <div class="mug" aria-hidden></div>
        <span class="timecode">00:05 · 16:9 · seedance-2</span>
      </div>
      <div class="meta">
        <h1 class="title">A 5-second product reveal — saved as MP4.</h1>
        <span class="sub">Open Design · Video</span>
      </div>
    </div>
  </body>
</html>