Review a feature and plan purposeful animations with accessibility and performance constraints.
npx skills add https://github.com/yinshucheng/vibeflow --skill animate-yinshucheng
Please help me install this Agent Skill. Skill: animate Source: https://github.com/yinshucheng/vibeflow/tree/main/.claude/skills/animate Command: npx skills add https://github.com/yinshucheng/vibeflow --skill animate-yinshucheng
Reviews a feature and enhances it with purposeful animations, micro-interactions, and motion effects to improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
Describe a motion plan for a given feature including entrance, micro-interactions, and accessibility considerations.
High-intent search queries and answers about installing and using this skill.
Plan UI motion design by defining entrance, micro-interactions, and state transitions while applying prefers-reduced-motion constraints. This ensures animations guide attention and provide feedback without harming accessibility.
The best way to add purposeful micro-interactions is to review the feature, identify where motion clarifies relationships, and implement feedback and delight layers. This improves usability without degrading performance.
Structure an animation strategy by defining hero moments, feedback layers, transition layers, and delight moments. Specify timing, easing, and performance budgets for navigation transitions and form interactions.
Yes, adding UI animation requires prefers-reduced-motion support and performance budget validation. Verify animations run at 60fps, support reduced motion, and do not block interactions to ensure accessibility and quality.
You need motion design in a product UI design review when a feature lacks motion and requires purposeful animations to improve usability. Use it to enhance onboarding, form interactions, and navigation transitions.
Use CSS and JS techniques for entrance animations and state transitions by specifying exact timing and easing. This technical guidance ensures motion effects provide feedback and delight within performance budgets.
ydnikolaevExtract project information through structured stakeholder interviews into a discovery brief.
ChegginIdentify and implement purposeful animations with timing, easing, and accessibility.
shaunandrewsAudit UI/UX designs for visual hierarchy, spacing, typography, color, motion, and accessibility.
deomiarnValidate UI components with TypeScript, design token, responsiveness, accessibility, and animation checks.
