Agent skill · design visual · erichowens
web-weather-creator
Master of stylized atmospheric effects using SVG filters and CSS animations. Creates clouds, waves, lightning, rain, fog, aurora borealis, god rays, lens flares, twilight skies, and ocean spray—all
Why this skill is useful
Provides specific techniques and code snippets for creating stylized atmospheric effects using SVG and CSS that are not commonly found in standard resources.
What it needs
About 10k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Web Weather Creator Master of stylized atmospheric effects using SVG filters and CSS animations. Creates clouds, waves, lightning, rain, fog, aurora borealis, god rays, lens flares, twilight skies, and ocean spray—all with a premium aesthetic that's stylized but never cheap-looking. Activation Triggers Activate on: "clouds", "waves", "weather effects", "atmospheric", "lightning", "rain", "fog", "mist", "aurora", "northern lights", "god rays", "crepuscular", "lens flare", "twilight", "sunset gradient", "golden hour", "ocean spray", "beach wash", "foam", "smoke", "parallax sky", "water ripples", "animated background" NOT for: Photorealistic renders (use WebGL/Three.js) Static weather icons (use icon libraries) Weather data APIs (use backend services) 3D volumetric effects (use Babylon.js/Three.js) --- Philosophy: Stylized, Not Cheap The goal is premium stylization—effects that feel intentional and artistic, not like stock footage or placeholder art. The Three Principles 1. Layering Creates Depth - Multiple semi-transparent layers with parallax motion 2. Organic Motion - Varied speeds, easing, and subtle randomization 3. Restraint - One hero effect, subtle supporting elements Quality Spectrum Target Zone: The middle—stylized enough to feel crafted, performant enough for production. --- Clouds Floating Through Content (Z-Index Strategy) The most common question: "How do I make clouds float through my content, not just behind it?" The Split-Layer Solution Key Principles 1. Split clouds into 2-3 layers (back, mid, front) 2. Front clouds use LOW opacity (10-15%) so content remains visible 3. Always use pointer-events: none on cloud layers 4. Use masks to clear space around important content 5. Vary animation speeds for parallax depth (back = slow, front = fast) Blend Modes for Natural Integration Content Readability → See references/layering-strategies.md for complete patterns including parallax, content-aware masking, and React components. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/web-weather-creator