# UI Dynamic Interactions

> Crafting engaging animations and transitions that make an interface feel responsive and alive.

- Skill: `jcorpac/ui-dynamic-interactions` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jcorpac/ui-dynamic-interactions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jcorpac/ui-dynamic-interactions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jcorpac (https://skillmd.com/u/jcorpac)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jcorpac/ui-dynamic-interactions

---


# Dynamic Interactions

Interactions should provide feedback and delight without being distracting. This skill covers the "Vibe" of the UI.

## The Interaction Pipeline
1.  **Trigger**: User action (Click, Hover, Scroll).
2.  **Feedback**: Intermediate state (Active button, Loading spinner).
3.  **Completion**: Final transition (Modal open, Content swap).

## CSS vs. JS Animations
- **CSS**: Best for simple state transitions (`transform`, `opacity`). High performance (handled by the compositor).
- **Web Animations API (JS)**: Best for complex, sequenced animations that require logic or randomization.

## Best Practices
- **Staggering**: Animate list items one after another for a more polished feel.
- **Easing**: Avoid `linear` easing. Use `ease-out` for items entering and `ease-in` for items exiting.
- **Respect Preferences**: Always wrap animations in `@media (prefers-reduced-motion: no-preference)`.