菜单
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
| name | rendering-animate-svg |
| description | Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations. |
Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a <div> and animate the wrapper instead. Important for 8-bit components with pixel art icons and animations.
Incorrect (animating SVG directly - no hardware acceleration):
function PixelSpinner() {
return (
<svg
className="animate-spin"
viewBox="0 0 16 16"
>
<rect x="2" y="2" width="4" height="4" fill="currentColor" />
</svg>
)
}
Correct (animating wrapper div - hardware accelerated):
function PixelSpinner() {
return (
<div className="animate-spin">
<svg
viewBox="0 0 16 16"
width="16"
height="16"
>
<rect x="2" y="2" width="4" height="4" fill="currentColor" />
</svg>
</div>
)
}
For 8-bit icon components with hover effects:
function RetroIcon({ icon: Icon, className }: RetroIconProps) {
return (
<div className={cn("transition-transform hover:scale-110", className)}>
<Icon />
</div>
)
}
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.