Toolverse
Wszystkie skille

fixing-motion-performance

autor: ibelick

Diagnozuj i napraw problemy wydajności animacji w interfejsach użytkownika

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Autor
ibelick
Kategoria
UX / Design
Wyświetlenia
2

O skillu

Skill do audytu i naprawy problemów wydajności animacji. Pomaga zidentyfikować i usunąć przyczyny zacinania się przejść, stutteringu animacji i nieoptymalizowanych efektów wizualnych. Analizuje kod CSS i JavaScript pod kątem layout thrashing, niewłaściwego użycia compositor properties, scroll-linked motion i blur effects. Pracuje z istniejącym stackiem technologicznym bez wymuszania migracji bibliotek.

Jak używać

  1. Aktywuj skill poleceniem /fixing-motion-performance w konwersacji, aby zastosować reguły optymalizacji animacji do całej pracy nad UI w tym czacie.

  2. Aby przeanalizować konkretny plik, użyj /fixing-motion-performance <plik> — skill przegląda kod pod kątem wszystkich reguł wydajności i zwraca listę naruszeń z dokładnymi cytatami z kodu.

  3. Dla każdego znalezionego problemu skill wyjaśnia, dlaczego ma znaczenie dla wydajności, i proponuje konkretną poprawkę na poziomie kodu.

  4. Stosuj skill podczas dodawania lub modyfikowania animacji CSS, Web Animations API, bibliotek Motion, requestAnimationFrame lub GSAP.

  5. Odwołuj się do wytycznych przy refaktoryzacji zacinających się interakcji, implementacji scroll-linked motion, animacji layout, filtrów, masek, gradientów lub CSS variables.

  6. Skill nie zmienia bibliotek animacji — optymalizuje je w ramach istniejącego narzędzia, chyba że wyraźnie poprosisz o migrację.

Podobne skille