Product Promo Animation

Generate a single-file, self-contained HTML product promotional animation video (15-30s) from a product brief/PRD. Produces a multi-scene GSAP timeline storyboard, a four aspect-ratio switcher (16:9/4:3/1:1/9:16), a zero-emoji SVG icon system, brand colors harvested from the official site, playback controls, and SEO video metadata. Use when the user asks for a product promo animation, marketing/ad video, animated HTML demo, or product launch video, or mentions building a product video with GSAP/motion/SVG. 基于产品需求文档/PRD/简介生成单文件、自包含的 HTML 产品宣传动画视频；当用户要求制作产品宣传动画、营销/广告视频、HTML 动画演示或产品发布视频时使用。

34 stars 8 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add jitOffice/jit-motion --skill product-promo-animation

Manual install

git clone --depth 1 https://github.com/jitOffice/jit-motion.git /tmp/jit-motion
mkdir -p ~/.claude/skills
cp -r /tmp/jit-motion/. ~/.claude/skills/product-promo-animation

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

> **Languages:** English | [简体中文](SKILL.zh-CN.md)

# Product Promo Animation

Turn a product brief into a broadcast-quality, single-file HTML animated promo video. This skill distills a pattern proven across multiple product launches (multi-dimensional tables, AI knowledge bases, collaborative document tools).

## What this skill produces

A single self-contained `.html` file with:
- A 15-30s animation telling the product story scene-by-scene, driven by one GSAP timeline
- A four-aspect-ratio switcher (16:9 landscape, 4:3, 1:1, 9:16 portrait) with automatic layout reflow
- Polished SVG-only icons (zero emoji) + brand colors harvested from the product's official site
- Full playback controls (play/pause, replay, scrub, scene nav, aspect switcher, keyboard shortcuts)
- SEO video metadata (JSON-LD `VideoObject`, Open Graph, canonical)

## When to use

Trigger when the user wants a **product promo animation/video as HTML**, typically supplying:
- A brief / PRD / markdown spec describing the product and the capabilities to highlight
- The product name and official website (for brand harvesting)
- Constraints: duration, visual style, reference videos, forbidden elements

## Hard rules (non-negotiable)

These come from recurring user feedback; violating any one is a defect.

Read the full skill on GitHub

Details

Skill name: product-promo-animation
Repository: jitOffice/jit-motion
License: MIT
Repo updated: 20 September 2026

FAQ

What does the Product Promo Animation skill do?

How do I install the Product Promo Animation skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add jitOffice/jit-motion --skill product-promo-animation. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Product Promo Animation popular?

It lives in jitOffice/jit-motion, which has 34 GitHub stars and 8 forks.

Related skills

Clone Team

Varalix-Digitech-Solutions/clone-team

Clone any website with a coordinated team of AI agents — a Manager (you), a Frontend Developer, a Backend Architect, and a Tester — that iteratively and autonomously build a pixel-perfect UI clone AND produce thorough architecture documentation of how the site works. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, mirror, or copy a website — especially when they want it done thoroughly, in a specific tech stack (React, Vue, Svelte, Angular, etc.), behind a login, or with proper documentation. Triggers on "clone this site", "rebuild this app", "make a copy of <u

Frontend & DesignIn 1 list

Jiujiastudy

jiujiastudy/jiujiastudy

救驾（jiujiastudy）是留学生的 Canvas / Moodle 学习手帐：盯 deadline、排本周该学什么、按状态给建议。用户提到课程、作业、deadline、考试、Canvas、Moodle、老师，或说「现在什么情况」「最近要交什么」「这周学什么」「做完了」「没状态 / 累 / 来不及」「交之前检查」「想问老师」「做学习页」「一直在拖 / 开不了头」时使用；第一次用时自己完成设置，只向用户要学校网址（Canvas 另要 token）。

Frontend & Design10

Social Cards

DennisWei9898/social-cards-engine

品牌無關的 IG/Threads/X/FB 圖卡引擎——把任何主題（idea / 文章 / 教學）變成輪播圖卡 + 4 平台文案。HTML+CSS 模板 → Chrome headless 渲染 PNG。風格由 brand pack 決定（brands/），接哪個 pack 出哪個風格，引擎不綁死品牌。觸發詞：做圖卡、生 carousel、social card、IG 圖卡、Threads 卡片、貼文文案、教學圖卡、infographic、輪播圖、carousel post。

Frontend & Design

Stylekit

AnxForever/stylekit-skill

Apply StyleKit visual styles and public assets when building, restyling, or reviewing UI. Use for named StyleKit styles, visual direction, mobile interface patterns, and component-library selection; preserve the target platform and existing product behavior.

Frontend & Design

Behavioral Design

rastian/behavioral-design-skills

Applies behavioral psychology and behavioral economics to product and UX design. Use when a designer, PM, researcher, or design manager wants to diagnose why users aren't completing a flow, adopting a feature, or changing behavior; design nudges or behavior-change interventions; reduce friction or cognitive load; run a behavioral design workshop or sprint; audit a design for psychological effectiveness; or apply principles like loss aversion, social proof, choice architecture, habit formation, or implementation intentions. Also triggers for: onboarding drop-off, feature adoption, engagement de

Frontend & Design

Design Md

arumwu/design-md-skill

Reference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's look; wants to pick a design direction from real design systems; says "like <brand>", "make it feel like Linear / Stripe / Apple"; or needs a concrete design-token starting point before frontend work. Pairs with frontend-design and tailwind-design-system.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.