Animation
UI animations and transitions
remotion-best-practices
by ncklrs
Best practices for Remotion - Video creation in React
damage-numbers
by verekia
Display floating damage numbers that animate upward and fade out, with support for critical hits.
pushback
by verekia
Make enemies flash white and rock back and forth when receiving damage.
low-health
by verekia
Display a pulsing red vignette overlay when the player's health is low.
frontend
by jh941213
빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 → 구현까지 한 번에. "프론트엔드", "UI 만들어", "페이지 만들어" 키워드에 활성화.
slack-gif-creator
by JayZeeDesign
Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".
gsap-sequencing
by Bbeierle12
Complex GSAP timelines including labels, callbacks, nested timelines, and position parameters. Use when orchestrating multi-step animations, building animation sequences, or creating coordinated motion. Essential for cinematic animations and complex UI choreography.
gsap-router
by Bbeierle12
Router for GSAP animation domain. Use when implementing animations with GreenSock Animation Platform including tweens, timelines, scroll-based animations, or React integration. Routes to 4 specialized skills for fundamentals, sequencing, ScrollTrigger, and React patterns.
gsap-react
by Bbeierle12
GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.
particles-gpu
by Bbeierle12
GPU-based particle systems using instanced rendering, buffer attributes, Points geometry, and custom shaders. Use when rendering thousands to millions of particles efficiently, creating particle effects like snow, rain, stars, or abstract visualizations.
ui-design
by sebnow
"Use when implementing visual design, styling components, or building design systems. Enforces intentional aesthetics, systematic design tokens, production-grade implementation. Triggers: 'implement design', 'style component', 'design system', 'design tokens', 'visual design', 'component library', 'frontend styling'."
audio-router
by Bbeierle12
Router for audio domain including playback, analysis, and audio-reactive visuals. Use when implementing any audio functionality including music, sound effects, visualizers, or audio-driven animations. Routes to 3 specialized skills.
particles-router
by Bbeierle12
Decision framework for particle system projects. Routes to specialized particle skills (gpu, physics, lifecycle) based on task requirements. Use when building particle effects or needing guidance on which particle techniques to combine.
gsap-fundamentals
by Bbeierle12
Core GSAP animation concepts including tweens, timelines, easing functions, and animation properties. Use when implementing basic animations, transitions, or learning GSAP foundations. Essential starting point for any GSAP-based animation work.
immersive-visuals-router
by Bbeierle12
Master router for immersive visual experiences combining React Three Fiber, shaders, particles, post-processing, GSAP animation, and audio. Use when building 3D web experiences, visualizers, creative coding projects, interactive installations, or any project requiring multiple visual technologies. Dispatches to 6 specialized domain routers covering 29 total skills.
gsap-scrolltrigger
by Bbeierle12
Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.
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."
frontend-design-pro
by claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
frontend-design
by matteocervelli
Create distinctive, production-grade frontends by composing design dimensions and tech-specific implementations
sablier-design
by PaulRBerg
Create distinctive, production-grade React interfaces aligned with Sablier's dark-theme aesthetic. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that leverages the Sablier theme.
premium-frontend-design
by kv0906
Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or any interface where "generic AI slop" is unacceptable.
awwwards-landing-page
by rebyteai-template
Designer portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.
remotion-best-practices
by JochenYang
Best practices for Remotion - Video creation in React
cynefin
by neurofoo
Cynefin sense-making framework categorizing problems as Simple, Complicated, Complex, Chaotic, or Confused to select the right approach. Use when unsure how to tackle a problem.