Use whenever you are running inside the Kinetic Studio desktop editor (KINETIC_STUDIO=1, or CWD contains a story.json next to a .kinetic-studio/ folder). Edits a single story.json in the project root; the studio watches it and refreshes preview + timeline automatically. Do NOT write standalone Remotion .tsx files — they will not show up in the preview.
63
75%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./src-tauri/skills/kinetic/SKILL.mdYou are running inside the Kinetic Studio desktop app. The user
launched you from the studio's embedded terminal so you can change
the one story.json in this directory. The studio's Player and
Timeline read from story.json and refresh automatically within
~300 ms of every save — you do not need to tell the user to refresh.
This is the routing skill. It contains the hard rules every turn must obey. For domain knowledge, load whichever of these sibling files matches what the user asked for:
typography-system.md — fonts, axes,
per-letter palettes, font-family choice.motion-design.md — easings, enter/exit
kinds, dynamics, stagger, beat kinds (reveal/morph/cinema/etc).color-system.md — palette fields, gradients,
glow, shadows, accent harmonies.render-pipeline.md — what the studio
renders, what you control, what you do NOT touch.layer-composition.md — beats array,
tracks, timing, illustration→text pattern, video/image clips.You do not have to read all five. Pick the one the user's request
maps to. If they ask "make the colors more contrasty", read
color-system.md. If they ask "add a word that bounces in", read
motion-design.md. If they ask "compose a 15-second piece about
launching a product", read layer-composition.md (and probably
motion-design.md).
Read ./.kinetic-studio/prompt-mode AND
./.kinetic-studio/selection FIRST on every turn. Both are single-
line files. prompt-mode is one of replace | append | insert
(default append if missing). selection is either the literal
none or an integer line — the index of the currently-selected beat
in story.beats (default none if missing or unparseable).
Combine them to decide what to do:
append (DEFAULT) — preserve every existing beat, add new beats
at the end of the array. Ignore selection.
replace:
• selection is none → wipe story.beats entirely, write the
new sequence from scratch. Preserve story-level fields
(palette, background, fontFamily) unless the user explicitly
asks to change them.
• selection is an integer i → delete beats[i] only, splice
your new beat(s) into the array at position i. Preserve
the deleted beat's startSeconds and track on your first
new beat so it lands in the same time slot. Don't touch any
other beats.
insert:
• selection is none → identical to append (insert at end).
• selection is an integer i → insert your new beat(s)
immediately AFTER beats[i] on the SAME track. Your first new
beat's startSeconds = beats[i].startSeconds + beats[i]. durationInSeconds. For every existing beat j > i on the
SAME track (beats[j].track === beats[i].track), bump
beats[j].startSeconds forward by the total duration of
your new beats so nothing overlaps. Beats on OTHER tracks
stay put.
Never replace the whole story unless prompt-mode says replace
with selection = none, or the user is explicit.
The story file is ./story.json in the CWD. Edit it directly
with the Write tool. Read it first if you need to preserve
fields you're not changing.
NEVER create sibling .tsx, .jsx, or new Remotion component
files. The studio composition is fixed and reads story.json.
Creating new files is a no-op — the user will not see them in the
preview. If you find yourself about to write MyAnimation.tsx,
stop and write story.json instead.
Do not invoke remotion-best-practices, superpowers:*, or
general Remotion skills. This skill replaces them for kinetic-
typography work. The studio's composition handles all timing,
rendering, fonts and Remotion lifecycle for you.
Do not ask the user to clarify unless the request is genuinely
ambiguous against the schema. "Make the background yellow" means
edit bgColor and probably bgColor2. "Animate the words X Y Z"
means write three beats. Just do it.
Finish with a one-line summary of what changed. No long explanations.
The studio watches story.json. The instant you write it:
doc://changed.So your main job is: write story.json. Don't tell the user to
press refresh.
The one time you DO run shell commands: adding media. To put an image
or video into the story you copy/download the file into the project
(cp, yt-dlp) and then add an imageClip / videoClip beat — that
is your job, not the user's. See "Adding media" in
layer-composition.md. Otherwise, don't start renders or suggest CLI
commands the user didn't ask for.
You may set ANY field the schema allows — blend mode, opacity, static
rotation, Ken Burns, shadows, the lot. The Studio's inspector panel
lets the user tweak parameters by hand; it does not mean those
parameters are off-limits to you. You own the whole story.json.
If the user pastes:
Apply my changes on top of yours:
- story.bgColor: "#2a1a05" → "#ffaa00"
- beats[2].dynamics: 0.5 → 0.85...they edited the same fields you did while you were working.
Apply their listed values on top of the current story.json.
Their values win.
npm run … or remotion render — the studio does that.
(Exception: copying/downloading media into the project with cp /
yt-dlp when adding an image or video clip — that IS your job.)cd somewhere — you're already in the right CWD.story.json — editing it (and copying in
media you reference) is exactly what you're here to do.e2ffa8f
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.