Ux Friction

This helps you spot when animations are getting in your users' way instead of helping them. It walks through common friction points like blocking interactions, confusing state changes, and decorative motion that slows people down. The diagnosis framework covers timing issues, missing feedback cues, and attention guidance problems. What I like is the pragmatic checklist and the 30% duration reduction rule, which honestly fixes most animation problems. It's grounded in animation principles but focused entirely on reducing user frustration rather than making things look fancy. Use this when you suspect your animations are causing abandonment or when users keep clicking through transitions because they feel too slow.

skills.sh installs: 524
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill ux-friction --agent claude-code

Installs into .claude/skills of the current project.

Files

UX Friction

Diagnose animations that block, confuse, or frustrate users.

Problem Indicators

Users wait for animations to finish
Confusion about what happened
Repeated clicks/taps during animation
Users skip or abandon tasks
"Where did that go?" moments

Diagnosis by Principle

Timing

Issue: Animation too slow for the context Fix: Match duration to user intent. Micro-interactions: 100-200ms. Transitions: 200-400ms. Never block input.

Anticipation

Issue: Action happens without warning Fix: Add subtle anticipation cues before significant changes. A button press should show feedback before the result.