openwhisper-animation-philosophy

Codify OpenWhisper UI motion philosophy for pills, buttons, panels, and transitions.

2|Updated Apr 22, 2026
One-click install
npx skills add https://github.com/jimmi-joensson/OpenWhisper --skill openwhisper-animation-philosophy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: openwhisper-animation-philosophy
Source: https://github.com/jimmi-joensson/OpenWhisper/tree/main/.claude/skills/openwhisper-animation-philosophy
Command: npx skills add https://github.com/jimmi-joensson/OpenWhisper --skill openwhisper-animation-philosophy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

OpenWhisper UI animation decisions can drift across surfaces and teams. This guide codifies a philosophy for alive yet restrained UI motion to ensure consistent, accessible, and expressive transitions.

Core Features & Use Cases

  • Defines a policy-driven approach to choosing motion for pills, buttons, panels, and state changes.
  • Provides fallback guidance for reduced-motion environments and cross-references to Emil-design-eng and Josh Comeau's animation resources for inspiration.
  • Use Case: When evaluating a proposed animation, consult this philosophy to decide if it aligns with the product's feel and accessibility goals.

Quick Start

Apply the animation philosophy to any new OpenWhisper UI transition design.

Frequently Asked Questions about openwhisper-animation-philosophy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create UI motion guidelines that stay accessible with prefers-reduced-motion?

Accessible UI motion guidelines establish tiered animation rules for transitions and provide reduced-motion fallbacks for users with prefers-reduced-motion enabled. This philosophy codifies restrained motion for activation pills, panels, and navigation to maintain consistent, accessible state changes.

What is the best way to standardize animation transitions across a UI design team?

Standardizing animation transitions requires a policy-driven approach that codifies motion philosophy for buttons, panels, and state changes. This guide provides consistent motion language rules to prevent UI animation decisions from drifting across surfaces and design teams.

How do I design restrained UI animation for record-button states and panel mounts?

Designing restrained UI animation for record-button states and panel mounts involves applying tiered motion rules that keep interfaces alive yet controlled. This philosophy guides activation pills and navigation transitions to ensure expressive but consistent motion language.

Does this animation philosophy provide fallback guidance for reduced-motion environments?

Yes, the animation philosophy provides specific fallback guidance for reduced-motion environments. It meets requirements for reduced-motion fallbacks and cross-references design resources to ensure UI motion remains accessible without losing expressive quality.

When do I need design guidelines for UI motion and accessibility?

You need design guidelines for UI motion when evaluating proposed animations to ensure they align with product feel and accessibility goals. This philosophy helps decide if transitions for pills, buttons, and panels meet consistent motion language standards.