animation-performance-retro
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
How to use
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ć.