rendering-animate-svg

SKILL.md

Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a and animate the wrapper instead. Important for 8-bit components with pixel art icons and animations.

This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations, which is especially noticeable for retro pixel art animations.

Enveloppez les éléments SVG animés dans un div pour activer l'accélération matérielle. À appliquer lors de l'animation d'icônes ou d'éléments SVG, en particulier dans les composants rétro 8 bits avec des animations pixel art. Source : theorcdev/8bitcn-ui.

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor

Voir l'original