Loading...
Loading...
Found 24 Skills
Generates animation configurations for Remotion including spring configs, interpolations, easing functions, and timing logic. Focuses ONLY on animation parameters, NOT component implementation. Use when defining animation behavior or when asked to "configure animations", "setup spring configs", "define easing curves".
Implements Motion (Framer Motion) animations in React applications. Covers animation presets, page transitions, modals, stagger effects, and skeleton loaders. Use when adding animations, transitions, or interactive hover effects.
Adds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.
Orchestrates translation of motion designer video specifications into working Remotion code by coordinating specialized agents. Acts as pipeline coordinator that delegates to remotion-scaffold, remotion-animation, remotion-composition, and remotion-component-gen. Use when you have a complete VIDEO_SPEC.md and need full Remotion implementation.
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, and Figma Motion animations — via the Figma MCP connector. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
World-class design and motion. Use when designing interfaces, building front-ends, or when craft matters. Triggers on "design this", "make it beautiful", or "be french claude".
Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.
MUEDnote動画制作スキル。プロモーション動画、Hooキャラクターアニメーション、 LP用動画、アプリ内チュートリアル動画の制作に使用。Remotionベース。 トリガー: "プロモ動画", "Hooアニメーション", "MUEDnote動画", "動画を作って", "アニメーションを作成"
ReactBits animations for Remotion - curated for aesthetic excellence in video production