mcpField
U
user-feedback-clarity

user-feedback-clarity

github.com/dylantarreDesign & UI132502 installsUpdated 43w ago
Repository

About user-feedback-clarity

A design skill for making interface feedback clear through animation. It offers diagnostic guidance and practical fixes for ensuring users notice action states and outcomes.

Key features

  1. 01Diagnoses feedback visibility issues
  2. 02Immediate acknowledgment guidance
  3. 03Combines color and motion cues
  4. 04Keeps feedback near user focus
  5. 05Feedback timing and testing checklist

Use cases

  1. 01Clarifying form submission outcomes
  2. 02Making success and error states noticeable
  3. 03Reducing repeated clicks caused by unclear responses

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill user-feedback-clarity

After installing, type/user-feedback-clarityin Claude Code to confirm it loaded.

Details

From the project README

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

  1. Immediate acknowledgment - Show something within 100ms
  2. Animate the trigger - Button should respond visibly
  3. Use color + motion together - Redundant signals
  4. Keep feedback in viewport - Near user's focus
  5. Add haptic feedback - On supported devices

Troubleshooting Checklist

  • Does feedback appear within 100ms of action?
  • Is feedback in user's current focus area?
  • Would feedback be noticed peripherally?
  • Are multiple senses engaged (visual, motion)?
  • Does feedback last long enough to read?
  • Is error feedback more prominent than success?
  • Test: Can users tell if action succeeded without reading text?
  • Test with users—ask "did that work?"

Code Pattern

/* Button feedback */
.button:active {
  transform: scale(0.95);
}

.button.loading {
  pointer-events: none;
}

.button.success {
  animation: successPulse 300ms ease-out;
}

@keyframes successPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: var(--success); }
  100% { transform: scale(1); }
}

/* Error shake */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

Comments

Markdown supported