iart-ai/web-animation-skills: 9 Agent Skills
Web animation skills for Claude Code — GSAP, SVG, Lottie, micro-interactions, page transitions, and 60fps performance, installed straight into your agent.
| Repository | iart-ai/web-animation-skills · website |
|---|---|
| GitHub stars | 52 |
| Skills | 9 · 2 with scripts |
| Category | Design and frontend |
| License | MIT |
| Last updated | Jun 22, 2026 |
| Install counts | iart-ai/web-animation-skills on skills.sh, Vercel's skills directory, which shows installs and security audits per skill |
Install iart-ai/web-animation-skills
| All skills, any agent | npx skills add iart-ai/web-animation-skills |
|---|---|
| One skill | npx skills add iart-ai/web-animation-skills --skill 60fps-animation |
| Only for Claude Code | npx skills add iart-ai/web-animation-skills -a claude-code, or copy a skill folder to ~/.claude/skills/ (all projects) or .claude/skills/ (one project) |
npx skills is the open-source skills CLI; it asks which agents to install for. Skills can include scripts that your agent will run: read a skill before installing it, as you would any code.
Skills in iart-ai/web-animation-skills
| Skill | What it does |
|---|---|
| 60fps-animation | 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…npx skills add iart-ai/web-animation-skills --skill 60fps-animation |
| accessible-animation | 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".…npx skills add iart-ai/web-animation-skills --skill accessible-animation |
| ascii-animation | This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters… has scriptsnpx skills add iart-ai/web-animation-skills --skill ascii-animation |
| glassmorphism | 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…npx skills add iart-ai/web-animation-skills --skill glassmorphism |
| gsap-web | This skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip",… has scriptsnpx skills add iart-ai/web-animation-skills --skill gsap-web |
| lottie-animation | This skill should be used when the user asks to "add a Lottie animation", "play a .lottie or .json animation", "integrate a Bodymovin/After Effects animation on web or mobile", "control Lottie playback / segments", "make a scroll-driven Lottie", "recolor a Lottie at runtime", or "export an AE…npx skills add iart-ai/web-animation-skills --skill lottie-animation |
| micro-interaction | This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI…npx skills add iart-ai/web-animation-skills --skill micro-interaction |
| page-transition-animation | This skill should be used when the user asks to "animate page or route transitions", "add a page transition or crossfade between views", "animate route changes in Next.js App Router", "use the View Transitions API", "AnimatePresence exit doesn't fire on navigation", or "Framer Motion exit…npx skills add iart-ai/web-animation-skills --skill page-transition-animation |
| svg-animation | This skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset…npx skills add iart-ai/web-animation-skills --skill svg-animation |
Names and descriptions come from each skill's SKILL.md and are written by the pack's authors.
More design and frontend skill packs
| # | Skill pack | Skills | GitHub stars | Updated |
|---|---|---|---|---|
| 1 |
nextlevelbuilder/ui-ux-pro-max-skill An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
|
7 | 139K | 2026-10-23 |
| 2 |
Leonxlnx/taste-skill Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
|
1 | 101K | 2026-10-20 |
| 3 |
tt-a1i/archify Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
|
5 | 88K | 2026-10-23 |
| 4 |
pbakaus/impeccable The design language that makes your AI harness better at design.
|
2 | 85.2K | 2026-10-23 |
| 5 |
cathrynlavery/diagram-design Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-con…
|
1 | 60.2K | 2026-10-21 |
| 6 |
openai/skills Skills Catalog for Codex
|
43 | 28.3K | 2026-09-08 |