immamdouhaboammar/motion-graphics-skills

Creative direction and code-driven motion production without requiring After Effects. Build brand films, event promos, explainers, kinetic typography, product launch films, editorial motion and 2D/3D sequences. Use the pack for direction and craft; use HyperFrames for reusable runtime, validation, audio and render workflows.

Watch the work

Seven films with original audio. The six promos below use native GitHub attachment players with timeline seeking and fullscreen support. The Egyptian cartoon opens its full committed MP4 from the linked preview. Original master renders and project sources (where provided) are available below each film.

Motion Graphics Skills | Arabic promo

26.6 seconds · Arabic voice-over · 1080 × 1920 · 30 fps

https://github.com/user-attachments/assets/908e651d-f5f5-431c-afaa-ac5dd38100d4

Full-length original MP4 · Project source

The Curve | English promo

31 seconds · English voice-over · 1080 × 1920 · 30 fps

https://github.com/user-attachments/assets/7bd0ed81-8612-4a2e-bae6-dfad2a4f0897

Full-length original MP4 · Project source

5 Skills Countdown | English promo

52 seconds · Music and sound effects · 1080 × 1920 · 30 fps

https://github.com/user-attachments/assets/899f4294-689e-4c1c-877c-3623a8faa39a

Full-length original MP4 · Project source

TEOLA | Product Launch

Final product-launch film

https://github.com/user-attachments/assets/6a9d2ff2-4e78-42c1-b8a7-3051579b451d

Full-length original MP4

Four Steps | Events

Arabic · Vertical event promo · Voice-over

https://github.com/user-attachments/assets/1434eb2f-b280-4272-9cd3-b9f8107fb747

Full-length original MP4 · Project source

JEDAR | ليش مجاني؟

59 seconds · Arabic voice-over · 1080 × 1920 · 30 fps

https://github.com/user-attachments/assets/592daa6c-5ce0-4cef-ad3e-40e976729066

Full-length original MP4 · Project source

متلبس بالشطارة | Egyptian satirical cartoon

112.3 seconds · Original Egyptian Arabic narration · 1920 × 1080 · 30 fps

imageWatch متلبس بالشطارة

Watch the full film / download MP4 · Editable project and original art · Storyboard, motion proofs and QA

The thumbnail opens the committed full video. A native in-README attachment player has not been uploaded for this film.

ChatGPT and Codex plugin

The pack also supports a skills-only plugin with 50 domain specialists plus three host helpers. Start with motion-studio to route a task according to the tools available in your session.

See plugin installation, the complete 53-skill and 36-module catalog, and the runtime and engine guide. Planning, storyboards and review can run without a media-provider account. Rendering requires an execution-capable host and working dependencies.

Build a private import archive from a checkout:

python3 tools/build_plugin.py /absolute/path/motion-graphics-skills-1.2.0.zip

Install

One line, about 30 seconds:

npx skills add imMamdouhaboammar/motion-graphics-skills

Then open Claude Code, pick Opus 5.5 with /model, and run brand-intake first.

Manual copy into Claude Code

Download this repo (green Code button, then Download ZIP) and unzip it, or clone it:

git clone https://github.com/imMamdouhaboammar/motion-graphics-skills.git

Copy the skill folders inside skills/ into ~/.claude/skills/ (every project) or your project's .claude/skills/ (one project). This loop keeps any skill folder you already have:

