Visual Assets
SkillMediaCreate and manage visual assets. Use when creating graphics, icons, or images. Covers asset formats and optimization.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Visual Assets skill
What this skill tells your AI
The instructions your AI receives, as published by nguyenhuuca/assessment in .claude/skills/design/visual-assets/SKILL.md and read by ahel’s review.
Asset Types
Icons
- SVG: Scalable, small file size, CSS styling
- Icon fonts: Easy to use, limited styling
- PNG sprites: Legacy, larger files
Images
- JPEG: Photos, complex images
- PNG: Transparency, screenshots
- WebP: Modern, smaller files
- AVIF: Newest, best compression
Graphics
- SVG: Illustrations, logos, charts
- Lottie: Animations, complex motion
Optimization
Image Compression
# WebP conversion
cwebp -q 80 input.png -o output.webp
# AVIF conversion
avifenc input.png output.avif
# PNG optimization
pngquant --quality=65-80 input.png
Responsive Images
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw">
</picture>
SVG Optimization
# SVGO optimization
svgo input.svg -o output.svg
Icon Guidelines
- Consistent stroke width
- Consistent sizing (24x24, 20x20)
- Optical alignment
- Clear at small sizes
File Organization
assets/
├── icons/
│ ├── ui/
│ └── brand/
├── images/
│ ├── originals/
│ └── optimized/
└── illustrations/
Performance Tips
- Lazy load below-fold images
- Use appropriate format for content
- Serve responsive sizes
- Consider CDN delivery
- Set cache headers
Signals
- GitHub stars
- 34
- Forks
- 25
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
visual-assets- Source
- github.com/nguyenhuuca/assessment