Pro Motion
Pro Motion: make a high-taste motion-graphics launch film, brand film, TVC or promo video and the unconventional campaign around it, audio first: pick a surprising campaign mechanism (media hijack, fake-broken ads, meme replies, UGC army, FOOH), plan the music as a marketing asset, then render the film in code (canvas to MP4) cut to the beat with AE-style effects. Also builds stylized web pages the same way (official site, landing page, interactive hero: live WebGL type, cutout subjects, try-with-your-photo, waitlist). Use when the user asks for a launch video, product film, brand ad, app prom
Install
npx skills add jack-reson8/pro-motion --skill pro-motiongit clone --depth 1 https://github.com/jack-reson8/pro-motion.git /tmp/pro-motion
mkdir -p ~/.claude/skills
cp -r /tmp/pro-motion/plugins/pro-motion/skills/pro-motion ~/.claude/skills/pro-motionPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Pro Motion — MG film, audio first (launch · brand · TVC · promo) A method for making motion-graphics films that read as designed, not templated — in code, fast, locked to music. It was distilled from a real project that went through ~10 rounds: early cuts were rejected as "PPT", "ugly material", "text floating on top", "pop art when I asked for stylized"; later cuts were accepted. **The difference was the method, not the tooling.** Follow the steps in order; each one exists because skipping it failed once. ## Web pages: same method, different medium (read first if the deliverable is a website) A landing page or site hero is a film that waits for a finger. Do **not** start from a page layout. Read `references/web-craft.md` and follow its W0 order: liked reference → `scripts/web_layers.js` layer dump → technique sheet committed **before** site code → `Register:` + style frame beside the reference → build from `assets/web-hero/` → verify like a phone. `python3 scripts/web_gate.py <project>` must print ✓ before the first site commit and `--ship` before the user sees anything. Skipping this order produced "完全不是一个事情, web 感太重" (2026-10-24); following it produced "这回真的很好". ## Ideas and brand: process first, cases second
Details
- Skill name
pro-motion- Repository
- jack-reson8/pro-motion
- Path
plugins/pro-motion/skills/pro-motion/SKILL.md- Repo updated
- 25 October 2026
- Listed in
- karanb192/awesome-claude-skills
FAQ
What does the Pro Motion skill do?
Pro Motion: make a high-taste motion-graphics launch film, brand film, TVC or promo video and the unconventional campaign around it, audio first: pick a surprising campaign mechanism (media hijack, fake-broken ads, meme replies, UGC army, FOOH), plan the music as a marketing asset, then render the film in code (canvas to MP4) cut to the beat with AE-style effects. Also builds stylized web pages the same way (official site, landing page, interactive hero: live WebGL type, cutout subjects, try-with-your-photo, waitlist). Use when the user asks for a launch video, product film, brand ad, app prom
How do I install the Pro Motion skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add jack-reson8/pro-motion --skill pro-motion. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Related skills
Scanning For Accessibility Issues
jeremylongshore/claude-code-plugins-plus-skills
This skill enables Claude to perform comprehensive accessibility audits. It uses the accessibility-test-scanner plugin to identify WCAG 2.1/2.2 compliance issues, validate ARIA attributes, check keyboard navigation, and assess screen reader compatibility. Use this skill when the user requests an accessibility scan, audit, or compliance check, or when terms like "WCAG", "ARIA", "screen reader", "accessibility testing", or "a11y" are mentioned. It provides actionable insights for improving web application accessibility.
Pdp Audit
llizell/pdp-audit
Research-backed UX and conversion audit of ecommerce product detail pages (PDPs). Use this skill whenever the user wants to review, audit, critique, or improve a product page — including requests like "review this PDP", "audit my product page", "why isn't this page converting", "UX review of [URL]", "check this product page against best practices", or when the user shares a product page URL or screenshots and asks for feedback. Also trigger for CRO reviews, conversion audits, or design QA of product pages, even if the words "audit" or "PDP" are not used.
Multi Stack MCP
VovikP/multi-stack-mcp
Generate native UI sections (hero, pricing, features, CTA, footer) for Next.js, Flutter, WordPress, or Vue from a unified pattern catalog with shared design tokens. Use when the user asks to "add a hero", "insert pricing section", "build landing page section", "create Flutter widget for marketing block", or wants the same brand styling applied across multiple stacks.
Impresario
Shushant17711/impresario
Use when building, creating, designing, redesigning, animating or polishing any website, landing page, portfolio, product page, hero, microsite, component or app screen in any frontend stack — even when the user gives only a subject ("make a website for X") with no style direction. Autonomously invents a memorable, subject-specific concept and ships heavily animated, flowing, award-level (Awwwards style) work without asking the user for style choices. Also use when a result looks generic, templated, AI-made, flat, static or lifeless.
Keyword Icons
1ruthless-coder-ai/keyword-icons
Generate clean monochrome PNG icons from a keyword — three distinct concepts per keyword, 1:1 aspect ratio, transparent background, recolorable, ready to drop into PowerPoint, Keynote, or docs. Use this whenever the user asks for an icon, pictogram, or "a simple graphic that represents X" (hospital, growth, contract, security, teamwork…), in any language, even if they never say the word "icon". Also use it when the user wants to recolor, resize, or tweak an icon made earlier.
Build with Better Design
1better-designs/better-design-plugin
Build or redesign a web or mobile interface on a Better Design design system. Use when the user asks for an app, site, page, dashboard or component and wants it built on Better Design, or asks to choose, create or install a design system.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.