Images media

Skill Syo-M/fable-frontend-skills/.claude/skills/images-media

Measured, opinionated Claude Code rules for frontend work (React / Next.js / Vite / Astro) — skills, path rules, review agents, sign-off hooks, installer & plugin. Every claim backed by committed eval reports.

Install

npx -y skills add Syo-M/fable-frontend-skills --skill images-media

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Images, icons, fonts, and video — responsive images, modern formats, lazy loading, CLS/LCP optimization, SVG handling, font loading. Use when adding or optimizing images, fonts, video, favicons, or fixing layout-shift / slow-LCP issues. 日本語の依頼例:「画像が重い/遅い」「画像を最適化して」「フォント読み込み」「動画埋め込み」「LCP改善」「レイアウトがガタつく」「ファビコン」。

SKILL.md

3.2 KB, as published. Nobody here has run it

Images & Media

The two invariants

No CLS: every image/video/embed has intrinsic dimensions — width+height attributes or CSS aspect-ratio on the container. No exceptions.
The LCP element loads eagerly: the above-the-fold hero image is never lazy-loaded; mark it priority (priority in next/image, loading="eager" + fetchpriority="high" elsewhere). Everything below the fold: loading="lazy" + decoding="async". (Target: LCP ≤ 2.5 s at p75 — the budget lives in governance.)

Use the framework's pipeline first

Next.js: next/image (constrain remotePatterns tightly — SSRF surface, see frontend-security).
Astro: astro:assets <Image>/<Picture>.
Plain Vite SPA: hand-rolled <img srcset sizes>; generate AVIF/WebP variants at build time (e.g. vite-imagetools) — don't ship original camera-size JPEGs.

Formats & sizing

Raster: AVIF/WebP with the pipeline handling fallback. Vector (icons, illustrations, logos): SVG.
sizes must reflect the actual rendered width per breakpoint — a sizes="100vw" default on a 400px card image ships 3× the bytes.
Don't scale down in CSS what you could resize at build/request time.

SVG

Styled/animated/recolorable SVG: inline as a component, fill="currentColor" (icon system rules in design-system).
Static decorative SVG: <img src="*.svg"> is fine and cacheable.
Run bundled SVGs through SVGO. User-supplied SVG is executable content — never inline it; see frontend-security uploads.
Accessibility: decorative → alt="" when loaded via <img>, aria-hidden="true" when inlined; meaningful → alt text on <img>, or role="img" + <title>/aria-label inline (see a11y).

Fonts

Framework loader first (next/font — also removes layout shift via size-adjust fallbacks). Otherwise: self-hosted woff2 only, @font-face with font-display: swap (or optional for non-brand-critical), <link rel="preload"> the critical face, subset to used scripts.
Never load fonts via CSS @import or third-party CSS CDNs at runtime (render-blocking + privacy). Prefer one variable font over many static weights.

Video & animated content

Short looping animation: <video autoplay muted loop playsinline> (or animated AVIF) — never GIF (10× the bytes).
Content video: preload="metadata", a real poster, captions <track> required (see a11y), and never autoplay with sound.
Heavy embeds (YouTube etc.): load a thumbnail facade, swap in the iframe on interaction.

Favicons / app icons

Minimum set: favicon.ico (legacy), one SVG icon, one 180px apple-touch-icon, web manifest icons. Use the framework's metadata/file conventions rather than hand-written <link> soup.