Ask me what skills you need
What are you building?
Tell me what you're working on and I'll find the best agent skills for you.
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
Use this skill when animating character rigs made from SVG parts.
x, y, scale, rotation) rather than layout.svgOrigin or correctly scoped
transform origins).requestAnimationFrame; drive a
paused timeline from the current frame.gsap.set("#arm_right", { svgOrigin: "390 310" });
const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
tl.to("#head", { rotation: -8, duration: 0.2 })
.to("#arm_right", { rotation: 35, duration: 0.4 }, "<");
const frame = useCurrentFrame();
const progress = frame / durationInFrames;
timeline.progress(progress);
Use HTML/SVG/GSAP components with deterministic timelines and validate via the HyperFrames CLI before final render.
npx skills add calesthio/OpenMontage --skill svg-character-animationHow clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
Clear and well structured, with only minor parts that might need a second read.
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
Mostly actionable with clear steps; only a few small gaps remain.