·web-wave-designer
*

web-wave-designer

Crea efectos realistas de olas de mar y agua para la web utilizando filtros SVG (feTurbulence, feDisplacementMap), animaciones CSS y técnicas de capas. Úselo para fondos oceánicos, distorsión submarina, escenas de playa, efectos dominó, vidrio líquido e interfaz de usuario con temas acuáticos. Activar en "ola del océano", "efecto de agua", "agua SVG", "animación de ondas", "distorsión submarina", "vidrio líquido", "animación de olas", "agua de turbulencia", "olas de playa", "espuma de mar". NO para simulación de océanos en 3D (use WebGL/Three.js), efectos de agua en video (use edición de video), simulación de fluidos basada en la física (use lienzo/WebGL) o fondos degradados simples sin movimiento de olas.

11Instalaciones·0Tendencia·@curiositech

Instalación

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

Cómo instalar web-wave-designer

Instala rápidamente el skill de IA web-wave-designer en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/curiositech/some_claude_skills --skill web-wave-designer
  3. Verificar instalación: Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

Fuente: curiositech/some_claude_skills.

SKILL.md

Ver original

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 |

Crea efectos realistas de olas de mar y agua para la web utilizando filtros SVG (feTurbulence, feDisplacementMap), animaciones CSS y técnicas de capas. Úselo para fondos oceánicos, distorsión submarina, escenas de playa, efectos dominó, vidrio líquido e interfaz de usuario con temas acuáticos. Activar en "ola del océano", "efecto de agua", "agua SVG", "animación de ondas", "distorsión submarina", "vidrio líquido", "animación de olas", "agua de turbulencia", "olas de playa", "espuma de mar". NO para simulación de océanos en 3D (use WebGL/Three.js), efectos de agua en video (use edición de video), simulación de fluidos basada en la física (use lienzo/WebGL) o fondos degradados simples sin movimiento de olas. Fuente: curiositech/some_claude_skills.

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/curiositech/some_claude_skills --skill web-wave-designer
Categoría
*Creatividad
Verificado
Primera vez visto
2026-03-10
Actualizado
2026-03-11

Browse more skills from curiositech/some_claude_skills

Respuestas rápidas

¿Qué es web-wave-designer?

Crea efectos realistas de olas de mar y agua para la web utilizando filtros SVG (feTurbulence, feDisplacementMap), animaciones CSS y técnicas de capas. Úselo para fondos oceánicos, distorsión submarina, escenas de playa, efectos dominó, vidrio líquido e interfaz de usuario con temas acuáticos. Activar en "ola del océano", "efecto de agua", "agua SVG", "animación de ondas", "distorsión submarina", "vidrio líquido", "animación de olas", "agua de turbulencia", "olas de playa", "espuma de mar". NO para simulación de océanos en 3D (use WebGL/Three.js), efectos de agua en video (use edición de video), simulación de fluidos basada en la física (use lienzo/WebGL) o fondos degradados simples sin movimiento de olas. Fuente: curiositech/some_claude_skills.

¿Cómo instalo web-wave-designer?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/curiositech/some_claude_skills --skill web-wave-designer Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

https://github.com/curiositech/some_claude_skills