Claude MarketplacesSubmit
dylantarre avatar

User Feedback Clarity

dylantarre/animation-principles

When users are double-clicking buttons or asking "did that work?" you've got a feedback visibility problem. This skill diagnoses the issue through Disney animation principles like anticipation, follow through, and staging. It's surprisingly practical: if feedback appears outside the user's focus area or vanishes in under a second, they'll miss it. The fix is usually combining multiple signals (color plus motion plus position) and keeping everything near the trigger point. Includes a checklist for the 100ms acknowledgment rule and code patterns for success pulses and error shakes. Best part is the troubleshooting question: can users tell if their action succeeded without reading any text?

skills.sh installs
542
GitHub stars
146
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill user-feedback-clarity --agent claude-code

Installs into .claude/skills of the current project.

Files

User Feedback Clarity

Make feedback animations unmissable using Disney's principles.

Problem Indicators

  • Users click multiple times (didn't see feedback)
  • "Did it work?" questions
  • Users miss success/error states
  • Form submission confusion
  • State changes go unnoticed

Diagnosis by Principle

Anticipation

Issue: No buildup before action completes Fix: Show loading/processing state immediately. User should know their input was received.

Follow Through

Issue: Feedback appears and vanishes too quickly Fix: Let feedback linger. Success messages need 2-3 seconds minimum. Add settle animation.

Staging

Issue: Feedback appears outside user's focus Fix: Show feedback near the trigger. If button was clicked, feedback should appear on/near button.

Exaggeration

Issue: Feedback is too subtle Fix: Increase contrast, size change, or motion. Feedback must compete with user's task focus.

Secondary Action

Issue: Only one feedback channel Fix: Combine channels: visual + motion + color. Error = red + shake. Success = green + checkmark + pulse.

Quick Fixes

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/dylantarre/animation-principles
Category
Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144

Recommended

More Design & UI/UX
1dylantarre avatarprofessionalism-credibilitydylantarre/animation-principlesUse when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.533skills.sh installs
2plugin87 avatarprototypeplugin87/ux-ui-agent-skillsMove an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and us528skills.sh installs
3plugin87 avatartoken-buildplugin87/ux-ui-agent-skillsSet up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS 522skills.sh installs
4nexu-io avatarweb-prototypenexu-io/open-designGeneral-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `refere301skills.sh installs
5nexu-io avataremail-marketingnexu-io/open-designA brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications249skills.sh installs
6nexu-io avatarmagazine-web-pptnexu-io/open-design生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT（单 HTML 文件），含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"horizontal swipe deck"、"editori239skills.sh installs