菜单
Images, SVG, icons, fonts, video, favicons, responsive delivery, lazy loading, and LCP or CLS optimization. 日本語の依頼例:「画像最適化」「フォント読み込み」「動画埋め込み」「LCP改善」「ファビコン」。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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に渡す」「依存追加」。
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運用」。
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」「ルートハンドラ」「キャッシュ」。
Pre-merge verification covering scope, typecheck, lint, affected tests, security, accessibility, and a single pass or fail report. 日本語の依頼例:「出荷前チェック」「マージ前確認」「完成か確認」「PR前チェック」。
React component, hook, state, effect, and rendering conventions. Use for React implementation or re-render and useEffect debugging. 日本語の依頼例:「Reactコンポーネント」「カスタムフック」「状態管理」「再レンダリング」「useEffect修正」。
Accessibility implementation and review for semantic HTML, keyboard use, focus, ARIA, contrast, forms, and screen readers. Use for UI components or accessibility fixes. 日本語の依頼例:「アクセシビリティ対応」「キーボード操作」「フォーカス管理」「スクリーンリーダー対応」。
| name | images-media |
| description | Images, SVG, icons, fonts, video, favicons, responsive delivery, lazy loading, and LCP or CLS optimization. 日本語の依頼例:「画像最適化」「フォント読み込み」「動画埋め込み」「LCP改善」「ファビコン」。 |
width+height attributes or CSS aspect-ratio on the container. No exceptions.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.)next/image (constrain remotePatterns tightly — SSRF surface, see frontend-security).astro:assets <Image>/<Picture>.<img srcset sizes>; generate AVIF/WebP variants at build time (e.g. vite-imagetools) — don't ship original camera-size JPEGs.sizes must reflect the actual rendered width per breakpoint — a sizes="100vw" default on a 400px card image ships 3× the bytes.fill="currentColor" (icon system rules in design-system).<img src="*.svg"> is fine and cacheable.frontend-security uploads.alt="" when loaded via <img>, aria-hidden="true" when inlined; meaningful → alt text on <img>, or role="img" + <title>/aria-label inline (see a11y).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.@import or third-party CSS CDNs at runtime (render-blocking + privacy). Prefer one variable font over many static weights.<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.preload="metadata", a real poster, captions <track> required (see a11y), and never autoplay with sound.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.