motion-graphics-skills

In the author's own words, from each skill's SKILL.md — showing the first 30 of 81 files.

• 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 a data graphic that loops.

  skills/animated-chart/SKILL.md on GitHub (opens in a new tab)

• 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", "Mac launch video", "notch animation", "make it look like an Apple keynote", "macOS UI launch film" or…

  skills/apple-launch-film/SKILL.md on GitHub (opens in a new tab)

• 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 for icons", "I need background music", "find video footage", "search fonts", "找一张图片", "搜素材", "帮我找图标…

  skills/assetseeker/SKILL.md on GitHub (opens in a new tab)

• 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 it animates anything. Use at the start of any motion project, or when someone says "set up my brand…

  skills/brand-intake/SKILL.md on GitHub (opens in a new tab)

• 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 for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning,…

  skills/brandkit/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/design-taste-frontend-v1/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/design-taste-frontend/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/full-output-enforcement/SKILL.md on GitHub (opens in a new tab)

• 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 section spacing.

  skills/gpt-taste/SKILL.md on GitHub (opens in a new tab)

• 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 or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user nee…

  skills/gsap-core/SKILL.md on GitHub (opens in a new tab)

• 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 another library is specified. For React use gsap-react.

  skills/gsap-frameworks/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/gsap-performance/SKILL.md on GitHub (opens in a new tab)

• 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 animations, draggable, SVG drawing, or plugin registration.

  skills/gsap-plugins/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/gsap-react/SKILL.md on GitHub (opens in a new tab)

• 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 no library is specified.

  skills/gsap-scrolltrigger/SKILL.md on GitHub (opens in a new tab)

• 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).

  skills/gsap-timeline/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/gsap-utils/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/high-end-visual-design/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/host-workspace-operator/SKILL.md on GitHub (opens in a new tab)

• 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 compressed boards, generate fresh standalone images for sections or detail views instead of cropping…

  skills/image-to-code/SKILL.md on GitHub (opens in a new tab)

• 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 direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone m…

  skills/imagegen-frontend-mobile/SKILL.md on GitHub (opens in a new tab)

• 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 composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied h…

  skills/imagegen-frontend-web/SKILL.md on GitHub (opens in a new tab)

• 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.

  skills/industrial-brutalist-ui/SKILL.md on GitHub (opens in a new tab)

• 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 pacing, or requests such as "cut the silences", "tighten this video", and "smooth talking head zooms".

  skills/jump-cut-pacing/SKILL.md on GitHub (opens in a new tab)

• 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 for my product", "announce my course/cohort/offer", "make a launch reel" or "trailer for my product".

  skills/launch-video/SKILL.md on GitHub (opens in a new tab)

• 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", "looping GIF cover", "newsletter cover GIF", "animate my thumbnail" or wants a cover that moves in the in…

  skills/loop-cover/SKILL.md on GitHub (opens in a new tab)

• 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, produce voiceover, transcription, captions, and background removal through one shared audio engine,…

  skills/media-use/SKILL.md on GitHub (opens in a new tab)

• 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 "milestone video", "celebrate 10k followers", "animate my subscriber count", "number reveal", "particle numb…

  skills/milestone-reveal/SKILL.md on GitHub (opens in a new tab)

• minimalist-ui

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

  skills/minimalist-ui/SKILL.md on GitHub (opens in a new tab)

• 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, literal imitation, or final render QA.

  skills/mix-and-match/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• oil-motionby oil-oil Web animation skill for Claude Code & Codex. 帮你做跟着滚动和鼠标动的网页动画。 2.6k stars · 1 skill
• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 280k stars · 30 skills
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 270k stars · 1 skill
• andrej-karpathy-skillsby multica-ai A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls. 220k stars · 1 skill
• ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote. 164k stars · 6 skills
• ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. 136k stars · 7 skills