Web asset generator
Agent skills, autonomous agents, and MCP-companions for programming
npx -y skills add DROOdotFOO/agent-skills --skill web-asset-generatorAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
5.0 KB, as published. Nobody here has run it
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 on | Read |
|---|---|
| Favicons, Apple touch, Android, PWA manifest | favicon-and-icons.md |
| SVG cleanup, PNG crush, WebP, format choice | image-optimization.md |
| OG tags, Twitter cards, social dimensions | social-images.md |
| Devicon libraries, logo sprites, monochrome | devicons.md |
See also
design-ux-- for design token systems, color palettes, and accessibilitydroo-stack-- for code-level patterns in TypeScript, Python, and shell
Tool Landscape
| Tool | Language | Use case |
|---|---|---|
| sharp | Node | Resize, convert, compress images |
| svgo | Node | SVG optimization and cleanup |
| imagemagick (convert) | CLI | Format conversion, ICO generation |
| optipng | CLI | Lossless PNG optimization |
| pngquant | CLI | Lossy PNG compression (8-bit) |
| real-favicon-generator | Web/CLI | Full favicon package from one image |
| pwa-asset-generator | Node | PWA splash screens and icons |
| Pillow | Python | Programmatic image generation |
| cairosvg | Python | SVG to PNG/PDF rasterization |
Common Pitfalls
| Mistake | Why It Fails | Better Approach |
|---|---|---|
| Single favicon.ico only | Missing Apple touch, Android, PWA | Generate full set: ICO + PNG + SVG + manifest |
| Huge unoptimized PNG favicons | Slow page load, poor Lighthouse score | Compress with pngquant, serve SVG where able |
| OG image wrong dimensions | Gets cropped or letterboxed on social platforms | Use 1200x630 for OG, 1200x675 for Twitter |
| SVG with embedded raster images | Defeats SVG purpose, huge file size | Trace rasters to paths or use PNG instead |
| No maskable icon for Android | Icon looks tiny in adaptive icon circle | Add "purpose": "maskable" variant to manifest |
| Serving WebP without PNG fallback | Breaks Safari <14, older browsers | Use <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
purposefields - Lossless then lossy: Run lossless optimization first (optipng/svgo), then lossy (pngquant) if size still matters
Gives 0 of the 12 instructions most css styling skills give
Counted across 586 of the 596 authors here whose files we hold, read 2026-08-06
- avoid excessive centered layoutsin 55 of 586, across 12 files
- bundle code into single HTML filein 54 of 586, across 14 files
- Respect prefers-reduced-motion user settingsin 52 of 586, across 35 files
- avoid purple gradientsin 51 of 586, across 11 files
- avoid uniform rounded cornersin 51 of 586, across 11 files
- avoid Inter fontin 51 of 586, across 11 files
- edit generated files to develop artifactin 50 of 586, across 10 files
- animate only transform and opacity propertiesin 43 of 586
- Make touch targets at least 44x44 pixelsin 41 of 586, across 15 files
- Ensure minimum color contrast of 4.5:1in 39 of 586, across 10 files
- use tailwind cssin 39 of 586, across 24 files
- Use SVG icons instead of emojisin 38 of 586, across 11 files
Said here and by no other author read
- keep the highest-resolution source file
- generate variants from the source file
- script the conversion pipeline
- never hand-resize icons
- use svg for simple logos
- use png for complex or photographic images
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.