Web Assets Optimization

Optimize the assets the app actually ships: images, video, animated media, fonts, and SVG. Prefer safe, measurable wins: smaller files, modern formats, responsive markup, stable layout, deliberate loading order, and framework-compatible delivery.

Leading words for this skill:

• pipeline — extend the project's existing asset tooling; do not replace a working optimizer.
• clean — write final asset paths only; leave no temp folders, unused variants, orphaned heavy sources, or ffmpeg two-pass logs.
• strategy — every asset gets a deliberate decision from the matrix in Step 3 (importance x placement x loading context); no blanket policies.
• LCP — treat LCP candidates (hero image, video poster, CSS background) as highest priority; never lazy-load them.

When not to use

• The user wants generated artwork from prompts → use an image-generation skill.
• The ask is a visual redesign with no asset-performance work.
• Assets are already transformed by a CMS/CDN pipeline, unless the task is markup or config around that CDN.
• Video editing/production work (cuts, color grading, subtitles) — this skill only compresses and delivers.
• Sources are proprietary, or destructive edits are requested without backups.