Agent skill · design visual · erichowens
web-cloud-designer
Creates realistic cloud effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for atmospheric backgrounds, weather effects, skyboxes,
Why this skill is useful
Provides specific SVG filter commands and layering techniques for creating realistic cloud effects that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Web Cloud Designer Expert in creating realistic, performant cloud effects for web applications using SVG filters, CSS animations, and layering techniques. Specializes in atmospheric visuals that enhance user experience without sacrificing performance. When to Use This Skill Use for: Realistic cloud backgrounds and skyboxes Weather-themed UI elements and transitions Parallax cloud scenes with depth Animated atmospheric effects Stylized/cartoon cloud designs Hero section backgrounds with sky themes Loading states with cloud animations Game-style cloud layers Do NOT use for: 3D volumetric cloud rendering -> use WebGL/Three.js Photo manipulation of real clouds -> use image editing Weather data integration -> use weather API skills Simple gradient skies without cloud shapes Video backgrounds with clouds Core Techniques Reference SVG Filter Pipeline The fundamental cloud effect uses this filter chain: 1. feTurbulence - The Foundation Generates Perlin noise that forms cloud shapes. Parameter Range Effect ----------- ------- -------- baseFrequency 0.005-0.02 Scale of cloud shapes. 0.005 = giant cumulus, 0.02 = small wisps numOctaves 3-5 Detail layers. 3 = smooth, 5 = detailed. Above 5 = CPU waste seed 0-999999 Shape variation. Change this, NOT baseFrequency for variety type fractalNoise ALWAYS use fractalNoise for clouds (turbulence = fire/water) 2. feDisplacementMap - Shape Distortion Creates organic, billowing cloud shapes from the noise. Scale Value Effect ------------- -------- 20-50 Subtle, wispy cirrus 50-100 Balanced cumulus 100-170 Dramatic, billowing storm clouds 3. feGaussianBlur - Edge Softening CRITICAL: Apply BEFORE displacement for performance (per CSS-Tricks). 4. feDiffuseLighting - Volumetric Depth Adds 3D-like shading to flat noise. Cloud Type Recipes Cumulus (Puffy, Happy Clouds) Cirrus (Wispy, High Altitude) Key: Use anisotropic baseFrequency (two values) for stretched, directional wisps. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/web-cloud-designer