Skills
Produce beat-synced motion-graphic videos with ak:motion-video
Build a production-grade 1080p HyperFrames motion graphic with AI voice-over, captions, SFX, and music cut to the beat, in a named style profile or a per-scene mix, with fast 1:1/9:16 editions, while keeping provider spend and publication separately approved.
Use ak:motion-video to make a 1920×1080, 30 fps motion-graphic video where
scene cuts land on the music's beats, reveals land on spoken words, and the
audio mix is measured rather than guessed. The workflow is scripted end to end:
facts, script, generated audio, forced alignment, beat grid, bar-spliced music,
timeline and mix, HTML composition, lint and check, render, remux, social
encode, and optional 1:1 or 9:16 editions. It renders through HyperFrames (HTML
- GSAP) and does not publish the result.
Choose the motion-video workflow
Use ak:motion-video when
- You need a launch, release, changelog, feature, or explainer video with voice-over, captions, SFX, and music synced to the beat.
- You want a restyle of an existing video as a separate project, or a partial rework such as new music, re-timed drops, a re-mix, a re-render, a social encode, or a square/vertical edition of one.
- You want one named style profile, or one base style with individual dimensions borrowed from other styles for particular scenes.
- Every on-screen fact can be traced to a primary source such as release notes, repository docs, or code.
Choose another workflow when
- You need generative text-to-video footage. Use
ak:video. - The composition is a React or Remotion project. Use
ak:remotion. - You have a general HyperFrames question or want a plain HTML composition
without the beat-sync pipeline. Use
ak:hyperframes. - You need talking-head editing. This Skill does not cover it.
- You want a router across every installed motion or video Skill. Use
ak:motion-graphics.
Meet the production bar
The workflow targets a real production piece, not a demo: every scene needs a focal point, depth, overlapping choreography, anticipation and follow-through, micro-motion through its holds, and a transition that carries into the next scene. Every scene passes a director's pass before the final render.
By default, a director subagent writes the creative direction and reviews the
draft for taste, and an executor subagent runs the pipeline and builds the
composition from that brief; the main session pins the outcome, owns the
brief, and verifies the result. Pass --poor for a single session with no
subagents, lean reads, a compact brief, and one review round when token spend
matters more than the full director/executor split — it never skips a
verification check.
Prepare the production route
Pin the outcome before any file is touched: topic and sources, style, duration, voice language, ending, and signature. English voice-over with Vietnamese captions is the default. The Skill asks only when the style or the facts source is unknown.
The full route also needs:
- The
multixCLI onPATH, configured with its own credentials for Gemini TTS voice, ElevenLabs SFX, ElevenLabs Music composition plans, and ElevenLabs forced alignment. Credentials stay in multix's config; the Skill never prints or copies them into project files, plans, or reports. - Node.js to run the project scripts and the pinned
npx --yes hyperframes@0.8.77commands. ffmpegandffprobefor the audio mix, remux, loudness and black-frame checks, and social encode.- Python with NumPy and SciPy for the beat-grid and audio checks, and PyYAML
for
scripts/resolve-style.py. - A writable project and enough storage for generated WAV and MP3 audio, snapshots, and 1080p MP4 renders.
| Runtime | Invocation | Availability boundary |
|---|---|---|
| Claude Code | /ak:motion-video ... | Native delivery is the default; explicit plugin delivery is also supported. Full production still depends on multix, provider access, Node, Python, and FFmpeg in the session environment. |
| Cursor | /ak:motion-video ... | Slash invocation is user-verified. Browser, preview, and supporting tool behavior can vary by setup. |
| Codex | $ak:motion-video ... | The Skill uses native Codex discovery. Hook projection is partial; provider, render, and FFmpeg requirements are unchanged. |
Read Runtime adapters before assuming the same production surface everywhere.
Run the Skill
/ak:motion-video "Make a 60-second release video for our v3.4 notes in the glass-keynote style. Use only facts from CHANGELOG.md, English voice-over with Vietnamese captions, and stop after the master render; do not publish"/ak:motion-video "Make a 60-second release video for our v3.4 notes in the glass-keynote style. Use only facts from CHANGELOG.md, English voice-over with Vietnamese captions, and stop after the master render; do not publish"$ak:motion-video "Make a 60-second release video for our v3.4 notes in the glass-keynote style. Use only facts from CHANGELOG.md, English voice-over with Vietnamese captions, and stop after the master render; do not publish"Add --poor to the same request for the lean, single-session mode.
Pick or mix a style
Every look is a style profile: a compact motion-design grammar for palette,
typography, layout, material, texture, camera, transitions, pacing, beat
response, UI choreography, diagrams, character motion, captions, and sound.
references/styles/index.yaml lists about 60 of them. Brand names such as
Apple, Nike, Linear, or NVIDIA are aliases that lead to a canonical motion
language (for example, Apple-like leads to cinematic-product-launch); the
output never uses a brand's logos, fonts, or assets.
- One style: name it, for example "comic style" for
comic-multiverse. - Mixed: keep one base and borrow individual dimensions for particular
scenes.
python scripts/resolve-style.py resolve data/style.json --script data/script.jsonresolves the mix into a per-scene table that goes into the plan.
Three styles also ship a detailed reference: comic-multiverse,
glass-keynote, and cinematic-product-launch. The working projects behind
their demos are not bundled; every new video starts from the Skill's
composition skeleton plus the resolved style.
Follow the production stages
- Pin the outcome. Topic, sources, base style and any layers, duration, voice language, ending, and signature are recorded.
- Scaffold the project. The Skill creates
assets/videos/<slug>/and a plan underplans/, then copies the template scripts, example data files,hyperframes.json, and the composition skeleton. A finished edition is never overwritten; a restyle is a new project directory. - Write facts and script. Facts come only from primary sources, with a short
evidence report before scripting.
data/script.jsonholds the scenes and lines. - Generate and align audio. multix produces the voice-over, SFX, and music; ElevenLabs forced alignment maps spoken words to timing.
- Fit the beat and arrange music.
fit-beat-grid.pyreports BPM and a per-bar table; bars are spliced so drops land where the script needs them, andverify-arrangement.pychecks the splice. - Build the timeline and mix.
build-timelinerenders the ducked, loudness-normalized mix;measure-mix-balance.pyreports music under speech. - Build and validate the composition.
index.htmlfollows the composition contract and the resolved style, then passeshyperframes lint,check, and scenesnapshotreview, plus the director's pass on every scene. - Render, remux, and encode. HyperFrames renders the video, the measured mix is remuxed back in, and an optional social encode produces a smaller file.
- Add a square or vertical edition, when requested. A re-layout edition
(
scripts/reframe.py --ratio 1x1|9x16) reuses the master's voice-over, music, and mix and adds only ratio-specific CSS and its own render; a quick ffmpeg fit or crop is a faster, lower-fidelity alternative for previews.
Keep generation, spend, and publishing gated
A video brief does not authorize provider spend
Voice, SFX, music, and alignment requests go through multix to Gemini and ElevenLabs. Regenerating scenes or music creates more provider requests. Approve each generation stage under your provider, quota, and billing policy.
| Work category | Normal boundary |
|---|---|
| Local mutations | The workflow creates a project directory, plan, data files, generated audio, snapshots, and renders. It does not overwrite a finished edition. |
| Provider and network effects | multix sends script text and audio to Gemini and ElevenLabs; npx --yes hyperframes@0.8.77 can fetch the pinned package. |
| Processes | hyperframes preview runs as a tracked background process that is reused for this project and stopped when the session ends. |
| Publishing and account effects | The Skill produces the file and leaves posting to you. It does not upload, schedule, or post to social accounts. |
Brand aliases select a motion language only. Confirm rights for fonts, images, music, voices, and any product visuals, and verify every on-screen claim against the collected sources.
Review outputs and evidence
A project typically contains:
assets/videos/<slug>/index.html
assets/videos/<slug>/hyperframes.json
assets/videos/<slug>/data/script.json
assets/videos/<slug>/assets/audio/{vo,sfx,music}/
assets/videos/<slug>/renders/<slug>.mp4
assets/videos/<slug>/renders/<slug>-social.mp4The Skill reports measured numbers, not impressions. It is done only when:
hyperframes lintandcheckpass and snapshots of every scene were reviewed, and every scene passed the director's pass.verify-arrangement.pyreports every segment within ±2 ms, andmeasure-mix-balance.pyshows the music about 4–6 dB under speech.ffprobereports the expected frame size (1920×1080 for the master, or the requested 1:1/9:16 edition's own size), 30 fps, the expected duration, and AAC 48 kHz stereo; loudness is about −14 LUFS with peak at or below −1 dBFS, and blackdetect finds nothing outside fades.build-timelineprinted no clip, overlap, or missing-word warnings.- Each requested 1:1 or 9:16 edition passes the same lint, check, ffprobe, loudness, and blackdetect checks as the master.
- On-screen facts trace to the sources collected at the start.
Troubleshoot safely
| Symptom | Safe next step |
|---|---|
Runtime cannot find ak:motion-video | Confirm target and scope, start a fresh session, then follow Runtime cannot find a Skill or Agent. |
multix is missing or a provider call fails | Stop before generation, keep the script and data files, and fix multix or its own credential config. Do not copy keys into the project. |
| Alignment warns that aligned words and script tokens differ | Fix the scene's en or say text, or regenerate that scene's voice-over, then realign. |
verify-arrangement.py reports drift | Re-fit the beat grid, adjust the arrangement, and re-run the arrangement and timeline steps. |
lint or check fails | Fix the composition against the composition contract before rendering. |
| Only visuals changed | Re-run lint, check, render, and the remux; audio does not need regeneration. |
| A 1:1 or 9:16 edition still shows 1920/1080-sized layout | Read reframe.py's warnings for the affected lines, add the missing data-ratio override, and regenerate the edition; never hand-edit the generated edition directory. |
Continue with the Marketing Kit overview, Projects, artifacts, and checkpoints, or Installing kits.
Route and verify motion work with ak:motion-graphics
Prefer in-repo motion Skills first, propose the matching iart-ai external pack when a template is out of scope, and close every render with the same freeze-frame or probe-MP4 verify loop.
Render HeyGen HyperFrames videos with ak:hyperframes
Wrap the HeyGen HyperFrames CLI to render HTML-first programmatic videos through a pinned npx invocation, local preview, lint and check gates, and optional cloud render.