remotion-markuplisted

This is guidance for writing Remotion React Markup. If this is not relevant, see `.claude/skills/synk-design/SKILL.md` — that entry point decides which skill wins. > 🔴 SYNK 는 `remotion-best-practices` 를 **일부러 안 받았다**(08-26). 그 스킬 하나가 나머지 11개의 > 사본 137개를 통째로 끌고 들어와 「정본은 하나」와 정면으로 부딪힌다. 그래서 이 링크는 여기서 끊었다. > 🔴 **`description` 은 원본과 갈라져 있다**(09-03 · 유호 픽). 원본은 `Content, animation and effects > best practices` 한 줄이라 **「Remotion」도 「영상」도 없어** 영상 작업 중에 이 스킬이 걸리지 않았다. > 실측 = 08-26 도입일 10회 읽힘 → 08-27·08-28 영상 커밋 10건 동안 **0회**. 밑에 딸린 주제 문서 30벌 > (timing·sequencing·transitions·audio·3d …)이 정확히 그 시기 작업에 필요했는데 안 펴졌다. > 원본을 판올림할 때 이 줄을 덮어쓰지 말고 **다시 붙인다**. ## Preserve user changes Users may make edits in the code outside of the conversation. If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation. ## General rules Drive animations using `useCurrentFrame()` and `interpolate()`. CSS `transition` or `animation` will not render correctly, they need to refactored. Tailwind animation class will not render correctly, they need to be refactored. Use `Easing.bezier()` and `Easing.spring()` to customize timing. For Studio-editable animation, follow the current [inline keyframe and transform patterns](./timing.md#studio-editable-animation-patterns). ```tsx import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion"; export const FadeIn = () => { const frame = useCurrentFrame(); return ( <Inte