Compress, convert, and generate srcsets for every image in one pass
Images are half the weight of the average web page. This recipe takes a folder of images and outputs optimized WebP/AVIF versions at multiple breakpoint widths, with the responsive HTML picture elements ready to paste.
Create a skill called "Image Squeeze". When I give you a directory of images or a website URL, process every image: compress it, convert to WebP and AVIF formats (keeping the original as a fallback), generate responsive variants at multiple widths (default: 400, 800, 1200, 1600 pixels), and output proper HTML `<picture>` elements with srcset, sizes, width, height, and loading="lazy" attributes. Let me configure quality targets (default: WebP 80, AVIF 65) and breakpoint widths. Generate a before/after report showing file sizes, format conversions, and total bytes saved. Organize output files with a clear naming convention (filename-400w.webp, filename-800w.avif, etc.).
Point your Claw at a directory of images (or a live site URL), and it
processes everything: compresses, converts to modern formats with fallbacks,
generates responsive srcset variants, and outputs the HTML. Clients uploading
5MB photos straight from their camera? Handled.
Subset, preload, and self-host web fonts without the FOUT
Font loading causes flash of unstyled text, layout shifts, and GDPR headaches with Google Fonts. This recipe takes your fonts, subsets them to only the characters you use, generates optimal loading strategies, and creates fallback fonts with matched metrics — eliminating CLS.
Diagnose and fix slow SQL without being a DBA
Paste a slow query and get back a diagnosis in plain English — what's slow, why it's slow, and which fixes are most likely to help. Reads EXPLAIN plans so you don't have to. Suggests indexes, rewrites, and pre-aggregation strategies.
Auto-generate proxies the moment footage lands
Choppy playback, laggy scrubbing, and unusable timelines — even on strong machines — often comes down to editing long-GOP or heavy codecs at high resolution without proxies. This recipe generates proxies automatically whenever new camera originals appear, so every project starts edit-ready instead of debug-ready.
Keep media caches from eating your SSD and slowing your apps
Media cache and disk caches balloon over time, causing storage emergencies and performance regressions. This recipe turns cache cleanup from a panic action into a controlled, scheduled maintenance job — for Adobe Premiere Pro, After Effects, and similar tools.