skills.rest
sraloff
sraloffCOMMUNITY
Explore all skills by this author →
Website𝕏@sraloffGitHub

assets-icons-fonts

Optimize icons, fonts, and images for frontend performance.

2|1|Updated Jan 20, 2026
Search Tags:#frontend#fonts#icons#svg#web-performance#asset-optimization
One-click install
npx skills add https://github.com/sraloff/gravityboots --skill assets-icons-fonts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: assets-icons-fonts
Source: https://github.com/sraloff/gravityboots/tree/main/.agent/skills/assets-icons-fonts
Command: npx skills add https://github.com/sraloff/gravityboots --skill assets-icons-fonts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Asset optimization for UI resources (icons, fonts, and images) to improve frontend performance and accessibility.

Core Features & Use Cases

  • Icon optimization: Use inline SVGs or sprite sheets to reduce DOM bloat and improve accessibility.
  • Font loading: Prefer WOFF2 with font-display: swap to minimize CLS and improve loading experience.
  • Image optimization: Serve WebP/AVIF, specify dimensions, and enable lazy loading for performance.

Quick Start

Install and configure asset optimizations by embedding accessible SVGs, loading WOFF2 fonts with font-display: swap, and serving images in modern formats with lazy loading.

Frequently Asked Questions about assets-icons-fonts

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

FAQPage Schema
What is the best way to optimize SVG icons for web performance?▼

Optimize WOFF2 font loading by using font-display: swap to minimize Cumulative Layout Shift (CLS). This strategy improves the loading experience by showing fallback text immediately and swapping to the web font once loaded.

How do I optimize image assets for fast loading apps?▼

Optimize image assets by serving modern formats like WebP or AVIF, specifying dimensions, and enabling lazy loading. This reduces initial page weight and improves frontend performance across platforms.

Does using inline SVGs cause DOM bloat?▼

Inline SVGs can cause DOM bloat if overused, but consolidating them into sprite sheets mitigates this issue. This technique maintains accessibility while keeping the DOM lightweight for faster rendering.

Can I use WOFF2 fonts to prevent layout shifts on mobile interfaces?▼

Yes, WOFF2 fonts prevent layout shifts on mobile interfaces when combined with font-display: swap. This minimizes CLS by allowing text to render immediately with a fallback font before the custom font loads.

When do I need to specify image dimensions for asset optimization?▼

Specify image dimensions during asset optimization whenever serving WebP, AVIF, or other image formats to prevent layout shifts. Pairing this with lazy loading ensures efficient rendering without delaying the initial page load.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

asset-manager

Organize design assets with directory structures, naming conventions, and Git LFS.

Official
Intermediate
devjaimedevjaime
1

performance

{"main":"","footer":""}

Community
Intermediate
rampstackcorampstackco
523

media-asset-management

Plan and design scalable media pipelines for images, video, and downloadable assets.

Official
Advanced
zm2231zm2231

asset-optimization

Convert design assets to WebP, AVIF, and responsive variants.

Community
Advanced