Implement CSS-first hover, loading, modal, and gesture transitions with reduced-motion support.
npx skills add https://github.com/Dinxeshh/agent-skills --skill flow-dinxeshh
Please help me install this Agent Skill. Skill: Flow Source: https://github.com/Dinxeshh/agent-skills/tree/main/skills/flow Command: npx skills add https://github.com/Dinxeshh/agent-skills --skill flow-dinxeshh
Many UI interactions feel static or inconsistent, so Flow brings hover, press, loading, modal, toast, and page transitions to life with purposeful motion while honoring reduced-motion preferences and 60fps performance targets.
references/animation-catalog.md and references/easing-guide.md for duration and curve selection.references/modern-css-animations.md) while ensuring system-level reduced-motion fallbacks from references/motion-accessibility-anti-patterns.md.references/motion-system-design-patterns.md, making Flow ideal for SaaS, e-commerce, and mobile UI polish.Ask Flow to polish the CTA hover and loading states with CSS transforms, canonical easing, and a reduced-motion alternative.
High-intent search queries and answers about installing and using this skill.
CSS micro animations for hover and loading states are implemented using canonical easing and opacity or transform-focused transitions. This approach ensures smooth UI motion while maintaining 60fps performance targets across SaaS and mobile experiences.
Reduced-motion preferences for page transitions are handled by providing system-level fallbacks using the prefers-reduced-motion media query. This ensures gesture choreography and route transitions remain accessible without sacrificing necessary UX functionality.
Modal transitions and drag or swipe feedback are created using modern CSS animation APIs. These APIs enable gesture choreography and route transitions while automatically applying performance-safe verification workflows to maintain smooth interactions.
Tokenized motion systems can be used for UI polish in e-commerce experiences by documenting and auditing motion tokens alongside performance guards. This ensures consistent micro animations and transition application across the interface.
CSS transform and opacity transitions may fail to maintain 60fps if canonical easings and performance-safe verification workflows are not applied. Ensuring proper duration and curve selection from animation catalogs resolves these performance issues.
thejordanleopoldCodify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.
oliverjone01-devDesign and implement cinematic motion and high-performance rendering with progressive enhancement.
ZiadNagarDefine motion tokens, choreography patterns, and reduced-motion support for design systems.
arthtyagiDesign natural web motion for UI elements with easing and reduced-motion support.