mcpField
V
visual-assets

visual-assets

github.com/dralgorhythmDesign & UI12863 installsUpdated 14w ago
Repository

About visual-assets

A design reference for choosing, organizing, and optimizing visual assets. It covers icon, image, and graphics formats, along with responsive delivery and performance practices.

Key features

  1. 01Icon, image, and graphics format guidance
  2. 02Image compression commands
  3. 03Responsive image practices
  4. 04SVG optimization with SVGO
  5. 05Asset organization and performance tips

Use cases

  1. 01Choosing formats for visual assets
  2. 02Compressing images for delivery
  3. 03Organizing asset folders and variants
  4. 04Improving image loading performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill visual-assets

After installing, type/visual-assetsin Claude Code to confirm it loaded.

Details

From the project README

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

  1. Lazy load below-fold images
  2. Use appropriate format for content
  3. Serve responsive sizes
  4. Consider CDN delivery
  5. Set cache headers

Comments

Markdown supported