Made by AdAnt to this skill's rules, with a sample product and data

About this skill

Written by AdAnt, whose agents make short-form ads every day. Most motion skills teach animation. This one teaches the ad: a hook in the first frame, one focus per beat, the safe zones that feed interfaces cover, and a review before you ship.

You say

Make a 20-second vertical ad for my app. The viewer is a busy founder and the proof is our real signup number.

How it works

  1. Start from a brief: the product, the one claim, the proof you can show and the action you want.
  2. Turn it into a beat sheet: a hook in the first second, the demonstration, the proof, then the call to action.
  3. Build one HTML file on a paused timeline, capture each frame, and review the result against a checklist.

Getting a good result

  • Stay out of the feed's interface: the top 220 px, the bottom 420 px and the right 140 px of a 1080 by 1920 frame.
  • Keep text at 56 px or larger, and check it at 360 px wide, the size most people will see it.
  • Use only numbers you can back up. The biggest number on screen should be the true one.

What you get

  • A brief, a beat sheet and feed safe zones
  • Motion rules that hold up on mute
  • A frame-exact HTML, GSAP, Playwright and ffmpeg build
  • A review checklist

Good fit

  • Founders running their own ads
  • TikTok, Reels and Shorts

Not for

  • Horizontal brand films
  • Ads with a real presenter

How to install it

  1. Download the ZIP and unzip it.
  2. Move the folder holding SKILL.md into your agent's skills folder, such as ~/.claude/skills/ for Claude Code.
  3. Start a new session and ask for what you want to make.

Needs: An agent that reads skills, Playwright, ffmpeg.

FAQ

Is it really free?

Yes. Create a free AdAnt account to download the ZIP. There is no card and no trial timer.

Why safe zones?

TikTok, Reels and Shorts cover the top, bottom and right edge with their own interface. Text there gets hidden.

Related skills

Free

HyperFrames: HTML to Video

Have Claude write launch films, explainers and title cards as HTML, then render them to MP4.

Free

GSAP Animation Core

Give your agent GreenSock's official guidance for timing, easing and stagger.

Free

Three.js Animation

Add keyframes, procedural motion and clip blending to 3D scenes made with code.