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

> Learn how the frequency table in the animate skill guide prevents animation fatigue by dictating animation choices based on daily usage rates in emilkowalski skills.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: deep-dive
- Published: 2026-08-07

---

**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`](https://github.com/emilkowalski/skills/blob/main/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](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md#L33) 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:

```javascript
// 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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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.