web-wave-designer

SKILL.md

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の水」、「波紋アニメーション」、「水中の歪み」、「液体ガラス」、「波のアニメーション」、「フェ乱流水」、「ビーチの波」、「海の泡」で有効になります。 3D 海洋シミュレーション (WebGL/Three.js を使用)、ビデオ水効果 (ビデオ編集を使用)、物理ベースの流体シミュレーション (Canvas/WebGL を使用)、または波の動きのない単純なグラデーション背景には使用できません。 ソース: erichowens/some_claude_skills。

原文を見る