social-overlays
Skill23 starsChanged 8 months agoMITView on GitHub
Eleven conversion overlays for short-form ads, UGC and creator videos, with presets per platform: CTA pill, follow tap prompt, story sticker tag, LIVE badge with viewer count, notification drop, review proof card, story caption bar, photo wall loop, follower counter and goal bar, comment callout (reply-to-comment) and subscribe-and-bell nudge. Presets use one universal 9:16 safe box built from TikTok, Meta Reels, YouTube Shorts and Snap specs, CTA timing from creator analysts (ask after value, never in the intro), native number formats, contrast and motion tokens, plus the FTC rules: reviews, comments and counts come from real data only and paid content is disclosed. Use when an ad or creator video needs a call to action, a subscribe or follow ask, a review or comment on screen, a LIVE badge or a counter. NOT for fake reviews, fake follower counts or copying a platform's logo.
In this repository75 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- llms.txtllms.txt
- ad-creative-testingSkill
- ai-ad-compliance-checkSkill
- ai-ugc-ad-videoSkill
- app-ui-mockupsSkill
- caption-stylesSkill
- character-passportSkill
- code-to-video-previzSkill
- ecommerce-video-adsSkill
- ecommerce-video-editSkill
- edit-footage-with-codeSkill
- find-referencesSkill
- footage-effectsSkill
- gpt-image-2-6Skill
- gpt-image-gifSkill
- gpt-image-markup-editSkill
- gpt-image-sprite-sheetSkill
- gpt-image-sticker-packSkill
- how-to-make-ai-videoSkill
- kinetic-type-artSkill
- kling-4-action-montageSkill
- kling-4-keyframe-filmSkill
- kling-4-promptingSkill
- make-a-woke-profile-with-chatgptSkill
- maps-and-data-motionSkill
- media-downloadSkill
- media-judgeSkill
- motion-formatsSkill
- paper-shadersSkill
- product-photo-to-videoSkill
- product-video-hooksSkill
- short-form-ffmpeg-cookbookSkill
- threejs-animaticSkill
- tiktok-shop-videoSkill
- title-designSkill
- transition-craftSkill
- varg-ad-library-remixSkill
- varg-ad-localizeSkill
- varg-ad-variantsSkill
- varg-aiSkill
- varg-birthday-videoSkill
- varg-character-absurdSkill
- varg-character-beautiful-womanSkill
- varg-character-big-guySkill
- varg-character-cartoonSkill
- varg-character-cringeSkill
- varg-character-designSkill
- varg-character-fitnessSkill
- varg-character-grandmaSkill
- varg-character-keynoteSkill
- varg-consistent-charactersSkill
- varg-dropship-reelSkill
- varg-mascot-jingle-adSkill
- varg-mockupsSkill
- varg-music-videoSkill
- varg-occasion-videoSkill
- varg-podcast-videoSkill
- varg-previzSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
8 rules. About 0 are common, 5 are distinctive, and 3 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈5
Distinctive · estimate
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 36
Platform marks: No platform logos on mockups.
- Distinctive: line 37
Safe box: Keep every overlay inside x 120-888, y 288-1248 on 1080x1920, and left of x 780 below y 840.
- Distinctive: line 38
Free fonts only: Every font in the presets is OFL or Apache.
- Very specific: line 39
Seek-safe: Every value is a function of timeline time.
- Very specific: line 46
Read references/platform-safe-zones.md first: it holds the numbers every template here shares.
- Distinctive: line 76
Ask after value: hook ≤6 s, proposition ≤3 s, CTA at the end or right after the payoff.
- Distinctive: line 80
No platform logos on mockups.
- Very specific: line 88
Every rule in the references cites its source by number.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Social overlays: CTAs, follow prompts, reviews and live badges that convert
Eleven overlays that ask the viewer to do something, placed where no platform UI covers them and timed after the video has earned the ask. Reviews, comments and counts are always the person's real data.
Gates
- Real data only. Reviews, comments, ratings, follower, subscriber and viewer counts must be real and the person's to use. Never generate them; the FTC's 2024 rule bans fake and AI-written reviews and fake social proof.
- Disclose paid content on screen and in the voice, near the endorsement.
- Platform marks. No platform logos on mockups; badges and buttons are generic look-alikes. Platform names and UI looks are their owners' trademarks.
- Safe box. Keep every overlay inside x 120-888, y 288-1248 on 1080x1920, and left of x 780 below y 840.
- Free fonts only. Every font in the presets is OFL or Apache. Swap in the person's brand font only if they have a license for video.
- Seek-safe. Every value is a function of timeline time; randomness is seeded by frame. No
Date.now(),requestAnimationFrameor unseededMath.random(). - No credits here. These templates render locally for free. Generated footage, voice or music is the varg-ai skill: call
estimate_costand wait for the person's approval before any generation.
Pick a template
11 templates, 46 presets. Each reference file has the same sections: how the pros do it (every rule cited), presets, timing and numbers, how to build it, mistakes that look amateur, sources. Each JSON file holds the same presets as machine-readable values.
Read references/platform-safe-zones.md first: it holds the numbers every template here shares.
| Template | Use it for | Presets | Files |
| Story caption bar | Full-width translucent caption strip or big outlined text, Snapchat-story style. | Classic bar, Big text, Classic multi, Light bar | caption-bar-overlay.md · json |
| Video comment callout | A real viewer comment (plain, pinned, creator reply or reply sticker) over footage. | Comment, Pinned, Creator reply, Reply sticker, Dark | comment-callout.md · json |
| CTA pill pop | A follow / shop / watch-next button that pops in over footage and names one next step. | Floating pill, Glass button, Early deal, End tap | cta-pill-pop.md · json |
| Follow tap prompt | Creator card whose Follow button gets clicked or tapped and flips to Following. | TikTok-style, Instagram-style, Twitch-style, X-style | follow-tap-prompt.md · json |
| LIVE badge and viewer count | LIVE pill with pulsing dot and ticking viewer count in a corner. | Instagram-style, TikTok-style, Twitch-style, YouTube-style | live-badge.md · json |
| Notification drop | System-style notification banner or achievement toast that lands a beat. | iOS-style banner, Dark banner, Android-style, Achievement | notification-drop.md · json |
| Photo wall loop | Columns of photo cards scrolling at different speeds, seamless loop. | Three column, Opposing, Tilted, Landscape rows | photo-wall-loop.md · json |
| Review proof card | Real customer review or rating over footage as social proof. | App-store style, Local review style, Review-platform, Marketplace style, Rating badge | review-proof-card.md · json |
| Story sticker tag | Stories-style @mention, location or post-tag sticker over footage. | Mention, Location, Post tag, Glass mention | story-sticker.md · json |
| Subscribe-and-bell nudge | Cursor clicks Subscribe, then the bell, as a short reminder overlay. | Subscribe, Subscribe and bell, Highlight, Vertical | subscribe-nudge.md · json |
| Follower counter and goal bar | Subscriber/follower number rolls up to a milestone, or a goal bar fills. | Channel counter, Milestone pop, Goal bar, Stream goal | subscriber-counter.md · json |
Workflow
- Match the request to a template and one or two presets from the table. Say which and why in one line, and show the person the preset names with their one-line looks before building anything.
- Read the reference for that template, after the shared file, and load its JSON. Take values from the JSON; do not re-guess them.
- Build it the way the reference's "Build it" section says, starting from the named HyperFrames blocks or varg components where it names them. Drive every value from timeline time so any frame renders the same on a re-render.
- Fit it to the brand: swap in the person's colors and fonts only where the reference allows, then re-check contrast and safe zones with the numbers in "Timing and numbers".
- Check a draft: render stills at the key moments (entrance, hold, exit), go through "Mistakes that look amateur", and fix before the final render.
Rules that hold for every template
- Universal 9:16 box: x 120–888, y 288–1248 at 1080x1920, and x ≤ 780 below y 840 (TikTok rail). From TikTok's template, Meta Reels (14/35/6%), Google Shorts SVG (288/672/48/192), Snap (150/330).
- Real data only: reviews, comments, follower/viewer counts are inputs with a permission flag, never generated (FTC 2024 fake-review rule).
- Disclose paid content in the video, spoken and on screen, near the endorsement.
- Ask after value: hook ≤6 s, proposition ≤3 s, CTA at the end or right after the payoff; intro subscribe asks hurt retention; early CTA only when the hook carries a deal.
- Name the exact action, content-specific; test 2 CTA texts per video.
- Enter cubic-bezier(0.05,0.7,0.1,1) 0.3–0.45 s; exit cubic-bezier(0.3,0,0.8,0.15) 0.2–0.25 s; pops back.out(1.7).
- ≤5–10 words/s; contrast 4.5:1 (3:1 large bold); white on #FE2C55/#FF0033 only as large bold labels.
- No platform logos on mockups; App Store badge never animated, ≥40 px; Trustpilot reviews need name + logo + date.
- Native number formats: 3 significant figures rounded down (12.3K, 1.23M); tabular numerals.
- One short SFX where the element settles, under the voice.
Built from
TikTok / Google / Meta / YouTube / Apple primary docs; FTC; Trustpilot; Paddy Galloway (@PaddyG96); Spiegel Research Center; Barry Hott (@binghott); Dara Denney (@DenneyDara); Motion creative analytics; @YouTubeCreators; Nick Nimmin; Cody Wanner; jack friks (@jackfriks).
Every rule in the references cites its source by number. The full list, with links and what was taken from each, is in references/sources.md. Values marked as house defaults in a reference are our own starting points where no expert published a number.
Related skills
- ai-ugc-ad-video, ecommerce-video-ads: the ads these overlays go on.
- ai-ad-compliance-check: check the finished ad's claims and disclosures.
- HyperFrames registry (
npx hyperframes catalog --query "…"): about 450 ready-made blocks; the references name the ones to start from.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.