20 tagged css animation, measured the same way as everything else here.
Browse within: accessibility 9animation 9claude-skill 9gsap 9lottie 9micro-interactions 9ffmpeg 8
Skill Claude CodeCodex
Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code. Use when the user drops or points at a video of an animation (.mp4/.mov/.webm/.mkv/.m4v/.avi/.gif) and says things like "I want this animation on my site", "recreate…
Skill Claude CodeCodex
Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it. Use when the user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout, sections, copy, design system, and scroll animations. Orchestrates analyze (measured…
Skill Claude CodeCodex
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG. Use after /motiscope:analyze, or when the user asks to "build/recreate this animation in ". Reads the motiscope animation spec and emits a runnable component.
Skill Claude CodeCodex
Create original pixel-art "Clawd" crab emotes as pure SVG + CSS keyframe animations (no frame-by-frame GIFs, no raster sprites), and optionally export them to looping GIFs. Each emote is a tiny pixel crab doing an activity — holding a prop, wearing a hat, reacting — built from / / and animated with @keyframes. Use…
Skill Claude CodeCodex
Add the canonical Clawd character to a user-provided photograph by selecting one bundled pose reference and compositing it with the photo through built-in image generation. Use this skill whenever the user asks to put, add, place, hide, hang, sit, stand, sleep, lean, climb, hug, push, pull, or otherwise make Clawd…
Skill Claude CodeCodex
This skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation…
Skill Claude CodeCodex
This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not…
Skill Claude CodeCodex
This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero".…
TamerinTECH/claude-skill-klingai-animation
Skill Claude CodeCodex
Generate character animations from a source image using Kling AI video generation (direct API or via the Higgsfield CLI), then convert the resulting MP4 video into an optimized sprite sheet for web use. Use when the user wants to create character animations, sprite sheets, or animate illustrations.