This skill should be used when the user asks to "optimize images", "compress images", "reduce image file size", "make images smaller", "optimize PNGs", "optimize JPEGs", "speed up website images", "reduce bundle size images", or needs help with image compression for web projects. Provides workflows and scripts for batch image optimization using sharp.
Install the complete plugin to include its agents, hooks, commands, and runtime context.
Fastest path: hand this line to the coding agent doing the setup. It reads this page and installs the gemskills plugin, which ships this skill with everything it relies on.
Click anywhere on the prompt to copy.
Choose a runtime, then follow its setup steps. This installs the complete gemskills plugin.
COMPLETE PLUGIN
Example session using the verified commands above.
The portable SKILL.md on its own, without the plugin’s hooks, agents, commands, and companion skills. Use it only when you intentionally want the narrower path.
No required companion skills are declared.
Use this agent to create images, SVG graphics, visual content, presentation decks, and video. It supports Google (Nano Banana Pro / gemini-3-pro-image, Veo 3.1), OpenAI (gpt-image-2.5-flare / Sunburst opt-in), and xAI (Grok Imagine image plus grok-imagine-video-1.5), selected with --provider or auto-picked by available keys. For ElevenLabs audio (voiceovers, sound effects, and music), use the core:content-specialist agent instead.
UI and interface design agent. Use this agent when the user asks to "design a component", "create UI", "style a page", "set up shadcn", "implement dark mode", "review UI accessibility", "create a mockup", "design a game HUD", "build a TV app interface", or "add controller navigation". Covers design systems, ten-foot UI, and Pencil mockups. Not for performance work (use optimizer) or 3D scenes (use creative-developer).
Performance specialist for profiling, bundle analysis, Core Web Vitals, and image optimization. Use this agent when the user asks to "fix our LCP", "reduce bundle size", "profile this bottleneck", "make animations less janky", "optimize these images", or "run a full performance audit" — especially with a constraint to preserve the existing design. Not for visual redesign (use designer) or security review (use code-auditor).
Creative 3D web developer for Three.js and React Three Fiber, including diegetic and world-space UI. Use this agent when the user asks to "create a 3D scene", "build a Three.js demo", "write a shader", "add physics to a scene", "build a WebGL prototype", or "optimize 3D performance". Covers R3F, Drei, GLSL, TSL, and 3D asset pipelines. Not for 2D interface design (use designer).
Pass the canonical page to a teammate or keep it close for later.