fec-motion-interaction

Standardize frontend motion patterns for accessible, high-performance UI transitions.

21|3|Updated Mar 17, 2026

Search Tags:#performance #accessibility #frontend #gsap #lottie #framer-motion #motion-design

Ready to run

npx skills add https://github.com/bovinphang/frontend-craft --skill fec-motion-interaction

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fec-motion-interaction
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-motion-interaction
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-motion-interaction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides standardized guidelines for designing, implementing, and auditing frontend motion and transitions across frameworks, ensuring accessibility, performance, and consistency.

Core Features & Use Cases

Standardized motion patterns across Framer Motion, GSAP, Lottie, and CSS animations.
Guidelines for motion intensity, performance budgets, and accessibility fallbacks.
Use Case: review and implement UI interactions like entrances, scroll-based animations, and micro-interactions with verifiable criteria.

Quick Start

Create a motion plan for a React dashboard that uses Framer Motion for panel entrances and uses prefers-reduced-motion for accessibility.

Frequently Asked Questions about fec-motion-interaction

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

FAQPage Schema

How do I standardize frontend motion and transitions across React and Vue?▼

Apply standardized motion guidelines to define tool choices like Framer Motion, GSAP, Lottie, or CSS transitions for component entrances, page transitions, and scroll-based animations. This ensures consistent, accessible, high-performance UI interactions across React, Vue, and other frameworks.

What is the best way to handle prefers-reduced-motion for accessibility in web animations?▼

Handle prefers-reduced-motion by applying reduced-motion safeguards and accessibility fallbacks within your motion design plan. This ensures UI transitions meet accessibility validation criteria while maintaining standardized frontend motion patterns.

How do I choose between GSAP, Lottie, and Framer Motion for UI micro-interactions?▼

Choose between GSAP, Lottie, and Framer Motion by applying standardized motion guidelines that evaluate performance budgets, motion intensity, and framework compatibility. This ensures high-performance UI micro-interactions meet verifiable validation criteria.

Does this motion design review approach work for both page transitions and scroll-based animations?▼

Yes, this motion design review approach works for page transitions and scroll-based animations by defining verifiable criteria, performance budgets, and tool choices. It audits frontend motion patterns to ensure accessible, high-performance UI transitions across frameworks.

How do I set performance budgets for frontend animations and component entrances?▼

Set performance budgets for frontend animations and component entrances by applying standardized motion design guidelines. This process defines motion intensity limits and validation criteria to ensure high-performance UI transitions across your chosen frameworks.