Add accessible micro-interactions and state transitions to UI workflows.
npx skills add https://github.com/ceshez/VELAR --skill animate-ceshez
Please help me install this Agent Skill. Skill: animate Source: https://github.com/ceshez/VELAR/tree/main/.agents/skills/animate Command: npx skills add https://github.com/ceshez/VELAR --skill animate-ceshez
It prevents interfaces from feeling unresponsive or confusing by adding purposeful animations that provide feedback, guide attention, and smooth abrupt UI changes.
prefers-reduced-motion and preserves non-animated alternatives while maintaining performance (60fps goals) using transform/opacity.Use the animate skill to review a specific UI feature you’re building and systematically add entrance animations, micro-interactions, and state transitions while keeping reduced-motion and performance constraints in mind.
High-intent search queries and answers about installing and using this skill.
Smooth state transitions replace jarring show/hide and expand/collapse behavior with natural fade/slide animations. By applying purposeful motion with correct timing, these transitions guide user attention and prevent interfaces from feeling confusing or unresponsive.
To ensure UI motion design respects prefers-reduced-motion accessibility requirements, implement non-animated fallbacks alongside your micro-interactions. This preserves usability for sensitive users while maintaining performance goals of 60fps using transform and opacity properties.
Micro-interactions prevent interfaces from feeling unresponsive by providing immediate visual feedback for clicks, hovers, loading, and validation. These purposeful animations help users understand what happened and clearly indicate what action to take next.
Yes, you can use transform and opacity transitions to maintain 60fps performance for scroll and reveal effects. Prioritizing these properties avoids layout thrashing and ensures smooth, jank-free entrance animations during user scrolling and state changes.
You should not use animation in user interface workflows when users have prefers-reduced-motion enabled, requiring non-animated fallbacks. Additionally, avoid decorative motion that fails to provide functional UI feedback, guide attention, or smooth abrupt state changes.
elophantoEnforce Tailwind defaults and accessible component constraints in UI reviews.
deomiarnValidate UI components with TypeScript, design token, responsiveness, accessibility, and animation checks.
beardcoderCreate composited CSS animations with scroll-driven effects and reduced-motion fallbacks.
Ender-Wiggin2019Plan and implement CSS and JavaScript animations across UI interaction categories.