·web-wave-designer
*

web-wave-designer

SVG フィルター (feTurbulence、feDisplacementMap)、CSS アニメーション、およびレイヤー化技術を使用して、Web 用のリアルな海と水の波の効果を作成します。海の背景、水中の歪み、ビーチのシーン、波紋効果、液体ガラス、水をテーマにした UI に使用します。 「海の波」、「水の効果」、「SVGの水」、「波紋アニメーション」、「水中の歪み」、「液体ガラス」、「波のアニメーション」、「フェ乱流水」、「ビーチの波」、「海の泡」で有効になります。 3D 海洋シミュレーション (WebGL/Three.js を使用)、ビデオ水効果 (ビデオ編集を使用)、物理ベースの流体シミュレーション (Canvas/WebGL を使用)、または波の動きのない単純なグラデーション背景には使用できません。

11インストール·0トレンド·@curiositech

インストール

$npx skills add https://github.com/curiositech/some_claude_skills --skill web-wave-designer

web-wave-designer のインストール方法

コマンドラインで web-wave-designer AI スキルを開発環境にすばやくインストール

  1. ターミナルを開く: ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます
  2. インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/curiositech/some_claude_skills --skill web-wave-designer
  3. インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: 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の水」、「波紋アニメーション」、「水中の歪み」、「液体ガラス」、「波のアニメーション」、「フェ乱流水」、「ビーチの波」、「海の泡」で有効になります。 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
カテゴリ
*クリエイティブ
認証済み
初回登録
2026-03-10
更新日
2026-03-11

Browse more skills from curiositech/some_claude_skills

クイックアンサー

web-wave-designer とは?

SVG フィルター (feTurbulence、feDisplacementMap)、CSS アニメーション、およびレイヤー化技術を使用して、Web 用のリアルな海と水の波の効果を作成します。海の背景、水中の歪み、ビーチのシーン、波紋効果、液体ガラス、水をテーマにした UI に使用します。 「海の波」、「水の効果」、「SVGの水」、「波紋アニメーション」、「水中の歪み」、「液体ガラス」、「波のアニメーション」、「フェ乱流水」、「ビーチの波」、「海の泡」で有効になります。 3D 海洋シミュレーション (WebGL/Three.js を使用)、ビデオ水効果 (ビデオ編集を使用)、物理ベースの流体シミュレーション (Canvas/WebGL を使用)、または波の動きのない単純なグラデーション背景には使用できません。 ソース: curiositech/some_claude_skills。

web-wave-designer のインストール方法は?

ターミナルまたはコマンドラインツール(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