Adds purposeful animations, micro-interactions, and motion effects to existing UI features.
npx skills add https://github.com/po4yka/blog --skill animate-po4yka
Please help me install this Agent Skill. Skill: animate Source: https://github.com/po4yka/blog/tree/main/.agents/skills/animate Command: npx skills add https://github.com/po4yka/blog --skill animate-po4yka
High-intent search queries and answers about installing and using this skill.
Start by auditing the feature for missing feedback, abrupt state changes, and unclear relationships. Then plan one hero animation plus feedback and transition layers, and implement with transform and opacity using 200-300ms durations for state changes.
Use ease-out curves like cubic-bezier(0.25, 1, 0.5, 1) or cubic-bezier(0.16, 1, 0.3, 1) for natural deceleration. Avoid bounce and elastic curves, which feel dated and draw attention to the animation itself.
Use CSS transitions and keyframes for simple declarative state changes. Use the Web Animations API, Framer Motion for React, or GSAP when you need programmatic control, complex sequences, or interactive gestures.
Wrap animations in a prefers-reduced-motion media query that reduces durations to near zero and disables iteration. Every animation must have a non-animated alternative so motion-sensitive users get an equivalent experience.
Jank usually comes from animating layout properties like width, height, top, or left instead of transform and opacity. Keep feedback durations under 500ms, use will-change sparingly, and verify 60fps on target devices.
vobaseAmplify visual impact of UI designs across typography, color, and motion.
adbertramRun Google Lighthouse audits for website performance, accessibility, and SEO metrics.
effiemincerAmplify visual elements in user interfaces with concrete typography, color, and spacing notes.
oborchersOptimize perceived speed with optimistic UI, skeleton screens, and performance budgets.
