スキルを探す

Animation Vocabulary

Emil Kowalski

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.

• animation
• motion design

Finding Animation Opportunities

Emil Kowalski

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.

• web animation
• ui review

character-animation

karem505

design skill for Claude AI. Grade A. Turn a static character or asset image into a looping animated character, delivered as a moving SVG plus animated WebP and GIF. Use this whenever the user wants to animate, bring to life, or "make move" a character, mascot, logo, creature, sprite, icon, or any asset image — or wants a moving/animated SVG, WebP, or GIF made from an image — or mentions generating a sprite sheet animation, or names "Nano Banana 2" / Gemini image generation for animation. Also use it to convert an EXISTING sprite...

• design
• python
• go

Animation Performance

Emil Kowalski

Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.

• web animation
• performance

GSAP Animation Skills

greensock

Build web animations with official GSAP guidance for tweens, timelines, ScrollTrigger, plugins and framework cleanup.

• animation
• gsap

Improving Animations

Emil Kowalski

Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.

• web animation
• ui review

Building Animations

Emil Kowalski

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

• web animation
• motion design

Reviewing Animations

Emil Kowalski

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

• web animation
• code review

Compose: animations

Chris Banes

Use when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating one property toward a target, color or size transitions, multiple properties from one state, switching composable content, or choosing between AnimatedVisibility, animate*AsState, rememberTransition, AnimatedContent, and Crossfade.

• android
• jetpack compose

Building Animations in Expo

Emil Kowalski

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.

• react native
• expo
• animation

Audience Retention Analysis

Jake Schincariol

Analyze a YouTube Studio retention export and identify drops with transcript context.

• youtube
• Analytics

Animate Roblox Characters

dillydog580

Create and review stylized Roblox R6 and R15 character animations in Blender using an agent and Blender MCP.

• roblox
• animation
• blender

Youtube Transcript Analyzer

TechNickAI

development skill for Claude AI. Grade A. Use when analyzing YouTube videos for research or learning

• development
• bash

Design Motion Principles

Kyle Zantos

Build or audit interface motion using context-sensitive design guidance and an HTML or terminal report.

• motion design
• animation