Animation
UI animations and transitions
frontend-developer
by dylantarre
Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
Animation Principles - Absolute Beginner
by dylantarre
Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation
camsnap
by EthanAlgoX
Capture frames or clips from RTSP/ONVIF cameras.
video-producer
by notedit
End-to-end Remotion video production from natural language briefs. Orchestrates narrative structure, scene animation, visual style, and rendering to produce complete promotional videos. Use when a user wants to create a complete video (product promo, typographic piece, social media animation) — not just individual animation effects. Coordinates gsap-animation, spring-animation, and react-animation skills as building blocks.
gsap-animation
by notedit
GSAP + Remotion integration for professional motion graphics video production. Timeline orchestration, text splitting, SVG morphing, advanced easing, and reusable effect presets.
react-animation
by notedit
ReactBits animations for Remotion - curated for aesthetic excellence in video production
frontend-design
by julianromli
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
frontend-ui-animator
by julianromli
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
educator-teacher
by dylantarre
Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.
slidev-click-animations
by yoanbernabeu
Master v-click and sequential animations in Slidev. Use this skill to reveal content progressively and create engaging presentations.
slidev-transitions
by yoanbernabeu
Add smooth slide transitions in Slidev. Use this skill for fade, slide, and custom transitions between slides.
animejs
by BowTiedSwan
Comprehensive skill for Anime.js v4 - a fast and flexible JavaScript animation library. This skill should be used when implementing web animations, creating timelines, working with SVG animations, scroll-based animations, draggable elements, staggered effects, or any JavaScript-based animation on the web. Triggers on: "anime.js", "animejs", "animate elements", "CSS animation with JS", "timeline animation", "stagger animation", "SVG morphing", "motion path", "scroll animation", "draggable", "spring animation", "keyframe animation".
sales-motion-design
by chadboyda
"When the user wants to choose between PLG and sales-led, design a sales motion, optimize time-to-first-value, or build a value-before-purchase experience. Also use when the user mentions 'PLG,' 'product-led growth,' 'sales-led,' 'sales motion,' 'free trial,' 'freemium,' 'self-serve,' 'demo-first,' 'time-to-first-value,' 'TTFV,' or 'agent-led sales.' This skill covers sales motion selection, value delivery design, and go-to-market motion architecture."
image-to-video
by eachlabs
Transform static images into dynamic videos using each::sense AI. Create animations, Ken Burns effects, cinemagraphs, product showcases, and motion graphics from still photos.
eachlabs-video-generation
by eachlabs
Generate new videos from text prompts, images, or reference inputs using EachLabs AI models. Supports text-to-video, image-to-video, transitions, motion control, talking head, and avatar generation. Use when the user wants to create new video content. For editing existing videos, see eachlabs-video-edit.
slack-gif-creator
by pacphi
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
layered-backgrounds
by fusengine
Use when creating hero sections, landing pages, or premium visual effects. Covers gradient orbs, blur layers, noise textures.
adding-animations
by fusengine
Use when adding animations, transitions, hover effects, or motion design. MANDATORY for every component. Covers Framer Motion patterns.
interactive-states
by fusengine
Use when implementing button states, form field states, or interactive feedback. Covers hover, active, focus, disabled, loading states.
css-first
by Luko248
CSS-first expert guidance with live MDN Baseline and feature data. Use when asked about CSS implementations, modern CSS features, browser support, Baseline status, or when listing newly available web platform features.
swiftui-animation
by jamesrochabrun
This skill provides comprehensive guidance for implementing advanced SwiftUI animations, transitions, matched geometry effects, and Metal shader integration. Use when building animations, view transitions, hero animations, or GPU-accelerated effects in SwiftUI apps for iOS and macOS.
video-motion-graphics
by dylantarre
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
product-manager
by dylantarre
Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.
data-visualization
by dylantarre
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.