Implement purposeful LWC transitions using transform and opacity with reduced-motion guards.
npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-motion
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
Animation without purpose wastes cycles and can degrade accessibility; this skill enforces purposeful motion in Lightning Web Components, improving UX and performance.
Add accessible motion to a Lightning Web Component by applying a purpose-driven transition that respects prefers-reduced-motion.
High-intent search queries and answers about installing and using this skill.
Accessible motion in Lightning Web Components uses purposeful transitions that communicate state changes while respecting user preferences through a prefers-reduced-motion guard.
LWC transitions should use only transform and opacity animations to ensure performance and compatibility with SLDS-based timing constraints.
Handling prefers-reduced-motion requires including a guard in all components that disables or avoids motion when the user preference is enabled.
The recommended duration for LWC motion design is between 100 and 500 milliseconds, adhering to SLDS-based timing for purposeful transitions.
This approach supports modal entrance, panel open, and button hover animations by applying purpose-driven transitions that communicate UI state changes.
Animation without purpose degrades accessibility because it can ignore user preferences; enforcing a prefers-reduced-motion guard ensures transitions remain accessible.
padjeiGenerates SLDS-compliant UI code using verified blueprints, styling hooks, utility classes, and icons.
programadorisgodGuide accessible, performant UI motion with CSS, keyframes, and Framer Motion.
sfdc-brendanCreate SLDS 2 compliant LWC components using --slds-g-* hooks.
princejoogieDesignes and implements web animations and motion systems for UI interfaces.
