SKILL0:26UI UX Pro Max: design intelligence for agents
Styles, palettes and UX rules so agent-built sites stop looking generic.
Claude Code +2★ 135.9k/
Get Friday PicksSubmitOG Video Preview: link previews that move
A skill that turns the og:image you already approved into a short looping og:video, so your links play as video in iMessage, Discord and Telegram previews while every other app still shows the exact same still.
In short: A skill that turns the og:image you already approved into a short looping og:video, so your links play as video in iMessage, Discord and Telegram previews while every other app still shows the exact same still. It is a free skill for people who use Claude Code, Codex or Cursor and want help with seo & web.
Checked on · Added
Works with
| Agent / tool | Access / cost | Link |
|---|---|---|
| Claude Code | Paid Claude plan or API | claude.com/claude-code |
| Codex | ChatGPT plan or API | openai.com/codex |
| Cursor | Free tier + paid | cursor.com |
| GitHub repo | Open source · ★ 3 | hubeiqiao/og-video-preview |
Image: from the GitHub README, shown with credit.
Images from the project README on GitHub.
Try it in 60 seconds
npx skills add hubeiqiao/og-video-preview /plugin marketplace add hubeiqiao/og-video-preview /plugin install og-video-preview@og-video-preview-marketplace
Install command copied from the project README. Check the README for the latest version.
What it does
A skill that turns the og:image you already approved into a short looping og:video, so your links play as video in iMessage, Discord and Telegram previews while every other app still shows the exact same still.
OG Video Preview starts from the still link-preview image you already approved. It reads the image, sorts every element into one of twelve kinds (headline, logo, pill, photo and so on), cuts each one out over a refilled…
Short excerpt from the README of hubeiqiao/og-video-preview. Read the full README on GitHub.
Inside the repo
OverviewContentsFeaturesInstallationUsageHow it worksWhere og:video playsEvaluation
A prompt to try
Use /og-video-preview on public/og/home.png, show me the layer preview first, then render the loop and add the og:video tags to our layout.
Use /og-video-preview on public/og/home.png, show me the layer preview first, then render the loop and add the og:video tags to our layout.
Written by us so you can reuse it. Replace each [bracket] with your details.
Step by step
- Open the GitHub repo and watch the before/after examples.
- Install it with npx skills add hubeiqiao/og-video-preview (or as a Claude Code plugin from its marketplace).
- Make sure Python 3 with playwright, Pillow, opencv-python and numpy, Google Chrome and ffmpeg are installed.
- Ask your agent: use /og-video-preview to make my og:image move and add the meta tags. Review the layer preview and test frames before it renders the full loop.
Watch out for
Apple's players need your server to answer HTTP Range requests; the skill checks this and ships a Cloudflare Worker for hosts that don't. Apps that can't play video show the still, so check how your link looks in the apps your audience uses.
Docs, demos & materials
Common questions
What does OG Video Preview do?
A skill that turns the og:image you already approved into a short looping og:video, so your links play as video in iMessage, Discord and Telegram previews while every other app still shows the exact same still.
Which AI agents can use OG Video Preview?
It works with Claude Code, Codex and Cursor. The code is on GitHub at hubeiqiao/og-video-preview.
Is OG Video Preview free?
Free & open source (MIT). No account or API key. Runs with the agent plan you already pay for, plus free local tools (Python, Chrome, ffmpeg).
How do I install OG Video Preview?
Run the install command from the README: “npx skills add hubeiqiao/og-video-preview”. Check the README on GitHub for the latest version, then follow the steps on this page.
Is OG Video Preview safe to install?
We read 93 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine. How to check a skill before you install it →
Sources & credit
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
Related skills and use cases in SEO & Web
- UI UX Pro Max: design intelligence for agents Skill
- Taste Skill: art direction for coding agents Skill
- Diagram Design: branded diagrams as one HTML file Skill
- Hallmark: web pages that don't look AI-made Skill
- Claude SEO: a full SEO and AI-search audit of any site Skill
- oil-motion: scroll and cursor web animations Skill
- Oil UI: three real design directions, side by side Skill
- AI Design Skills: landing pages and design-to-motion loops Skill
Related
SKILL0:26Claude Code +2★ 135.9k
SKILL0:39Taste Skill: art direction for coding agents
Set taste dials and references so agent UIs don't look AI-generated.
Claude Code +2★ 96.5k
SKILLDiagram Design: branded diagrams as one HTML file
45 diagram types as self-contained HTML+SVG in your brand, great for decks and carousels.
Claude Code +2★ 55.4k
SKILLHallmark: web pages that don't look AI-made
A design skill that gives each page its own layout and look from a set of themes, then checks the result against a long list of tired AI design habits before handing it over. It can also audit or rebuild a page you already have.
Claude Code +2★ 30.6k
SKILLClaude SEO: a full SEO and AI-search audit of any site
Give Claude Code a website and /seo audit checks crawling, speed, schema, content quality, local SEO and whether AI answer engines are likely to cite the pages, then returns a fix list sorted by what matters most. 26 focused SEO skills and 19 helper agents, with smaller commands for a single page, schema, sitemaps or a content brief.
Claude Code★ 23k
SKILLoil-motion: scroll and cursor web animations
A web animation skill that builds animations that follow scrolling and mouse movement on your pages.
Claude Code +1★ 2.6kFree newsletter
Friday Picks
New AI tools you can use right away, in plain words. Every Friday.