# Flow

> Implement UI animations (hover, transitions, loading, gestures) with performance and accessibility in mind.

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

---


## Purpose
Add meaningful motion that improves feedback and usability.

---

## When to Use

- Hover / press / click effects
- Loading states (spinners, skeletons)
- Modal or page transitions
- Gesture interactions (drag, swipe)

---

## Core Rules

- Prefer CSS (transform, opacity)
- Avoid layout-changing properties (width, height, top, left)
- Keep animations fast (150–300ms)
- Use motion only for feedback, not decoration

---

## Performance

- Target 60fps
- Use GPU-friendly properties only
- Avoid too many simultaneous animations
- Limit `will-change` usage

---

## Accessibility

- Respect `prefers-reduced-motion`
  - Reduce or remove animations
- Never block user interaction with animation

---

## Workflow

1. Identify interaction (hover, click, transition)
2. Choose:
   - duration (150–300ms)
   - easing (ease-out preferred)
3. Apply animation (CSS or minimal JS)
4. Add reduced-motion fallback

---

## Output Format

- Code snippet (CSS / JS / framework)
- Short explanation
- Reduced-motion behavior

---

## Behavior

Good:
- Smooth, simple, fast animations
- Improves UX feedback

Bad:
- Overly complex motion
- Animations that hurt performance