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".
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryData & analyticsStars0
About this skill
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".
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
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".
About this listing
Category
Data & analytics
Reported license
Apache-2.0
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI