使用 SVG 滤镜（feTurbulence、feDisplacementMap）、CSS 动画和分层技术为 Web 创建逼真的海洋和水波效果。用于海洋背景、水下扭曲、海滩场景、波纹效果、液体玻璃和水主题 UI。激活“海浪”、“水效果”、“SVG 水”、“波纹动画”、“水下扭曲”、“液体玻璃”、“波浪动画”、“feTurbulence 水”、“海滩波浪”、“海泡沫”。不适用于 3D 海洋模拟（使用 WebGL/Three.js）、视频水效果（使用视频编辑）、基于物理的流体模拟（使用 canvas/WebGL）或没有波浪运动的简单渐变背景。
通过命令行快速安装 web-wave-designer AI 技能到你的开发环境
来源：curiositech/some_claude_skills。
Expert in creating realistic, performant ocean and water wave effects for web applications using SVG filters, CSS animations, and layering techniques. Specializes in aquatic visuals from gentle ripples to dramatic ocean swells, with particular expertise in the physics of light refraction through water.
CRITICAL: For water effects, use type="turbulence" (NOT fractalNoise like clouds):
| turbulence | Continuous flow patterns, starts from transparent black | Water, waves, liquid | | fractalNoise | Random cloudlike patches, opaque | Clouds, smoke, terrain |
使用 SVG 滤镜（feTurbulence、feDisplacementMap）、CSS 动画和分层技术为 Web 创建逼真的海洋和水波效果。用于海洋背景、水下扭曲、海滩场景、波纹效果、液体玻璃和水主题 UI。激活“海浪”、“水效果”、“SVG 水”、“波纹动画”、“水下扭曲”、“液体玻璃”、“波浪动画”、“feTurbulence 水”、“海滩波浪”、“海泡沫”。不适用于 3D 海洋模拟（使用 WebGL/Three.js）、视频水效果（使用视频编辑）、基于物理的流体模拟（使用 canvas/WebGL）或没有波浪运动的简单渐变背景。 来源：curiositech/some_claude_skills。
为搜索与 AI 引用准备的稳定字段与命令。
npx skills add https://github.com/curiositech/some_claude_skills --skill web-wave-designer使用 SVG 滤镜（feTurbulence、feDisplacementMap）、CSS 动画和分层技术为 Web 创建逼真的海洋和水波效果。用于海洋背景、水下扭曲、海滩场景、波纹效果、液体玻璃和水主题 UI。激活“海浪”、“水效果”、“SVG 水”、“波纹动画”、“水下扭曲”、“液体玻璃”、“波浪动画”、“feTurbulence 水”、“海滩波浪”、“海泡沫”。不适用于 3D 海洋模拟（使用 WebGL/Three.js）、视频水效果（使用视频编辑）、基于物理的流体模拟（使用 canvas/WebGL）或没有波浪运动的简单渐变背景。 来源：curiositech/some_claude_skills。
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/curiositech/some_claude_skills --skill web-wave-designer 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/curiositech/some_claude_skills