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.

アニメーション化された SVG 要素を div でラップして、ハードウェア アクセラレーションを有効にします。 SVG アイコンまたは要素をアニメーション化する場合、特にピクセル アート アニメーションを含む 8 ビット レトロ コンポーネントに適用します。 ソース: theorcdev/8bitcn-ui。

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

原文を見る