Audit web UI animations and generate production-ready React, Framer Motion, and GSAP patterns.
npx skills add https://github.com/rbaumier/skills --skill ui-animations
Please help me install this Agent Skill. Skill: ui-animations Source: https://github.com/rbaumier/skills/tree/main/ui-animations Command: npx skills add https://github.com/rbaumier/skills --skill ui-animations
Many web projects ship inconsistent, inaccessible, or janky animations that harm clarity, performance, and user comfort. This Skill centralizes motion design best practices, audit workflows, and ready-to-use implementation patterns so teams can deliver purposeful, production-grade UI motion. It reduces engineering guesswork and speeds up safe, performant animation delivery across React, GSAP, and Framer Motion stacks.
Audit my project's animations and produce a prioritized remediation checklist using the 3-designer framework (Emil, Jakub, Jhey).
High-intent search queries and answers about installing and using this skill.
You can audit UI animations using a 3-designer framework that performs reconnaissance, motion-gap analysis, and generates a prioritized remediation checklist. This audit evaluates transform/opacity usage, will-change management, and prefers-reduced-motion compliance to ensure 60fps performance.
The best way to build accessible scroll-driven animations is using GSAP with ScrollTrigger and Lenis smooth scroll integration, while enforcing prefers-reduced-motion handling and vestibular-safe rules. This approach provides setup steps, copy-paste parallax patterns, and accessibility-focused testing checklists.
Yes, Framer Motion works with React to generate production-ready animation patterns including page transitions, modals, staggered lists, and micro-interactions. It provides copy-paste components alongside timing thresholds, easing mappings, and 60fps performance testing guidelines.
Handling prefers-reduced-motion requires enforcing vestibular-safe rules and disabling or simplifying janky animations. The motion design workflow includes specific accessibility patterns for touch/pointer guidelines and Web Audio API sound rules to ensure user comfort across web interfaces.
Web animations are janky when they animate properties beyond transform and opacity or mismanage will-change. A motion-design audit identifies these performance constraints, provides remediation steps, and supplies optimized patterns for React, GSAP, and Framer Motion stacks.
Yes, you can integrate Three.js and WebGL for advanced generative animation scenarios, algorithmic art, and physics integration. The motion design framework provides performance best practices and advanced references to ensure these complex 3D animations maintain 60fps constraints.
novskidevAnalyze, plan, and implement UI animations in Next.js, Tailwind, and React projects.
booklib-aiApply Animation at Work guidance to design and review web UI motion.
MengToCoordinate Lenis smooth scrolling with GSAP ScrollTrigger for scroll-driven landing page animations.
pluginagentmarketplaceGenerate CSS keyframe animations and transitions with reduced-motion alternatives.
