Agent skill
visual-assets
Create and manage visual assets. Use when creating graphics, icons, or images. Covers asset formats and optimization.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/visual-assets
SKILL.md
Visual Assets
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?