Contributor guide

Skill media guide

Add animated thumbnails, GIF previews, and video loops to your skills. They play on hover in the catalog, and a good preview converts browsers into installers.

Quick start

Add a media block to your SKILL.md frontmatter:

---
name: My Skill
description: What this skill does.
media:
  thumbnail: https://raw.githubusercontent.com/you/skill/main/assets/preview.png
  gif: https://raw.githubusercontent.com/you/skill/main/assets/preview.gif
  alt: "Short description of what the preview shows"
---

Media fields

FieldFormatSizePurpose
thumbnailPNG, JPG, WebP500 KBStatic preview + OG image
gifAnimated GIF3 MBHover animation in catalog
videoMP4 or WebM5 MBHover video loop (silent)
lottieLottie JSON URL200 KBVector animation
altText (125 chars)n/aScreen reader description

Recommended tools

Full guide

The complete media guide with hosting options, FFmpeg commands, and OG image specs is available as a Markdown file for contributors.

Skill Media Guide · Skill Me