web-assets-optimization

Name: web-assets-optimization
Availability: InStock
Author: Firzus

Optimize web assets with format-specific conversions and responsive markup.

1|Updated May 12, 2026

Search Tags:#web performance #asset optimization #responsive images #lcp #video encoding #svg optimization #font subsetting

Ready to run

npx skills add https://github.com/Firzus/agent-skills --skill web-assets-optimization

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-assets-optimization
Source: https://github.com/Firzus/agent-skills/tree/main/skills/web/web-assets-optimization
Command: npx skills add https://github.com/Firzus/agent-skills --skill web-assets-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you reduce web app asset weight, prevent layout shifts, and deliver images, video, fonts, and SVGs in formats that load faster and display more consistently.

Core Features & Use Cases

Image optimization: Creates modern AVIF/WebP/JPEG or PNG variants, adds responsive markup, and preserves dimensions for stable rendering.
Video and animation delivery: Re-encodes videos, replaces bulky GIFs with better formats, and generates posters and playback-friendly markup.
Font and SVG handling: Subsets and self-hosts fonts as WOFF2, applies preload and fallback strategies, and optimizes SVGs without breaking responsiveness.
Use Case: A marketing site with slow hero media can use this Skill to shrink the LCP image, improve loading priority, and remove unnecessary heavy originals.

Quick Start

Ask the skill to audit the project’s assets, identify the LCP candidate, and produce optimized replacements with clean markup updates.

Frequently Asked Questions about web-assets-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize web assets and improve LCP in a Next.js project?▼

To optimize web assets and improve LCP, the Skill audits your project to identify the LCP candidate, creates modern AVIF or WebP image variants, and updates responsive markup to shrink asset weight and improve loading priority.

What is the best way to convert bulky GIFs to video and generate poster images?▼

To convert bulky GIFs to video and generate posters, the Skill re-encodes animated media into playback-friendly formats and generates matching poster images to ensure faster and more consistent delivery.

Can I self-host and subset fonts as WOFF2 using Vite or Astro?▼

Yes, you can self-host and subset fonts as WOFF2 in frameworks like Vite or Astro; the Skill applies font subsetting strategies and generates preload and fallback markup for efficient delivery.

Does this approach work for optimizing SVGs without breaking responsiveness in SvelteKit?▼

Yes, SVG optimization in SvelteKit is supported; the Skill reduces SVG file size while preserving responsive scaling behavior to maintain layout stability across your application.

How do I clean up unoptimized original images after generating WebP and AVIF variants?▼

To clean up unoptimized originals, the Skill performs an asset inventory and removes unnecessary heavy original files after generating optimized AVIF, WebP, JPEG, or PNG replacements and updating the corresponding markup.