← ClaudeAtlas

banner-builderlisted

Build production-ready HTML5 display banners (GSAP + CSS + JS) for Google Ads/Display & Video 360, Yandex Direct, MyTarget, AdRiver and generic DoubleClick-style ad servers. Use when the user asks for an HTML5 banner, rich media creative, animated ad, баннер, креатив, ротацию размеров (300x250, 728x90, 160x600, ...), clickTag wiring, a banner size set, backup images, or a weight/spec check on an existing banner. Trigger: /banner-builder.
komilovsg/banner-builder · ★ 2 · Web & Frontend · score 75
Install: claude install-skill komilovsg/banner-builder
# banner-builder One self-contained `index.html` per size. GSAP timeline. clickTag wired. Under the platform weight cap. Zipped and verified before it is called done. ## Usage ``` /banner-builder # ask for brief, then build /banner-builder 300x250 728x90 160x600 # build this size set /banner-builder --check ./out # only verify existing banners (weight, clickTag, loops) /banner-builder --platform yandex # target-specific rules (default: google) ``` ## Non-negotiable output contract Every banner directory is: ``` out/<W>x<H>/ index.html # markup + CSS + JS inline. Self-contained. assets/ # only if raster/font files are unavoidable backup.jpg # static fallback frame, same dimensions ``` and every `index.html`: 1. Declares its size in **one place**, `<meta name="ad.size" content="width=W,height=H">`, and CSS vars `--w/--h` used by the `#banner` wrapper. No hardcoded pixel duplicates. 2. Exposes `var clickTag = "https://..."` **as a global `var` in the first inline script** — ad servers rewrite that literal. Not `let`, not `const`, not inside a module or IIFE. 3. Routes every click through one handler on `#banner`, using `window.open(clickTag, '_blank')`. 4. Has a 1px border (`#banner { border: 1px solid rgba(0,0,0,.15) }`). Google rejects creatives whose edges are indistinguishable from the publisher page. 5. Stops. `repeat: 2` on the master timeline (= 3 plays total), each play ≤ 6s. Google's h