sf-lwc-motion

Implement purposeful LWC transitions using transform and opacity with reduced-motion guards.

15|Updated Jan 27, 2026

Search Tags:#performance #accessibility #animation #lwc #motion-design #prefers-reduced-motion #slds-2

Ready to run

npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-motion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sf-lwc-motion
Source: https://github.com/sfdc-brendan/Demo-Lab/tree/main/skills/sf-lwc-motion
Command: npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Animation without purpose wastes cycles and can degrade accessibility; this skill enforces purposeful motion in Lightning Web Components, improving UX and performance.

Core Features & Use Cases

Purposeful transitions that communicate state changes in LWCs
Respect for user preferences via prefers-reduced-motion guard
Only transform and opacity animations for performance and SLDS compatibility
Use cases include button hover, panel open, modal entrance

Quick Start

Add accessible motion to a Lightning Web Component by applying a purpose-driven transition that respects prefers-reduced-motion.

Frequently Asked Questions about sf-lwc-motion

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

FAQPage Schema

How do I add accessible motion to Lightning Web Components?▼

Accessible motion in Lightning Web Components uses purposeful transitions that communicate state changes while respecting user preferences through a prefers-reduced-motion guard.

What animation properties are allowed for LWC transitions?▼

LWC transitions should use only transform and opacity animations to ensure performance and compatibility with SLDS-based timing constraints.

How do I handle prefers-reduced-motion in LWC animations?▼

Handling prefers-reduced-motion requires including a guard in all components that disables or avoids motion when the user preference is enabled.

What is the recommended duration range for LWC motion design?▼

The recommended duration for LWC motion design is between 100 and 500 milliseconds, adhering to SLDS-based timing for purposeful transitions.

Can I use this approach for modal entrance and panel open animations?▼

This approach supports modal entrance, panel open, and button hover animations by applying purpose-driven transitions that communicate UI state changes.

Why does my LWC animation degrade accessibility?▼

Animation without purpose degrades accessibility because it can ignore user preferences; enforcing a prefers-reduced-motion guard ensures transitions remain accessible.