Plan motion design with hero moments, feedback layers, and accessibility constraints.
npx skills add https://github.com/duggal1/Sapphire-cli --skill animate-duggal1
Please help me install this Agent Skill. Skill: animate Source: https://github.com/duggal1/Sapphire-cli/tree/main/internal/skills/bundled/animate Command: npx skills add https://github.com/duggal1/Sapphire-cli --skill animate-duggal1
Designers and developers often add motion without a clear goal, resulting in inconsistent feedback and less usable interfaces.
Draft a motion brief for a new feature that defines the hero moment, feedback layers, and accessibility constraints.
High-intent search queries and answers about installing and using this skill.
Plan motion design for a UI feature by identifying the hero moment, feedback layers, and accessibility constraints. This creates a purposeful motion brief that ensures consistent feedback and clear implementation guidance for frontend engineers.
Micro-interactions are entrance, exit, and state-change animations like button presses or form focus. They add UX value by improving clarity and providing immediate user feedback during transitions and interactions.
Make frontend animations accessible by applying motion guidelines that explicitly respect prefers-reduced-motion constraints and performance budgets. This ensures UI transitions remain usable for users with motion sensitivities.
Yes, this motion planning approach works for automated workflows by outputting actionable motion briefs that define states and transitions. The structured guidance can be directly consumed by frontend engineers and automated implementation pipelines.
A hero moment in UI motion design is the primary animated interaction that guides user attention. Identifying it during motion planning ensures animation adds clear value for feedback and transitions rather than acting as distracting decoration.
Set performance budgets for UI animations by applying motion guidelines during the planning phase. This ensures micro-interactions and transitions are defined within explicit performance constraints, keeping frontend interfaces fast and responsive.
armanisadeghiAnalyze user flows and define UX requirements across web, iOS, and Android.
refly-aiCreate cohesive frontend design blueprints with typography, color tokens, motion patterns, and reusable CSS.
jac007xAudit Walmart design-system compliance across tokens, components, and spacing.
Ender-Wiggin2019Plan and implement CSS and JavaScript animations across UI interaction categories.
