animation-performance-retro
Optymalizuj animacje retro do płynnego działania na GPU
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do Claude'a, który pomaga tworzyć gładkie animacje w stylu pixel art i interfejsy gier. Uczy, jak używać akceleracji sprzętowej (transform, opacity, filter) zamiast właściwości powodujących reflow (width, height, margin). Zawiera gotowe wzory dla obracających się ikon, pulsujących wskaźników ładowania i efektów mrugania. Idealny dla twórców gier, UI retro i animowanych interfejsów opartych na CSS.
Jak używać
Zainstaluj skill w swoim projekcie Claude'a, kopiując folder animation-performance-retro do katalogu .claude/skills w repozytorium.
Kiedy tworzysz animacje pixel art lub interfejs gry, wyzwij skill opisując, jakie efekty chcesz uzyskać (np. obracająca się ikona, pulsujący wskaźnik zdrowia, efekt mrugania tekstu).
Skill pokaże ci, które właściwości CSS animować (transform, opacity, filter) i których unikać (width, height, margin, top, left), ponieważ te drugie powodują reflow i spadek wydajności.
Użyj dostarczonych komponentów React jako szablonów — zawijaj animowane SVG w divy z klasami Tailwind (np. animate-spin, animate-pulse), aby włączyć akcelerację GPU.
Dla niestandardowych efektów (mruganie, skok) zdefiniuj keyframes CSS w komponencie, używając step-end lub step-start dla autentycznego wyglądu retro.
Testuj animacje w przeglądarce — GPU-accelerated transform i opacity powinny działać płynnie nawet na słabszym sprzęcie, podczas gdy animacje layout-triggering będą się jątrzyć.