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.
Create a skill called "Font Surgeon". When I provide font files (TTF, OTF, WOFF, WOFF2) or a Google Fonts URL, optimize them for web use. Subset fonts to only the character sets I need (default: latin, let me add latin-extended, cyrillic, etc.). Convert to WOFF2 format. Generate optimized @font-face CSS declarations with font-display:swap. Generate preload link tags for the most critical font weights (typically regular and bold). Create a CSS fallback font with matched metrics (ascent-override, descent-override, line-gap-override, size-adjust) to minimize CLS during font loading. If given a Google Fonts URL, download the fonts for self-hosting and generate the complete self-hosted setup. Output: optimized font files, complete CSS, preload HTML tags, and a before/after file size report.
Give your Claw your font files (or a Google Fonts URL), and it handles
the entire font optimization pipeline: subsets to only the characters
your site actually uses, converts to woff2, generates @font-face
declarations with proper font-display strategy, creates preload hints,
and builds a fallback font with matched metrics to prevent layout shift.
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.
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.