skills.rest
rajitsaha
rajitsahaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

motion-designer

Generate UI animation specs with duration tokens, easing curves, and reduced-motion fallbacks.

10|5|Updated Apr 10, 2026
Search Tags:#performance#accessibility#micro-interactions#motion design#framer motion#ui animation#reduced motion
One-click install
npx skills add https://github.com/rajitsaha/100xprism --skill motion-designer-rajitsaha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-designer
Source: https://github.com/rajitsaha/100xprism/tree/main/modules/motion-designer
Command: npx skills add https://github.com/rajitsaha/100xprism --skill motion-designer-rajitsaha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the common issue of teams adding decorative, poorly performing, or inaccessible UI animations that fail to guide user attention, waste engineering effort, and violate accessibility standards like WCAG.

Core Features & Use Cases

  • Purpose-Driven Animation Framework: Defines 5 core jobs motion must serve (orient, acknowledge, express state, guide attention, express brand) to eliminate unnecessary decorative animations.
  • Standardized Specs & Recipes: Provides pre-defined duration tokens, easing curves, and cross-framework code snippets for Framer Motion, GSAP, and CSS to speed up implementation.
  • Built-in Guardrails: Includes performance rules to maintain 60fps and mandatory reduced-motion fallbacks to ensure accessibility for all users.
  • Use Case: A product team building a React e-commerce dashboard can use this Skill to spec button press micro-interactions, modal transitions, and scroll-driven product card reveals that align with their brand while passing accessibility audits.

Quick Start

Use the motion-designer skill to generate a complete animation specification for your new mobile app onboarding flow, including easing tokens, Framer Motion recipes, and reduced-motion fallbacks.

Frequently Asked Questions about motion-designer

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

FAQPage Schema
How do I ensure UI animations meet WCAG 2.3.1 accessibility standards?▼

Accessible UI animations require mandatory reduced-motion fallbacks to meet WCAG 2.3.1 standards. This ensures users with vestibular disorders can disable non-essential movement and still interact with the interface.

What is the best way to spec performant micro-interactions for React?▼

Spec performant React micro-interactions using standardized duration tokens, easing curves, and Framer Motion code recipes. This approach eliminates non-purposeful movement while maintaining 60fps performance.

Does this motion design framework work with SwiftUI and CSS interfaces?▼

Yes, the framework supports SwiftUI and CSS interfaces by delivering cross-framework code recipes and standardized animation specifications. This ensures consistent micro-interactions and page transitions across multiple frontend technologies.

How do I add scroll-driven animations without dropping below 60fps?▼

Maintain 60fps during scroll-driven animations by applying built-in performance guardrails and standardized easing tokens. These rules eliminate poorly performing UI animations and ensure smooth rendering during scroll-driven product reveals.

Why do decorative UI animations fail to guide user attention effectively?▼

Decorative UI animations fail because they lack a purpose-driven framework, wasting effort without orienting the user. Effective motion must serve core jobs: orient, acknowledge, express state, guide attention, or express brand.

When should I not use micro-interactions in frontend development workflows?▼

Avoid micro-interactions when they fail to serve core motion jobs: orient, acknowledge, express state, guide attention, or express brand. Non-purposeful animations waste engineering effort and risk violating accessibility standards.

Related Skills

Explore More Design & Creative Skills→
KyaniteLabsKyaniteLabs
3

micro-motion

Enforce compositor-safe properties and reduced-motion policies for UI transitions.

Official
Advanced
deomiarndeomiarn

framer-animations

Automate Framer Motion micro-animations for section reveals, staggered lists, and hover interactions.

Community
Intermediate
truongnattruongnat

motion-design-pro

Coordinate GSAP timelines, Framer Motion variants, and CSS animations for 60fps UI motion.

Community
Advanced
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced