AI agent skills for front-end teams and web designers

Guide to creating, controlling, and optimizing animations in Three.js, including keyframes, skeletal rigs, morph targets, blending, and procedural motion.

Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight.

Guide to implementing and debugging professional GSAP-based web animations, timelines, and ScrollTrigger interactions.

Comprehensive guide to using Anime.js v4 for JavaScript-driven web animations, timelines, SVG, scroll effects, and draggable interactions.

Guides designing and implementing tasteful, high-performance product-grade web animation systems inspired by Stripe, Linear, Apple, and Vercel.

Skill guide for creating and controlling animations in Three.js, including keyframes, skeletal rigs, morph targets, blending, and procedural motion.

951 views

17 Uses

Added by Nigel Alba

Guides the design of premium light-mode SaaS marketing pages with editorial grids, restrained color, framing lines, subtle motion, and conversion-focused layouts.

Guidelines for designing a polished SaaS marketing interface with strong layout systems, realistic product dashboards, subtle motion, and refined visual hierarchy.

A senior-level UI/UX engineering guide for architecting premium digital interfaces using strict component architecture, motion physics, and anti-bias design rules.

Index of GSAP-related skills for AI agents, covering core animation, timelines, ScrollTrigger, plugins, React/framework integration, utilities, and performance.

562 views

11 Uses

Added by Mitul Chovatiya

Guides creation of polished light-mode SaaS marketing interfaces with varied layouts, rich product UI components, strong hierarchy, and subtle motion.

Create a high-performance full-screen WebGL laser background with an atmospheric smoke effect and brand-integrated glowing cores.

Covers using GSAP in Vue, Svelte, and similar frameworks with proper lifecycle timing, selector scoping, and cleanup on unmount.

514 views

2 Uses

Added by Mitul Chovatiya

Explains how to build and control GSAP timelines for sequencing animations with position parameters, labels, nesting, defaults, and playback.

488 views

13 Uses

Added by Mitul Chovatiya

A structured guide for selecting and applying web animation patterns across multiple technologies using a registry-first workflow.

Muhammad Talha Imtiaz

Covers GSAP core tween animation APIs, easing, stagger, responsive matchMedia usage, and accessibility-minded animation best practices.

299 views

11 Uses

Added by Mitul Chovatiya

Official GSAP guide for building scroll-linked animations with triggers, pinning, scrub behavior, batching, proxies, and cleanup best practices.

281 views

66 Uses

Added by Mitul Chovatiya

Covers GSAP plugin registration and practical use of plugins for scroll, FLIP, draggable UI, text, SVG, easing, physics, and animation debugging.

266 views

6 Uses

Added by Mitul Chovatiya

Expert principles for UI polish, component craft, and animation decisions focused on performance and perceived speed.

Create a premium 3D particle globe with a luminous spherical core and orbital rings using Three.js and custom shaders.

Reference for GSAP utility helpers like clamp, mapRange, random, snap, toArray, wrap, and related value, unit, and collection utilities for animation code.

193 views

1 Uses

Added by Mitul Chovatiya

Create high-fidelity 3D web visuals using WebGL and Three.js with physically based materials, lighting, and geometric depth for hero sections.

Guidelines for using GSAP in React and Next.js with useGSAP, refs, scoped selectors, cleanup, and SSR-safe animation patterns.

161 views

1 Uses

Added by Mitul Chovatiya

A framework of portable agent skills to upgrade AI-built interfaces with high-end typography, motion, and layout instead of boilerplate code.

154 views

10 Uses

Added by Ivan Oung

Create premium staggered word-reveal animations through overflow masks using GSAP ScrollTrigger for editorial-style scroll effects.

A framework for building production-grade, premium UI that avoids common AI design clichés through intentional typography, color, and motion.

Robert Denton

A comprehensive design AI covering the full lifecycle from UI/UX and design systems to accessibility audits and motion design.

114 views

5 Uses

Added by Robert Denton

Create high-quality 3D hero objects with geometric mesh depth, physically based materials, and real-time lighting using WebGL and Three.js.

107 views

1 Uses

Added by JDC GLOBAL

A comprehensive guide for building distinctive, production-grade frontend interfaces with unique aesthetics, refined typography, and high-impact motion.

107 views

3 Uses

Added by hill

Comprehensive guidelines for designing and implementing smooth, purposeful, and performant motion in user interfaces.

Robert Denton

Learn to implement keyframe animations, skeletal rigs, morph targets, and procedural motion in Three.js environments.

85 views

1 Uses

Added by JDC GLOBAL

Master Three.js animation systems including keyframes, mixers, skeletal animation, and morph targets for 3D web experiences.

67 views

Added by Colsls

Learn to implement keyframe animations, skeletal rigs, morph targets, and advanced animation blending techniques in Three.js.

57 views

1 Uses

Added by Lon Obers

Design and implement micro-interactions, motion design, and transitions to enhance usability and user delight.

33 views

Added by Colsls