Index of every page on this site: llms.txt
All skills
t3knobox avatar

t3knobox/klik-anim-skill-creation

Claude skills for industry-standard Remotion motion graphics: klik-anim-bible (animation craft laws, standalone) + klik-remotion-method (end-to-end video production pipeline). Install one or both — see README.

main Updated 3 months agoGitHub
README badge for t3knobox/klik-anim-skill-creation

Repository statistics

  • Indexed skills

    3

  • Skill groups

    1

  • GitHub stars

    90

  • Forks

    19

3 total

The element-animation craft layer that makes Remotion output look designed instead of default — everything that moves WITHIN the shot (camera movement is the companion skill klik-cam). Read and obey this WHENEVER producing, editing, or reviewing any animation built in Remotion — brand films, product promos, launch videos, UI motion, kinetic type, mascot/character rigs, or any frame-based motion graphic. It assumes Remotion's official skills (remotion-create, remotion-best-practices, remotion-docs, …) as the mechanical prerequisite and upgrades what they build: non-negotiable craft laws for easing, timing, determinism, choreography, visual hierarchy, negative space, gaze path and eye-trace, reading-hold arithmetic, the anti-repetition device ledger, boundary continuity, depth, the anti-robotic kit, beat-sync, material & finish (plug-and-play treatment recipes in references/effects.md), and the render-and-look discipline. Aesthetic choices that vary by look (pacing, transition vocabulary, visual motifs, finish stack) are locked WITH the user before any code via the style interview and dials in Part C. No motion ships without passing the §PRE-FLIGHT checklist. Trigger on any request mentioning Remotion, motion graphics, "animate this", "make a promo/launch video", or work inside a `src/Composition.tsx` / `Root.tsx` / `remotion.config.ts` project.

Updated

The Klik production method — takes a user from prompt to COMPLETE animated video (motion graphics + typography) in Remotion. Runs a fixed discovery questioning sequence into a single source of truth, then a visual storyboard the user approves as PIXELS, then a frozen execution plan built on Opus. Trigger whenever the user asks to produce a full video — "make a promo/launch/brand video", "create an animated video for X", "turn this script into a video" — or when a project contains *_animation_SSOT.md / *_storyboard.html / *_execution_plan.md / PROGRESS.md artifacts (at the root or in a klik/ planning folder) mid-production, or the user asks to update or check progress on such a project. Do NOT run the full method for single-scene tweaks or one-off animation edits — the klik-anim skill (with klik-cam for camera work) alone covers those. This method decides WHAT gets made and in what order; klik-anim governs HOW every frame moves and klik-cam governs the camera.

Updated

The camera-movement craft layer for Remotion motion graphics — the companion to klik-anim (which governs everything moving WITHIN the shot; this skill governs the shot itself). Read and obey this WHENEVER a Remotion piece moves, or considers moving, its camera: pushes, dollies, orbits, pans, parallax and 2.5D depth moves, "camera shake", momentum handoffs between shots, or any request mentioning camera work, camera energy, or a moving/locked camera. It owns the Camera Motion Dial (C0, 1–5) that sets a video's camera energy as a branding decision, and the camera grammar: anti-AI-camera move pairing, monotone-spline pose interpolation, shutter blur at velocity peaks, camera signature variation scene to scene, focus discipline (the focal plane sits on the words), and 3D-space hygiene. klik-anim's base laws (determinism, thin-peak easing, pacing dial C0.5) still bind every camera parameter. No camera move ships without passing the CAM checklist at the end.

Updated

The badge links readers to this page. It shows the skilld mark and no counts, and it follows the reader's light or dark GitHub theme.

<a href="https://skilld.dev/gh/t3knobox/klik-anim-skill-creation"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/t3knobox/klik-anim-skill-creation?theme=dark"> <source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/t3knobox/klik-anim-skill-creation?theme=light"> <img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/t3knobox/klik-anim-skill-creation?theme=light"> </picture> </a>