FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Purposeful UI micro-interactions v1.0.0
Use this resource to add action feedback animations to an interface
New
- 567 downloads
- 104 likes
- 114 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install purposeful-micro-interactionsWith 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 loginThe agent picks micro-interactions that confirm, reward or explain, with 200 to 600 ms durations and spring easing. It applies the button stability rule, declares transitions carefully and respects prefers-reduced-motion. You get CSS snippets and a review checklist.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md with principles, patterns and CSS code
- Examples: drawn checkmark, heart pulse, spring toggle, accordion
- Component stability rule and restraint rules
- Review checklist
Good fit for
- Making a toggle or button feel more satisfying
- Animating a form success state
- Reviewing existing animations that feel too busy
Not for
- Creating video animations or motion design
- Animating large scenes or whole pages
- Configuring a specific animation library
Tags
- animation
- interface
- css
- micro-interactions
- design
About
You say
"Animate the success checkmark after the form is sent and make the toggle feel more natural."
Skill published by dembrandt under the MIT license, translated by PalateKit.
Show moreShow less
Prerequisites
- You bring
- The component or page to improve
How to use it
- Name the component to animate
- Let the agent propose the right pattern
- Check with the checklist and reduced motion mode
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- SKILL.md10.5 KB
Origin and licence
Modified by PalateKit
- Author
- dembrandt
- Source
- github.com/dembrandt/dembrandt-skills/tree/c4ad177dea5b864f779f8c722f28cf04f760cb22/skills/micro-interactions
- Licence
- MIT
Notice
Version modifiée de « micro-interactions » (dembrandt, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Do I need a library?
No, the examples are plain CSS and adapt to your stack.
Can I use it on an existing site?
Yes, ask the agent to review your components against the checklist.