skills.rest
toddbadams
toddbadamsCOMMUNITY
Explore all skills by this author →
GitHub

visual-assets

Guide creation and management of visual assets with format and optimization techniques.

Updated Aug 27, 2026
Search Tags:#design#optimization#images#webp#icons#svg#visual assets
One-click install
npx skills add https://github.com/toddbadams/SBFoundation --skill visual-assets-toddbadams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-assets
Source: https://github.com/toddbadams/SBFoundation/tree/main/.claude/skills/design/visual-assets
Command: npx skills add https://github.com/toddbadams/SBFoundation --skill visual-assets-toddbadams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps users create and manage various visual assets, ensuring consistency and efficiency in design workflows.

Core Features & Use Cases

  • Asset Format Guidance: Provides information on optimal formats for icons, images, and graphics (SVG, JPEG, PNG, WebP, AVIF, Lottie).
  • Optimization Techniques: Offers command-line examples for compressing images and optimizing SVGs.
  • Use Case: A designer needs to create a set of icons for a new web application and wants to know the best format and optimization techniques to ensure fast loading times and scalability.

Quick Start

Use the visual-assets skill to learn about optimizing PNG images for web use.

Frequently Asked Questions about visual-assets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best image format for web icons and graphics?▼

WebP and AVIF are optimal image formats for web use, offering high compression and quality. SVG is recommended for icons and graphics to ensure scalability and fast loading times, while Lottie handles animated visual assets.

How do I optimize SVGs and compress images for web applications?▼

You can optimize images and SVGs using command-line examples for compression. These techniques reduce file sizes for visual assets like icons and graphics, ensuring fast loading times and scalability for web applications.

When do I need to use WebP or AVIF over PNG and JPEG?▼

You need WebP or AVIF over PNG and JPEG when optimizing web images for better compression and quality. These modern formats provide superior optimization techniques for visual assets, ensuring faster loading times than traditional formats.

How should I organize visual asset files like icons and images?▼

You should organize visual asset files like icons and images following specific recommendations for file organization and performance. Proper asset management ensures consistency and efficiency across design workflows.

Can I use Lottie for animated graphics in my design workflow?▼

Yes, you can use Lottie for animated graphics in your design workflow. It is included among the optimal formats for visual assets, alongside SVG, WebP, and AVIF, ensuring consistency and efficiency.

Related Skills

Explore More Design & Creative Skills→
zcacereszcaceres
7

nano-banana-generator

Generate custom graphic assets via Google's Gemini image generation API.

Community
Intermediate
zm2231zm2231

asset-optimization

Convert design assets to WebP, AVIF, and responsive variants.

Community
Advanced
woweyawoweya
1

symfony-ux-icons

Render scalable SVG icons in Symfony Twig templates via Iconify and local assets.

Community
Intermediate
hathbangerhathbanger

brand-architect

Generate SVG logos, color palettes, and typography from a brand brief.

Community
Intermediate