interaction-design
Projektuj płynne interakcje, animacje i stany ładowania, które zachwycają użytkowników
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia mikrointerakcji, animacji przejść i wzorców informacji zwrotnej w interfejsach użytkownika. Dodaj eleganckie efekty ruchu do przycisków, modali i komponentów, implementuj stany ładowania oraz gesty dotykowe. Zawiera wytyczne czasowe, funkcje easing i przykłady kodu dla płynnych doświadczeń użytkownika.
Jak używać
Zainstaluj skill interaction-design w swoim projekcie agenta lub środowisku Claude/Copilot, dodając go do listy dostępnych umiejętności.
Zidentyfikuj elementy UI, które chcesz ulepszyć — przyciski wymagające sprzężenia zwrotnego, przejścia między stronami, stany ładowania lub gesty użytkownika.
Zastosuj zasadę ruchu celowego: ruch powinien komunikować (potwierdzać akcje, pokazywać orientację, kierować uwagę), a nie tylko dekorować interfejs.
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).
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.
Implementuj konkretne wzorce: mikrointerakcje przycisków, ekrany skeleton, systemy powiadomień, interfejsy drag-and-drop, animacje triggered scrollem oraz stany hover i focus.