netlify-image-cdn
作者 netlifynetlify-image-cdn 是一份关于如何使用 Netlify Image CDN 通过 `/.netlify/images` 对图片进行调整尺寸、裁剪、格式转换和优化的指南。内容涵盖本地资源、响应式图片标记、远程图片 allowlist、干净 URL 重写，以及结合 Functions + Blobs 的后端开发上传流水线。
这项技能得分 84/100，属于目录用户需要现成 Netlify Image CDN 工作流时的优质候选。它具备清晰的触发条件，说明了主要端点和参数，并给出可落地的上传到转换流水线示例，因此比泛泛的提示更有实用价值。不过，它没有提供安装命令指引，且主要依赖文档说明而非自动化，因此在采用上仍需保留一定谨慎。
- 通过描述和示例，能清晰触发图片优化、响应式标记和转换类需求。
- 操作细节扎实：涵盖 `/.netlify/images`、关键查询参数、远程图片 allowlist 以及干净 URL 重写。
- 包含一个结合 Functions、Blobs 和 Image CDN 的真实用户上传图片流水线参考，有助于提升 agent 的执行能力。
- 在 `SKILL.md` 中没有安装命令，用户需要根据文档自行推断设置步骤。
- 支持材料仅限于一个参考文件，因此边缘情况和更广泛的集成指导展开得不够充分。
netlify-image-cdn 技能概览
netlify-image-cdn 的作用
netlify-image-cdn 技能可以帮助你通过 /.netlify/images 使用 Netlify 内置的 Image CDN 来调整图片尺寸、裁切、转换格式并进行优化。它最适合用来获取一份实用的 Netlify Image CDN 指南，例如为本地资源提供图片服务、构建响应式图片标记，或把用户上传的图片接入一条优化后的分发路径。
适合谁使用
如果你在 Netlify 站点上做 Frontend 和 Backend Development，并且需要可预测的图片变换，又不想额外接入独立图片服务，这个技能会很合适。尤其适用于你在意安装简单、图片性能、远程图片白名单，或把上传存储和图片分发结合起来的场景。
采用前需要确认什么
最关键的判断点是：图片是本地还是远程、是否需要干净的 URL 重写，以及应用是否需要完整的上传流水线。netlify-image-cdn 在你已经部署到 Netlify，并且希望在边缘侧完成变换、而不是自己搭一套媒体后端时，优势最明显。
如何使用 netlify-image-cdn 技能
安装并查看正确的文件
先按你的 skills 系统走 netlify-image-cdn install 流程，然后优先阅读 SKILL.md。如果你在做上传功能，再进一步查看 references/user-uploads.md；同时结合文件树确认仓库里是否还有其他关联的参考文件。这个仓库的主要支撑材料比较集中，不需要在一大堆文档里到处翻找。
把模糊目标变成可用提示
使用 netlify-image-cdn usage 的提问方式，先把来源类型、期望输出和约束条件讲清楚。好的提示语应该明确图片来源、目标尺寸、格式，以及图片是本地还是远程。
示例：
Use netlify-image-cdn to serve a hero image from /photo.jpg at 1200x800, crop with cover, and output webp with quality 80. Include the cleanest Netlify URL and explain any required netlify.toml changes.
如果是用户上传，直接要求完整流水线：
Use netlify-image-cdn with Functions + Blobs to store uploaded avatars, expose them at /uploads/:key, and transform them through /.netlify/images. Include the allowlist and rewrite strategy.
阅读会影响输出质量的用法细节
最重要的仓库细节是查询参数和远程图片白名单规则。要重点关注 url、w、h、fit、position、fm 和 q，因为它们决定输出是缩放、裁切、自动协商，还是锁定格式。如果你要提供外部图片，一定要仔细阅读 netlify.toml 里的正则示例；漏掉白名单条目是最常见的阻塞原因。
netlify-image-cdn 技能常见问题
它只是用于图片缩放吗？
不是。netlify-image-cdn 技能覆盖缩放、裁切、输出格式控制和优化决策。它还适用于你需要干净的 URL 重写，或者需要用户上传图片流程，而不只是简单改一下 img 标签的时候。
我必须部署在 Netlify 上吗？
是的，这个技能专门面向 Netlify 的 Image CDN 及其相关平台能力。如果你的应用不是部署在 Netlify 上，通用的图片提示词可能比 netlify-image-cdn skill 更合适。
对新手友好吗？
友好，前提是你希望得到一份偏安装导向的简明指南，并且愿意编辑 HTML、netlify.toml 或函数文件。只要你已经知道图片来源和想要的结果，这个技能会更容易上手。
什么情况下不该用它？
如果你需要的是一套完全独立于 Netlify 的自定义媒体流水线，或者你的需求依赖 CDN 参数不支持的变换，就不要使用 netlify-image-cdn。这种情况下，专门的图片处理服务或应用自有后端通常更合适。
如何改进 netlify-image-cdn 技能
给技能明确的图片任务
效果最好的输入一定是具体的：图片路径或远程 URL、目标尺寸、裁切意图、输出格式，以及质量更偏向文件体积还是视觉保真。如果你只说“优化这张图”，输出通常会比明确页面布局和设备目标的提示词更没用。
提供会改变实现方式的部署约束
对于 netlify-image-cdn for Backend Development，要告诉技能你是否需要上传、公网分发，还是基于重写规则的交付。这个选择会决定方案是停留在 HTML 层，还是需要加上 Functions + Blobs 再配一个重定向层。
用真实测试用例迭代第一版结果
如果第一版答案已经接近，但还不能直接用，就用一个失败示例来收紧它：一个已加入白名单的远程域名、一个具体的宽高比，或者浏览器格式偏好。这样比要求“更好的代码”更有效，因为它能直接暴露问题到底是 URL 语法、Netlify 配置，还是流水线设计。