agentsclimarketplace
Sign in

Images media

Skill Syo-M/codex-frontend-skills/plugins/codex-frontend-skills/skills/images-media

Images, SVG, icons, fonts, video, favicons, responsive delivery, lazy loading, and LCP or CLS optimization. 日本語の依頼例:「画像最適化」「フォント読み込み」「動画埋め込み」「LCP改善」「ファビコン」。From its SKILL.md

Install
npx -y skills add Syo-M/codex-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.

2 things to look at

  • 29 days oldThe repository was created 29 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 0 stars0 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.

SKILL.md

3.4 KB, 792 tokens by cl100k_base, as published. Nobody here has run it

Images & Media

The two invariants

  1. No CLS: every image/video/embed has intrinsic dimensions — width+height attributes or CSS aspect-ratio on the container. No exceptions.
  2. The LCP element is not lazy-loaded: for next/image, inspect the installed Next.js major. In Next.js 16+, prefer loading="eager" or fetchPriority="high"; use preload only for a single unambiguous LCP candidate (priority is deprecated in 16). Use the API supported by older installed majors rather than copying the newest prop blindly. For plain <img>, use loading="eager" plus fetchpriority="high" on the actual LCP candidate. Everything below the fold: loading="lazy" + decoding="async". Do not preload several viewport-dependent candidates. (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: prefer an appropriately encoded muted <video autoplay muted loop playsinline> or a supported animated image format. Compare real encoded size and browser requirements; avoid GIF when a materially smaller supported format meets the content need.
  • 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.

What ships with it: 1 file

201 B alongside SKILL.md

agents/

Gives 0 of the 12 instructions most media documents skills give in 792 tokens

Counted across 157 of the 158 authors here whose files we hold, read 2026-08-07

  • Provide posting time recommendationsin 7 of 157, across 5 files
  • Track metrics over time to identify trendsin 6 of 157, across 2 files
  • Read marketing context file before startingin 6 of 157, across 5 files
  • Choose platforms based on audience presencein 6 of 157, across 4 files
  • Adapt tone for each platformin 6 of 157, across 4 files
  • Ensure data completeness before analysisin 5 of 157, across 1 file
  • Compare metrics within same time periodsin 5 of 157, across 1 file
  • Account for platform-specific benchmarksin 5 of 157, across 1 file
  • Separate organic and paid metricsin 5 of 157, across 1 file
  • Include context when interpreting resultsin 5 of 157, across 1 file
  • Keep tweets under 280 charactersin 5 of 157, across 3 files
  • Download top-K results with an attribution sidecarin 5 of 157, across 2 files

Said here and by no other author read

  • include intrinsic dimensions on media elements
  • prevent cumulative layout shift for media
  • load the largest contentful paint element eagerly
  • use the framework image pipeline first
  • lazy load elements below the fold
  • specify accurate sizes attributes for images

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 326,758. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.