How Frequency of Use Should Drive Animation Decisions in UI Development

High-frequency interactions—such as keyboard shortcuts triggered 100 or more times daily—should never animate, while rare or first-time experiences can justify richer motion up to 300 milliseconds.

The emilkowalski/skills repository codifies a design-engineering philosophy that dictates exactly how frequency of use should drive animation decisions across a codebase. According to skills/review-animations/STANDARDS.md, mapping usage frequency to motion intensity prevents cognitive fatigue while preserving accessibility and perceived performance.

The Frequency-to-Animation Mapping Matrix

The repository defines three distinct frequency bands that determine animation allowances:

• 100+ times per day (keyboard shortcuts, command-palette toggles): No animation. Never apply motion to keyboard-initiated actions because repetition creates perceived latency and disconnects the user from immediate feedback.

• Tens per day (modals, drawers, toasts): Standard animation. Use modest fades, slides, or scale-ups strictly under 300ms to maintain flow without distraction.

• Rare or first-time (guided tours, onboarding, prototype pickers): Delightful animation. Apply richer motion with easing curves or spring physics that afford a higher visual budget due to low repetition.

Why Frequency Determines Animation Strategy

Performance Perception

Fast, repetitive actions benefit from instant state changes. In skills/emil-design-eng/SKILL.md, the repository emphasizes that animation adds perceived latency to high-frequency controls, making the interface feel sluggish regardless of actual frame rates.

Cognitive Load

Constant motion on heavily used controls distracts users from their task. The standards prioritize reducing extraneous visual noise for actions users perform habitually, reserving cognitive attention for content rather than chrome.

Consistency

Aligning motion with usage creates predictable behavior. A UI that sometimes animates a keyboard shortcut and sometimes does not—depending on context—feels broken and erodes trust in the interface's reliability.

Accessibility

The repository enforces prefers-reduced-motion handling universally. As noted in skills/review-animations/STANDARDS.md (lines 9-14), even when reduced motion is requested, the frequency rule remains absolute: high-frequency interactions receive no animation regardless of user preference settings.

Policy-Driven Enforcement in the Skills Repository

The emilkowalski/skills repository implements an automated pipeline that encodes these frequency rules into review and audit workflows:

Rule Definition – skills/review-animations/STANDARDS.md centralizes the frequency matrix and establishes hard constraints (e.g., line 176 mandates reduced-motion media queries alongside frequency rules).

Review Skill – The review-animations skill reads these standards and flags violations during code review. According to skills/review-animations/SKILL.md (lines 23-25), any animation detected on keyboard-initiated actions generates a critical finding.

Audit Skill – improve-animations scans the entire codebase for transition, animation, and @keyframes declarations. As documented in skills/improve-animations/AUDIT.md (lines 11-16), it recommends removal or duration reduction where high-frequency usage is detected.

Opportunity Finder – find-animation-opportunities strictly limits proposals to low-frequency contexts. Per skills/find-animation-opportunities/SKILL.md (lines 31-36), the skill explicitly rejects animation suggestions for high-frequency interactions, ensuring motion is only added when usage data justifies the visual overhead.

Practical Implementation Examples

The following CSS and JavaScript patterns demonstrate how to apply frequency-based animation rules in production code.

/* High-frequency toolbar toggle: zero animation */
.toolbar-toggle {
  /* No transition or animation properties */
  background-color: transparent;
}

/* Occasional modal: standard sub-300ms animation */
.modal {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeIn 250ms ease-out forwards;
}

/* Low-frequency prototype picker: conditional entrance */
.proto-picker-item {
  animation: slideIn 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Accessibility override: always respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .proto-picker-item {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

// JavaScript frequency guard for tooltip animation
let tooltipSeen = false;

function showTooltip(element) {
  if (tooltipSeen) {
    // High frequency: skip animation after first view
    element.classList.add('tooltip-instant');
  } else {
    // First occurrence: allow standard animation
    element.classList.add('tooltip-with-delay');
    tooltipSeen = true;
  }
}

These examples align with the repository's guidelines: the toolbar toggle (high-frequency) omits transition properties entirely, the modal (occasional) uses a 250ms fade, and the prototype picker (low-frequency) implements conditional replay logic as seen in skills/prototype/PICKER.md (lines 138-141).

Summary

• High-frequency actions (100+/day) receive instant feedback with zero animation to eliminate perceived latency and cognitive overhead.
• Moderate-frequency actions (tens/day) use standard animations capped at 300ms with simple easing curves.
• Rare interactions justify delightful, complex motion including springs and extended durations.
• The emilkowalski/skills repository enforces these rules through automated review (review-animations), codebase auditing (improve-animations), and constrained opportunity detection (find-animation-opportunities).
• Always implement prefers-reduced-motion checks, but maintain frequency-based animation restrictions regardless of user preference.

Frequently Asked Questions

When should UI animations be disabled entirely?

Animations should be completely disabled for actions users perform 100 or more times per day, such as keyboard shortcuts, command-palette toggles, or rapid-fire toolbar buttons. According to skills/review-animations/STANDARDS.md, these high-frequency interactions require instant state changes to prevent perceived latency and maintain fluid workflow.

What is the maximum recommended duration for standard UI animations?

For occasional interactions—those occurring tens of times per day—the repository mandates animations remain under 300 milliseconds. This threshold, documented in skills/review-animations/STANDARDS.md, balances visual orientation with task efficiency, preventing motion from becoming a barrier to productivity.

How does the repository enforce animation standards programmatically?

The emilkowalski/skills repository operates a policy-driven pipeline: review-animations/SKILL.md (lines 23-25) flags violations during code review, improve-animations/AUDIT.md (lines 11-16) scans for disallowed transitions, and find-animation-opportunities/SKILL.md (lines 31-36) restricts suggestions to low-frequency contexts only. This ensures frequency rules are validated at multiple stages of the development lifecycle.

Does the frequency rule apply if the user has reduced motion preferences?

Yes. As specified in skills/review-animations/STANDARDS.md (lines 9-14), high-frequency actions must have no animation even when prefers-reduced-motion is active. While reduced-motion settings disable animation for lower-frequency interactions, they do not override the instant-feedback requirement for keyboard shortcuts or other 100+/day actions. The rule is usage-dependent, not preference-dependent.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}