interaction-design

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

1. Zainstaluj skill interaction-design w swoim projekcie agenta lub środowisku Claude/Copilot, dodając go do listy dostępnych umiejętności.

2. Zidentyfikuj elementy UI, które chcesz ulepszyć — przyciski wymagające sprzężenia zwrotnego, przejścia między stronami, stany ładowania lub gesty użytkownika.

3. Zastosuj zasadę ruchu celowego: ruch powinien komunikować (potwierdzać akcje, pokazywać orientację, kierować uwagę), a nie tylko dekorować interfejs.

4. Wybierz odpowiedni czas animacji na podstawie typu interakcji — 100-150ms dla mikro-sprzężenia zwrotnego (hover, klik), 200-300ms dla małych przejść (toggle, dropdown), 300-500ms dla większych zmian (modal, zmiana strony).

5. Użyj rekomendowanych funkcji easing do kontroli przyspieszenia ruchu — ease-out do wejścia elementów, ease-in do wyjścia, ease-in-out do przejść między stanami, spring do efektów playful.

6. Implementuj konkretne wzorce: mikrointerakcje przycisków, ekrany skeleton, systemy powiadomień, interfejsy drag-and-drop, animacje triggered scrollem oraz stany hover i focus.