ワンクリックでManusで任意のスキルを実行

images-media

スター0

フォーク0

更新日2026年7月13日 05:31

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

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

Syo-M

Syo-M/codex-frontend-skills

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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 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.

このリポジトリの他の Skills

同じリポジトリ

frontend-security

Syo-M/codex-frontend-skills

Frontend/BFF security for forms and external input, auth, cookies, HTML, URLs, fetch, CORS, webhooks, uploads, secrets, logging, dependencies, and LLM-bound content. 日本語の依頼例:「認証実装」「問い合わせフォーム」「外部API」「webhook」「ログ」「LLMに渡す」「依存追加」。

2026-07-150

governance

Syo-M/codex-frontend-skills

Repository policy design or changes: CI, releases, dependency or license policy, secrets scanning, protected-branch/PR rules, and performance budgets. Not for routine metadata edits such as a one-line .gitignore change. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス」「ブランチ/PR運用」。

2026-07-150

nextjs

Syo-M/codex-frontend-skills

Next.js-specific App Router work: Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, and env vars. Not for framework-neutral styling or tests. 日本語の依頼例:「Next.jsで実装」「Server Action」「RSC」「ルートハンドラ」「キャッシュ」。

2026-07-150

pre-ship

Syo-M/codex-frontend-skills

Pre-merge verification covering scope, typecheck, lint, affected tests, security, accessibility, and a single pass or fail report. 日本語の依頼例:「出荷前チェック」「マージ前確認」「完成か確認」「PR前チェック」。

2026-07-150

react-patterns

Syo-M/codex-frontend-skills

React component, hook, state, effect, and rendering conventions. Use for React implementation or re-render and useEffect debugging. 日本語の依頼例:「Reactコンポーネント」「カスタムフック」「状態管理」「再レンダリング」「useEffect修正」。

2026-07-150

a11y

Syo-M/codex-frontend-skills

Accessibility implementation and review for semantic HTML, keyboard use, focus, ARIA, contrast, forms, and screen readers. Use for UI components or accessibility fixes. 日本語の依頼例:「アクセシビリティ対応」「キーボード操作」「フォーカス管理」「スクリーンリーダー対応」。

2026-07-130

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

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 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.