How the Frequency Table in the *animate* Skill Guide Determines Animation Choices in Emil Kowalski's Skills Repository

The frequency table in the animate skill acts as a strict gatekeeper that categorizes interactions by daily usage rate and immediately decides whether any animation should be generated at all, preventing animation fatigue on frequently used UI elements.

This systematic approach to animation governance comes from Emil Kowalski's skills repository, an open-source collection of practical guidelines for building polished user interfaces. The animate skill implements a step-by-step decision chain where frequency evaluation always comes first, ensuring that high-frequency interactions never receive unnecessary motion.

The Four-Tier Frequency System

The frequency table lives in skills/animate/SKILL.md and divides interactions into four distinct usage tiers, each with an immediate decision outcome:

Frequency	Decision
100+ times/day (keyboard shortcuts, command-palette toggles)	No animation. Stop here.
Tens/day (hover effects, list navigation)	Near-imperceptible only—fast & subtle, or nothing
Occasional (modals, drawers, toasts)	Standard animation
Rare / first-time (onboarding, success, celebration)	The "delight" budget lives here

This table appears at line 33 of SKILL.md and serves as the foundation for all subsequent animation decisions.

How the Frequency Gate Drives the Build Sequence

The animate skill processes every animation request through a rigid three-step sequence, with the frequency gate operating as the first and most critical filter.

Step 1: Gate Evaluation

When the skill receives a request, it immediately checks the interaction's expected frequency against the table. If the request falls into the "100+ times/day" tier, the skill aborts animation generation entirely and suggests an instant state change instead. This hard stop prevents the cumulative fatigue that comes from animating actions users perform hundreds of times daily.

Step 2: Purpose Selection

Only after passing the frequency gate does the skill proceed to ask the author to name the animation's purpose—feedback, spatial consistency, or orientation. The frequency tier directly constrains which purposes are valid: rare actions can afford "delight" as a purpose, while frequent actions are strictly limited to functional feedback.

Step 3: Tool, Properties, Easing, and Duration Selection

The chosen tier constrains all subsequent technical choices:

• Near-imperceptible actions use the shortest durations (~100 ms) and minimal transforms
• Standard actions use default duration ranges (150–250 ms) and the strong ease-out curve
• Delight actions may employ longer durations, custom curves, or spring physics

Implementation Example

The frequency gate logic can be understood through this illustrative pattern:

// Pseudocode illustrating the frequency gate decision tree
function shouldAnimate(freqPerDay) {
  if (freqPerDay > 100) return { animate: false, reason: "Too frequent" };
  if (freqPerDay > 10)  return { animate: true, tier: "near-imperceptible" };
  if (freqPerDay > 1)   return { animate: true, tier: "standard" };
  return { animate: true, tier: "delight" };
}

// Usage in the build sequence
const info = shouldAnimate(request.frequency);
if (!info.animate) {
  // Return static UI change—no motion emitted
  return staticUpdate();
}

// Duration selection based on validated tier
const duration = {
  "near-imperceptible": "100ms",
  "standard": "200ms",
  "delight": "400ms"
}[info.tier];

The real implementation in the animate skill uses this logic to determine whether the build sequence continues past step 1.

Real-World Application Examples

These scenarios demonstrate how the frequency table maps to actual component decisions, as documented in RECIPES.md:

Scenario	Frequency Tier	Resulting Animation Choice
Keyboard shortcut (Ctrl+K)	100+ times/day	No animation—instant state toggle
Hover on a button	Tens/day	Tiny opacity/scale transition of ~120 ms (ease-out)
Opening a modal	Occasional	Fade-in + slide-up using CSS animation, 250 ms
Onboarding success toast	Rare / first-time	Spring-based lift-up with bounce, 400 ms, custom curve

Each example follows the recipes defined in skills/animate/RECIPES.md, which provide ready-to-use implementations for standard component types once the frequency gate has been cleared.

Key Source Files

Two files define this architectural guard:

• skills/animate/SKILL.md — Contains the full build sequence, the frequency table, and all hard rules governing when animations are permitted
• skills/animate/RECIPES.md — Provides implementation patterns for component types that have passed through the frequency gate

Together, these files ensure that animations in the animate skill are only created when appropriate, with the correct intensity, duration, and purpose aligned to actual usage patterns.

Summary

• The frequency table operates as a strict gate before any animation decision, located in SKILL.md at line 33
• 100+ daily interactions receive zero animation—this is a hard stop, not a suggestion
• Three remaining tiers (near-imperceptible, standard, delight) progressively unlock longer durations and more expressive motion
• The build sequence enforces frequency evaluation first, then purpose, then technical parameters
• RECIPES.md provides concrete implementations for each tier's typical use cases

Frequently Asked Questions

What happens if an interaction frequency changes after implementation?

The animate skill documentation does not specify dynamic frequency updates. In practice, you would re-evaluate the interaction against the frequency table and adjust the animation tier accordingly. If a feature's usage grows from occasional to 100+ times daily, the correct approach per SKILL.md is to remove animation entirely and switch to instant state changes.

Can I override the frequency gate for a specific component?

The frequency table is presented as a hard rule in SKILL.md, not a configurable option. The philosophy behind the animate skill treats animation fatigue as a user experience bug, making the gate a protective mechanism rather than a suggestion. Overriding it would require modifying the skill's core decision chain.

How does the frequency table interact with accessibility preferences?

The source files do not explicitly connect frequency gating to accessibility settings like prefers-reduced-motion. However, the near-imperceptible tier's minimal motion (100 ms transitions) aligns well with reduced-motion needs, and the top-tier gate already eliminates motion for the most frequent interactions. A complete implementation would apply the frequency gate first, then respect system accessibility preferences.

Where can I find code examples for each frequency tier?

Concrete implementations for each tier appear in skills/animate/RECIPES.md in the same repository. This file maps standard UI components—buttons, modals, toasts, navigation elements—to the appropriate animation parameters based on their expected frequency classification.

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