Claude Code Motion Studios

Plugin motion-graphics-skills in imMamdouhaboammar/motion-graphics-skills. Commands read from the repo's manifest — 11 days ago.

Skills (64)

• assetseeker

  Search free commercial-use creative assets across multiple online sources — photos, illustrations, icons, video footage, music, sound effects, and fonts. Use when the user needs to find assets for videos, PPTs, articles, or any content creation. Trigger on phrases like "find me a photo of", "search

• audio-mastering-mixer

  Mix and master voiceover, sound effects, and music stems to professional broadcast loudness standards. Use when adding SFX cues, balancing audio stems, mastering to minus 14 LUFS, ducking music under voice, or eliminating harsh whooshes.

• beat-sheet-director

  Build frame-exact beat sheets and lock motion graphics timelines to speech audio or musical bars. Use when timing motion graphics to voiceover audio, creating frame-by-frame beat sheets, or locking cuts to musical drops and tempo grids.

• blender-3d-studio

  Bridge Claude Code with Blender via Blender MCP for physical 3D models, clay previews, and contact shadow rendering. Use when 3D in the browser looks like a toy, when real materials and shadows are required, or when building 3D mascots and physical props in Blender.

• brandkit

  Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized

• canonical-motion-moves

  Choreograph the 10 canonical motion graphics moves with tested GSAP easing curves and durations. Use when animating UI elements, cards, and data callouts with standard moves such as rise, pop, count-up, checklist tick, typewriter, slide-in, blur-in, punch-in, reframe, and bar fill.

• continuous-shot-engine

  Plan and build seamless continuous single shot videos with zero hard cuts. Use when creating unbroken cinematic ads, continuous single shot promos, or when connecting scenes with a single shared visual motif or light filament.

• design-taste-frontend-v1

  The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

• design-taste-frontend

  Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

• director-gate-check

  Evaluate a motion graphics project against director quality gates before rendering or final delivery. Use when checking stage completion, verifying quality criteria, auditing director sign-offs, or preparing for client handoff.

• full-output-enforcement

  Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

• gpt-taste

  Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive sect

• gsap-core

  Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive

• gsap-frameworks

  Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless

• gsap-performance

  Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.

• gsap-plugins

  Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animati

• gsap-react

  Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.

• gsap-scrolltrigger

  Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when n

• gsap-timeline

  Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).

• gsap-utils

  Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.

• high-end-visual-design

  Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

• image-to-code

  Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny co

• imagegen-frontend-mobile

  Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative

• imagegen-frontend-web

  Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces compos

• industrial-brutalist-ui

  Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

• liquid-glass-25d

  Implement physical clear liquid glass shaders and 2.5D layered depth in motion graphics. Use when UI cards look flat, when building frosted or clear liquid glass interfaces, or when adding 3D depth planes around a talking head video.

• media-use

  Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses;

• minimalist-ui

  Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

• motion-bible

  Create and enforce the Motion Bible design system for a video project. Use when establishing motion principles, defining brand animation rules, picking typography scales, locking easing curves, or auditing visual consistency across scenes.

• motion-design

  Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-

• motion-studio

  Master operating system and coordinator for Claude Code Motion Studios. Use when starting a motion graphics project, choosing a specialist from this studio, guiding onboarding, checking director gates, or managing the production lifecycle from concept to delivery.

• opencv-fast-renderer

  Render 2.5D motion graphics programmatically using Python, NumPy, Pillow, OpenCV, and FFmpeg. Use when headless, lightweight, or serverless rendering is needed without browser engines, or for pixel-exact programmatic video generation.

• redesign-existing-projects

  Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

• remove-background

  Remove an image background with the Pilio developer API. Use when the user wants transparent-background cutouts, portrait or product background removal, or automated image background cleanup through Pilio.

