sf-lwc-motion

Installation
SKILL.md

sf-lwc-motion: Animation and Motion Design for LWC

Add purposeful, accessible motion to Lightning Web Components. Every animation must serve a functional purpose and respect user preferences.

Core Principles

  1. Purposeful, not decorative — animation communicates state changes, not showing off
  2. prefers-reduced-motion is mandatory — always provide a no-animation fallback
  3. Fast — 150-300ms for most transitions; never more than 500ms
  4. Only animate transform and opacity — these are GPU-composited and performant
  5. Ease-out for entrances, ease-in for exits — matches natural physical motion

Reduced Motion (Mandatory)

Every component with animation must include this. No exceptions.

Related skills
Installs
7
GitHub Stars
14
First Seen
Mar 6, 2026