mkdir -p ~/.claude/skills
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  destination="$HOME/.claude/skills/$(basename "$skill")"
  if [ -e "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination"
  fi
done

Claude Desktop (upload one skill)

Zip one skill folder and upload it in Customise, then Skills. From motion-graphics-skills/skills:

zip -r brand-intake.skill brand-intake

Start with brand-intake, then add the skills you need.

Codex

From your project's root, after cloning this repo into it:

test -d motion-graphics-skills/skills || { printf 'Missing source skills folder\n'; exit 1; }
mkdir -p .agents/skills || exit 1
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  name="$(basename "$skill")"
  destination=".agents/skills/$name"
  if [ -e "$destination" ] || [ -L "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination" || exit 1
  fi
done

Open a fresh Codex task and check the skills load from .agents/skills/<name>/SKILL.md.

Export to MP4

Add HyperFrames once (free, open source): npx skills add heygen-com/hyperframes. Or use the included Animation Export Kit to turn any of these HTML files into an MP4 (Mac and Windows).

Start here: one line, 60 seconds

When you want a specific job done properly, pick a skill below.

Engines and production routes

Video Style Cloner adds reference analysis, approved storyboards, style-specific production and independent review. Its 36 nested modules include painted animation, anime cel, pixel art, crayon storybook, paper cutout, whiteboard, explainers, product promos, music videos, captions and HyperFrames guidance. These are supporting modules within one imported skill. The optional Rust CLI coordinates project-provided render/review adapters. Its current style-cloning track is 2D.

See the engine and runtime matrix for prerequisites, the optional Rust contract and the bundled Blender guide's routing limit.

The skills

53 installed skill folders are available in skills/. The table below highlights 22 motion-production skills; the remaining folders cover supporting workflows and design, audio and runtime tooling. Start with motion-director for broad creative work.

See each skill's SKILL.md for its trigger phrases, the inputs it asks for and what it learned the hard way.

How they fit together

Use motion-director for broad motion work and brand-intake once per brand. brand-intake writes brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), and adds a rule to CLAUDE.md so Claude reads both before it animates anything. Every other skill reads those two files first. Without them, a skill asks for your hex codes, font and logo, and never calls its result on-brand.

flowchart TD
  D["motion-director<br/>concept · art direction · runtime routing · QA"]
  B["brand-intake<br/>brand.md + MOTION.md"]
  P["motion-brief-writer"]
  M["mix-and-match<br/>reference genes · wildcards · creative distance"]
  V["jump-cut-pacing · speaker-cutout · video-spotlight · paper-cut-motion"]
  L["launch-video · apple-launch-film"]
  E["vox-explainer · animated-chart · milestone-reveal · motion-effects"]
  O["title-sequence-3d"]
  X["model-showdown"]
  R["newsletter-promo · loop-cover · reel-export"]
  Q["video-review-loop"]

  D --> B
  D --> P
  D --> M
  D --> V
  D --> L
  D --> E
  D --> O
  D --> X
  D --> R
  D --> Q
  B --> P

Use it

For broad motion work, start with motion-director. Run brand-intake once per brand when brand.md and MOTION.md do not already exist. Narrow requests can route directly to a specialist:

"Direct this motion film" → motion-director
"Review this motion cut by timecode" → video-review-loop
"Set up my brand" → brand-intake
"Brief this animation" → motion-brief-writer
"Mix these references into one original direction" → mix-and-match
"Cut the silences and tighten my video" → jump-cut-pacing
"Put graphics behind me" → speaker-cutout
"Spotlight this product and dim background" → video-spotlight
"Make an investigative paper-cut video" → paper-cut-motion
"Make a launch video for my coaching programme" → launch-video
"Make an Apple-style launch for my app" → apple-launch-film
"Why does every logo look the same now?" → vox-explainer
"Animate my Q3 chart" → animated-chart
"Celebrate 10,000 subscribers" → milestone-reveal
"Build the chart morph with my numbers" → motion-effects
"Make a button that turns into a video player" → motion-effects
"Give me a cinematic opener" → title-sequence-3d
"Same prompt, three AIs" → model-showdown
"Promo for this edition" → newsletter-promo
"Make my cover move" → loop-cover
"Make this a reel" → reel-export

The brief behind my "Why do we dream?" film

One line gets you close. A proper brief gets you something people share. This is exactly what I typed (with vox-explainer installed):

Why do we dream? And then someone suddenly wakes up, zooms out of the eye, and goes into outer space. There are neural networks of interconnectivity to convey the brain.

It found a source for every fact before it drew anything, wrote the script, added a voice and rendered it. Then give it notes like you would a designer.

Prompts

Every prompt from the edition, ready to paste, one file per job. Each one says when to use it.

What each skill needs to run

Only install what the job needs. Planning and local media workflows do not require provider credentials. Optional media, TTS and music providers may need API keys or authorized accounts.

House rules every skill follows

1. Reuse first. Use the current project, specialist skills and HyperFrames capabilities before building new infrastructure.
2. Facts first. Every name, date and number on screen comes from a list you approve. Nothing invented.
3. Your brand, not the average. Colours and fonts come from brand-intake or from you. With nothing given, it asks.
4. Banned defaults: typewriter text, glow, bounce, gradients on text, purple-to-blue backgrounds.
5. Motion on twos for anything hand-made in feel (hold each pose for 2 frames at 24fps).
6. First 3 seconds carry the hook. If the first frame is empty, it's cut.
7. Check before export. One frame from the middle of every shot, checked for cut-off text, overlaps and wrong facts.
8. Real assets only. Logos and screenshots come from your files, never redrawn from memory.

Pairs well with: Apple's motion rules

A free skill (not mine) that turns Apple's design guidelines into rules Claude follows:

npx skills add emilkowalski/skills --skill apple-design

Then ask: "Use the apple-design skill to audit this animation. Give me a ranked list of everything that feels off, worst first." Paste the fixes back as notes.

Pairs well with: real UI components

If your video shows a product, don't let Claude draw the buttons and cards from scratch. It guesses the spacing and the UI looks fake. 21st.dev publishes real components with a prompt under each one. Paste this once, then paste any component prompt straight in:

Add this rule to CLAUDE.md: whenever I paste a component prompt or third-party component code, treat it as a structural donor only. Keep its engineering. Replace its demo copy with my real copy, and translate every colour, border, shadow, font and timing to MOTION.md.

Note

One honest limit: a photoreal human face. Code draws motion, type and UI brilliantly, but a lifelike person still needs an image model (for now).

Runtime philosophy

For new code-driven motion projects, HyperFrames is the preferred production infrastructure. Motion Director owns the creative decisions while HyperFrames owns the production mechanics it already provides.

The pack uses a reuse-first ladder:

1. Current project primitives
2. A specialist skill already in this pack
3. HyperFrames workflow, registry block, adapter, CLI, media, or audio capability
4. Native HTML, CSS, SVG, Canvas, Web Audio, or WebGL
5. GSAP for complex seekable choreography
6. Three.js when the shot truly needs 3D geometry, occlusion, lighting, or camera depth
7. Custom infrastructure only when the earlier layers do not solve the problem

For a fresh HyperFrames project, install its current skills with:

npx skills add heygen-com/hyperframes

The master skill adds creative direction, narrative, typography, composition, motion craft, Arabic RTL guidance, reference analysis, and visual QA. HyperFrames is expected to handle the renderable project contract, reusable registry, supported adapters, diagnostics, preview, rendering, batch variants, and audio relationships for greenfield projects. The pack does not copy HyperFrames' renderer or rebuild its engine.

Meet the Motion Director Crew

Every frame is code, and every cut has a specialist. These retro cyberpunk pixel art mascots were crafted with the Sprite Fusion API to personify the creative roles across the skills:

Explore the full 12-sprite pixel catalog and manifests in assets/sprites/.

Contributing

Found a way to improve a skill? Open an issue.

Before debugging a render, a clipped word or a broken transition, check Failure-lessons. It records what already went wrong on real films, how it was proven, and the rule that now prevents it.

Run bash validate-skills.sh before you submit. It checks every skill's frontmatter, that the name matches the folder, the description length, and the house style across every skill, its reference files and the prompts folder.

Author and Ownership

Licence

Proprietary (All Rights Reserved). Copyright (c) 2026 Mamdouh Aboammar. All rights reserved. Strictly prohibited to copy, distribute, modify, reverse engineer, or commercially exploit without explicit written permission.