一键在 Manus 中运行任何 Skill

images-media

星标3

分支0

更新时间2026年6月13日 11:37

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改善」「レイアウトがガタつく」「ファビコン」。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Syo-M

Syo-M/fable-frontend-skills

打开 GitHub 仓库查看创作者相关仓库

下载

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

同仓库更多 Skills

同仓库

astro

Syo-M/fable-frontend-skills

Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。

2026-07-123

nextjs

Syo-M/fable-frontend-skills

Next.js App Router conventions — routing and adding pages, Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, env vars. Use for any work inside a Next.js app. 日本語の依頼例:「Next.jsで〜」「ページを追加/新規作成して」「ルーティング」「Server Action」「ルートハンドラ」「RSC/サーバーコンポーネント」「キャッシュ」。

2026-07-123

codex-imagegen

Syo-M/fable-frontend-skills

Generate or AI-edit images by delegating to the Codex CLI ($imagegen / gpt-image) — sample banners, hero visuals, demo assets, image-to-image edits. Use whenever a task needs image GENERATION or AI photo editing (Claude Code cannot generate images itself). 日本語の依頼例:「画像を生成して」「サンプル画像を作って」「この写真を加工して」「バナー/ヒーロー画像が必要」。NOT for resizing/compressing existing assets (use `images-media`).

2026-07-073

css-modules

Syo-M/fable-frontend-skills

CSS Modules and styling conventions — design tokens, naming, variants, responsive design, layout, dark mode/theming. Use when styling or visually adjusting components, or editing any *.module.css, tokens, or global styles. For animations/transitions/motion use the `motion` skill instead. 日本語の依頼例:「スタイルを当てて」「見た目を整えて」「デザイン調整」「ダークモード」「レスポンシブ対応」「CSS書いて」。

2026-07-073

governance

Syo-M/fable-frontend-skills

Repository governance — CI merge gates, toolchain pinning, dependency lifecycle and license policy, secrets scanning, change control for rules and sensitive paths, Git/PR conventions, observability, performance budgets, browser support. Use when setting up CI/CD, repo configuration, releases, adding dependencies, or defining team policy. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス確認」「秘密情報スキャン」「リポジトリ設定」「ブランチ/PR運用」「パフォーマンスバジェット」。

2026-07-073

motion

Syo-M/fable-frontend-skills

Animation and motion conventions — CSS transitions/keyframes, View Transitions, scroll-driven effects, animation libraries, exit animations, performance. Use when adding, changing, or debugging any animation, transition, or page-transition effect. 日本語の依頼例:「アニメーション付けて」「動きを付けて」「トランジション」「ページ遷移アニメ」「スクロール演出」「ふわっと表示」。

2026-07-073

name

images-media

description

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.