CSS Example: No Animation on Command Palette for High‑Frequency UI

Command palettes and other keyboard‑initiated UI elements invoked more than 100 times per day must render instantly without CSS animations to preserve perceived responsiveness.

This principle is codified in emilkowalski/skills, a repository focused on animation best practices for product teams. The codebase treats animation as a frequency‑gated decision: the more often a user encounters an element, the less animation it should have. For the command palette — opened potentially hundreds of times daily — the rule is absolute zero animation.

Why Animations Break Command Palettes

The repository's Animation Standards Reference establishes a hard rule in skills/review-animations/STANDARDS.md (lines 9–14):

• Elements appearing > 100 times per day → never animate
• Elements appearing 10–100 times per day → subtle animation (≤200ms)
• Elements appearing < 10 times per day → full animation permitted

Command palettes fall squarely in the highest frequency tier. According to the source, animating these interactions "makes the UI feel slower and breaks the sense of immediacy that users expect from keyboard shortcuts."

How the Repository Enforces This Rule

Skill: Find Animation Opportunities

In skills/find-animation-opportunities/SKILL.md (lines 31–36), the implementation includes an explicit gate that rejects animation proposals for command‑palette toggles. This prevents well‑meaning developers from adding polish that would actually degrade the experience.

Skill: Audit Existing Animations

The audit workflow in skills/improve-animations/AUDIT.md (lines 11–16) references the same frequency table, ensuring consistent decision‑making across all UI reviews. When auditing a codebase, the command palette is flagged as a must‑not‑animate element.

CSS Implementation: Zero Animation

Remove All Transition Properties

The minimal correct implementation has no animation‑related CSS whatsoever:

/* Command palette – instant open/close */
.command-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  /* No transition, no animation, no @keyframes */
}

React/TSX Without Animation

From CommandMenu.tsx, the repository shows how to handle open/close state without animation libraries or CSS transitions:

export const CommandMenu = ({ isOpen, onClose }) => (
  <div
    className="command-menu"
    style={{ display: isOpen ? "block" : "none" }}
    role="dialog"
    aria-modal="true"
  >
    {/* Menu contents render instantly */}
  </div>
);

Note the use of display rather than opacity with a transition. This avoids even the possibility of a partially visible, animating state.

Migrating Away from Existing Animations

If your codebase currently animates the command palette, remove the transition entirely:

- .command-menu {
-   opacity: 0;
-   transform: scale(0.95);
-   transition: opacity 200ms ease-out, transform 200ms ease-out;
- }
- .command-menu.is-open {
-   opacity: 1;
-   transform: scale(1);
- }

+ .command-menu {
+   display: none;
+ }
+ .command-menu.is-open {
+   display: block;
+ }

Design Philosophy: Restraint Over Polish

The repository's README.md (lines 30–38) advocates for restraint in animation design. This is not austerity for its own sake — it is user‑centric optimization. Keyboard users develop muscle memory and expect instantaneous feedback. Any delay, even 150ms, disrupts flow state and compounds across hundreds of daily invocations.

Reduced Motion Context

While the command palette has no animation by default, the repository includes a pattern for respecting prefers-reduced-motion on elements that do animate:

@media (prefers-reduced-motion: reduce) {
  .tooltip {
    transition: opacity 100ms linear;
  }
}

This shows the codebase's systematic approach to motion design, even though the command palette itself bypasses animation entirely.

Summary

• Frequency determines animation: The emilkowalski/skills repository uses a strict tiered system where daily usage count dictates animation permissibility.
• Command palettes are highest‑frequency: At 100+ daily invocations, they must never animate according to STANDARDS.md.
• Implementation is deletion: Correct CSS for command palettes removes all transitions, keyframes, and animation properties.
• Consistency across skills: Both find-animation-opportunities and improve-animations enforce this rule through shared reference tables.

Frequently Asked Questions

Why not just use a fast 100ms animation?

Even brief animations accumulate psychological overhead when repeated frequently. The repository's research indicates that users perceive any delay in high‑frequency interactions as slowness. A 100ms animation played 200 times daily equals 20 seconds of enforced waiting — breaking the immediate feedback loop that makes keyboard shortcuts effective.

Does this apply to all modal dialogs?

No — frequency classification depends on actual usage patterns, not component type. A rarely‑used settings modal might warrant gentle animation, while a developer's command palette or a power user's quick‑switcher does not. Audit your analytics to classify elements correctly using the skills/improve-animations/AUDIT.md workflow.

What if my design system requires animations everywhere?

The emilkowalski/skills repository explicitly treats animation standards as overrideable by user needs, not visual consistency. High‑frequency utility trumps aesthetic uniformity. Consider creating a utility-instant variant in your design system that respects the frequency rules while maintaining other stylistic elements.

How do I convince my team to remove beloved animations?

Reference the frequency data from your product analytics and cite the STANDARDS.md table. Frame the decision as performance optimization rather than visual regression — removing animation improves perceived speed and reduces cognitive load for power users, directly impacting productivity metrics.

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