Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

PalateKit Pick

Web animation design v1.0.0

Use this resource to design or fix the animations of a web interface

New

  • 359 downloads
  • 112 likes
  • 131 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install web-animation-design

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent applies precise rules: which easing for an entrance, a move or a hover, which duration, when to use a spring, when not to animate. It checks performance (transform and opacity) and plans for reduced motion. You get more natural animations and a clear review of the flaws.

Mostly picked by

Updated November 2, 2026

Easing curves and a before/after table from an animation review

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: easing, durations, springs, performance, accessibility, decision tree
  • PRACTICAL-TIPS.md: detailed implementations of common cases
  • A before/after table review format

Good fit for

  • Making modals, dropdowns and tooltips feel smoother
  • Fixing a janky animation
  • Adding reduced-motion support to a site

Not for

  • Producing a motion design video
  • Animating a logo or illustration
  • A site with no interaction at all

Tags

  • animation
  • easing
  • css
  • interface
  • microinteractions

About

You say

"Review the animations on my dropdown and modal: they feel slow."

Easing curves and a before/after table from an animation review

Skill published by vercel-labs under the MIT license. It is based on Emil Kowalski's course.

Show more

Prerequisites

You bring
The code or description of the components to animate

How to use it

  1. Copy the folder into your agent's skills folder
  2. Name the components to animate or review
  3. Apply the before/after table it proposes

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • PRACTICAL-TIPS.md6.6 KB
  • SKILL.md11 KB

Origin and licence

Modified by PalateKit

Author
vercel-labs
Source
github.com/vercel-labs/open-agents/tree/cf865e94de7729751c747171785b6ce57e7b178c/.agents/skills/web-animation-design
Licence
MIT

Notice

Version modifiée de « web-animation-design » (vercel-labs, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Why does the agent say almost nothing at first?

The skill is designed to show only a one-line greeting until you ask a question. Then send your request.

Do I need an animation library?

No, the rules apply to plain CSS; Framer Motion examples are included if you use it.