什么是 nextjs-image-art-direction？
使用 getImageProps() 实现 Next.js 图像的艺术指导。当针对不同的视口大小显示不同的图像时使用，例如具有移动与桌面资源的主页轮播、不同的裁剪/合成，或者当移动和桌面图像完全不同时。 来源：flpbalada/my-opencode-config。
·nextjs-image-art-direction
</>
nextjs-image-art-direction
使用 getImageProps() 实现 Next.js 图像的艺术指导。当针对不同的视口大小显示不同的图像时使用，例如具有移动与桌面资源的主页轮播、不同的裁剪/合成，或者当移动和桌面图像完全不同时。
如何安装 nextjs-image-art-direction
通过命令行快速安装 nextjs-image-art-direction AI 技能到你的开发环境
- 打开终端: 打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等）
- 运行安装命令: 复制并运行以下命令：npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction
- 验证安装: 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
来源：flpbalada/my-opencode-config。
SKILL.md
查看原文Art direction means showing completely different images based on viewport size — not just resizing the same image. Common use cases include homepage carousels with different assets for mobile vs desktop, switching from landscape (desktop) to portrait (mobile), or showing cropped vs full compositions.
| Art Direction | Different image content/composition | with multiple elements | | Responsive Images | Same image, different sizes | sizes prop with srcset |
The getImageProps() function (stable since Next.js 14.1.0) generates the necessary props without calling React useState(), making it ideal for art direction.
使用 getImageProps() 实现 Next.js 图像的艺术指导。当针对不同的视口大小显示不同的图像时使用，例如具有移动与桌面资源的主页轮播、不同的裁剪/合成，或者当移动和桌面图像完全不同时。 来源：flpbalada/my-opencode-config。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction- 分类
- </>开发工具
- 认证
- —
- 收录时间
- 2026-02-25
- 更新时间
- 2026-03-10
快速解答
如何安装 nextjs-image-art-direction？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
这个 Skill 的源码在哪？
https://github.com/flpbalada/my-opencode-config
详情
- 分类
- </>开发工具
- 来源
- user
- 收录时间
- 2026-02-25