Graphics

The advanced visual layer for a frontend build — where icons, imagery, Canvas, WebGL, GPU, and generative technique live, and "three.js because it looks cool" gets decided. Use after the core visual language is set, when auditing the graphics layer, or when a UI has mismatched icons, layout-shifting images, or GPU surfaces that drain the budget. The one shift: the DOM is the default and the budget — you drop to Canvas / SVG / WebGL / GPU only where the DOM genuinely cannot go, always with a fallback and a budget, and icons come from ONE coherent set — the agent reaches for the GPU as a reflex, mixes icon families, and lazy-loads the LCP hero, feeling no wrongness, so these are gated. Triggers on "icon / icon set / SVG icon / aria-hidden", "image / hero / LCP / CLS / srcset / lazy load / AVIF / WebP / blurhash / illustration", "canvas / WebGL / WebGPU / three.js / shader / GLSL / SDF / raymarching / GPU / generative / procedural / data visualization / retina / devicePixelRatio / blurry canvas".

mkdir -p ~/.claude/skills/graphics
curl -L https://claudskills.com/skills/graphics/SKILL.md \
  -o ~/.claude/skills/graphics/SKILL.md

@misc{graphics-2026,
  author    = {IamK77},
  title     = {Graphics [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/graphics/}
}