• safe-zone-qa

  Verify vertical safe areas, aspect ratio conversions, and button clearance for mobile video platforms. Use when designing videos for Instagram Reels, TikTok, or YouTube Shorts, converting 16 to 9 widescreen to true 9 to 16 vertical re-layouts, or testing for UI button occlusion.

• speech-to-text

  Directs the agent to use faster-whisper as the high-accuracy speech-to-text / Voice-over transcription engine. Use when the task requires converting audio, voice narration, or Voice-over tracks into text for AI pipelines, subtitles, or content workflows.

• stitch-design-taste

  Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

• text-to-lottie

  Create, edit, or fix Lottie/Bodymovin JSON animations for the local Skia Skottie player. Use for text-to-Lottie, SVG/logo/type animation, loaders/icons, state feedback, UI microinteractions, lower thirds, diagrams, data/stat/chart animations, product promos, scene/camera motion, visual effects, scen

• tonejs

  Use when adding audio, sound design, music sequencing, or audio-reactive animation to a project. Use when syncing Tone.js with GSAP timelines, creating beat-locked animations, playing sound effects on motion events, generating oscillator tones, or building audio visualizers with waveform/frequency d

• transparent-alpha-export

  Export animations with transparent backgrounds as ProRes 4444 MOV and PNG image sequences. Use when exporting motion graphics cards, lower thirds, or counters for use over live footage in Premiere Pro, DaVinci Resolve, or Final Cut Pro.

• animated-chart

  Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that counts up, a before and after. Every value stays exactly as given. Use when someone says "animate my chart", "animated graph", "make my results move", "stat animation" or wants

• apple-launch-film

  Rebuild an Apple-style Mac launch film entirely in code with Claude Code. A thin menu bar, the black notch growing into widgets one scene at a time, full-screen gradient wallpapers and one short caption per scene. No screen recording, no After Effects. Use when someone says "Apple-style launch", "Ma

• brand-intake

  The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), plus a rule in CLAUDE.md so Claude reads them before

• host-workspace-operator

  Use when a ChatGPT/Codex Plugin workflow needs to inspect, search, modify, or verify files in the host workspace using the safest native tools available.

• jump-cut-pacing

  Tighten raw talking-head footage with silence trimming and intentional face-safe jump cuts. Detects pauses with FFmpeg, preserves breath padding, alternates subtle reframing only when it helps continuity, and keeps the speaker face safe. Use for talking-head edits, voice pause cleanup, jump-cut paci

• launch-video

  Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video fo

• loop-cover

  Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Only the one element you name moves, the loop is rotated so frame 1 shows the finished picture, and the seam is measured, not eyeballed. Use when someone says "animated cover", "make my cover move", "loopi

• milestone-reveal

  Make a 12-second looping milestone clip in code with Claude Code. Thousands of tiny points drift like a night sky, pull together into your real number (followers, subscribers, revenue, customers), a line draws underneath and the label settles in. Premium, not a party. Use when someone says "mileston

• mix-and-match

  Use when a motion concept must be original while drawing from two or more references, when supplied references feel too similar or derivative, or when the user asks to combine visual languages, cross-pollinate inspiration, or explore wildcard references. Do NOT use for single-reference analysis, lit

• model-showdown

  Give the same motion brief to three AI models, keep each first try, render all three the same way and stack them into one comparison video with model names and logos. Makes a 16:9 side-by-side for a newsletter and a 1080 x 1920 stacked reel for Instagram and TikTok. Use when someone says "compare th

• motion-brief-writer

  Turns a rough idea for an animated graphic into a precise build brief for Claude Code, in your own brand. Asks for anything essential first (exact numbers, size, length, brand), keeps real results apart from sample data, and never invents a figure. Use when someone says "brief this animation", "writ

• motion-director
• motion-effects
• newsletter-promo
• paper-cut-motion
• reel-export
• sandbox-python-executor
• sfx-picker
• speaker-cutout
• title-sequence-3d
• video-review-loop
• video-spotlight
• video-style-cloner
• vox-explainer