agentleFS
Sign inStart free
DROOdotFOODROOdotFOO/agent-skills/skills/web-asset-generator/SKILL.md

web-asset-generator

Skill1 starsChanged 2 months agoMITView on GitHub

Generate and optimize web assets: favicons, app icons, OG/social images, and devicons. TRIGGER when: user asks to create favicons, generate app icons (iOS, Android, PWA), build OG/social media images, optimize SVG/PNG/WebP, create icon sprite sheets, convert logos to icon sets, or work with devicons/technology icons. DO NOT TRIGGER when: user is designing UI layouts or component architecture (use design-ux skill), writing CSS/Tailwind styles (use droo-stack skill), or building image processing pipelines unrelated to web assets.

We split this skill into the rules it gives an agent

2 rules. 0 are common, 2 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 6 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Source-first: Always keep the highest-resolution source file.

    line 88
  2. Distinctive:

    Lossless then lossy: Run lossless optimization first (optipng/svgo), then lossy (pngquant) if size still matters

    line 92

“Common” is measured: kept by at least 6 in 10 of the 6 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

web-asset-generator

Generate production-ready icon sets, social images, and optimized assets from source images. One source file in, every platform-specific variant out.

What You Get

  • Favicon generation (ICO, PNG, SVG) for all browsers and sizes
  • Apple touch icons, Android adaptive icons, PWA manifest icons
  • OG/social media images with proper dimensions and metadata tags
  • Devicon integration and custom technology icon creation
  • Image optimization pipelines (SVGO, pngquant, sharp, WebP)
  • Format selection guidance (when to use SVG vs PNG vs WebP vs ICO)

When to Use

  • Generating favicon sets from a source logo or SVG
  • Creating iOS/Android/PWA app icon variants
  • Building OG images and Twitter card assets
  • Converting logos into lightweight icon sets
  • Optimizing SVG files (removing editor cruft, minifying)
  • Compressing PNGs or converting to WebP
  • Creating devicon/technology icon sprites

When NOT to Use

  • UI layout and component design -- use design-ux
  • CSS/Tailwind styling patterns -- use droo-stack
  • General image editing (photo manipulation, filters) -- not a skill concern
  • Video or animation assets -- out of scope

Reading Guide

Working onRead
Favicons, Apple touch, Android, PWA manifestfavicon-and-icons.md
SVG cleanup, PNG crush, WebP, format choiceimage-optimization.md
OG tags, Twitter cards, social dimensionssocial-images.md
Devicon libraries, logo sprites, monochromedevicons.md

See also

  • design-ux -- for design token systems, color palettes, and accessibility
  • droo-stack -- for code-level patterns in TypeScript, Python, and shell

Tool Landscape

ToolLanguageUse case
sharpNodeResize, convert, compress images
svgoNodeSVG optimization and cleanup
imagemagick (convert)CLIFormat conversion, ICO generation
optipngCLILossless PNG optimization
pngquantCLILossy PNG compression (8-bit)
real-favicon-generatorWeb/CLIFull favicon package from one image
pwa-asset-generatorNodePWA splash screens and icons
PillowPythonProgrammatic image generation
cairosvgPythonSVG to PNG/PDF rasterization

Common Pitfalls

MistakeWhy It FailsBetter Approach
Single favicon.ico onlyMissing Apple touch, Android, PWAGenerate full set: ICO + PNG + SVG + manifest
Huge unoptimized PNG faviconsSlow page load, poor Lighthouse scoreCompress with pngquant, serve SVG where able
OG image wrong dimensionsGets cropped or letterboxed on social platformsUse 1200x630 for OG, 1200x675 for Twitter
SVG with embedded raster imagesDefeats SVG purpose, huge file sizeTrace rasters to paths or use PNG instead
No maskable icon for AndroidIcon looks tiny in adaptive icon circleAdd "purpose": "maskable" variant to manifest
Serving WebP without PNG fallbackBreaks Safari <14, older browsersUse <picture> element with PNG fallback

Key Conventions

  • Source-first: Always keep the highest-resolution source file; generate variants from it
  • Automate generation: Script the conversion pipeline; never hand-resize icons
  • Format-appropriate: SVG for simple logos, PNG for complex/photographic, WebP for modern browsers
  • Manifest-complete: PWA manifest must include all required icon sizes with correct purpose fields
  • Lossless then lossy: Run lossless optimization first (optipng/svgo), then lossy (pngquant) if size still matters

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free