Claude Skills by JagZ999

github.com/JagZ999

17 skillsA× 174 installs20 views

Aesthetic PresetsAWhole-scene aesthetic presets for motion-graphics videos — combinations of background + element + type that read as one recognizable style. Isometric UI (planes on a 30° grid, floating, long shadow), collage/cutout (flat color + photo cutouts + torn-paper stickers + doodle connectors + halftone + timeline), Apple-minimalist (huge negative space, one shape/word, slow eases, thin type), crypto/neon-glow (near-black + starfield + neon edges + spinning 3D token), and dashboard-reveal (UI window r...ai-agentsVotes: 0GitHub stars: 2
Audio StemsAGenerate and place a video/animation's audio as SEPARATE stems — voiceover, background music, and a time-synced sound-effects track — and optionally a ducked master mix. Use when adding music and SFX to an animation or explainer, when iterating on audio WITHOUT re-rendering the video, when you need whooshes/clicks/typing/risers placed on exact timeline moments, or when the user wants the music/SFX/VO delivered as separate files. Generates music + SFX via ElevenLabs and mixes with sidechain du...ai-agentspythongoVotes: 0GitHub stars: 2
Backgrounds GradientsALiving backgrounds & moving gradients for motion-graphics videos — the layer that makes a frame feel alive instead of a static slide. Color-arc gradient that shifts per scene with drifting blobs, a soft mesh light-wash that glides across, blueprint line grids, dot-matrix fields, glowing neon curved paths with travelling light-dots, starfields, and grain/paper/paint texture overlays. Use when a scene looks flat or slide-like, when adding a moving gradient behind the whole piece, or matching a ...ai-agentsgoVotes: 0GitHub stars: 2
Element MotionAShapes, orbs and particles that move in the frame — the element layer of motion graphics. Concentric ring ripples, floating outlined circles at varied depth (bokeh), a small ring that blooms into a big glow orb, scattered circles converging to a focal point, two circles that stretch and fuse (metaball), morphing solid gooey blobs, sparkle/twinkle bursts, self-drawing line icons, and wobbly doodle connectors. Use when adding animated shapes/particles behind or around content, giving a scene ki...ai-agentsgoVotes: 0GitHub stars: 2
Explainer VideoACreate animated, camera-zooming product explainer videos (SVG/HTML style) with voiceover, background music, and synced sound effects. Use when the user wants to turn product screenshots or a screen-recording/demo into an explainer video, an animated walkthrough, a narrated product demo, or a launch/marketing video. The skill interactively interviews the user about design (colors, fonts, scenes, tone), then about the TTS provider (and API key), builds a self-contained animated HTML explainer, ...ai-agentspythongoVotes: 0GitHub stars: 2
Glass CardsABuild frosted "liquid glass" UI cards/panels on a dark animated background, where a card ZOOMS FORWARD to demo itself and then falls back as the next one rises, plus a gentle camera zoom-in/settle. Use for glassmorphism UI mockups, a product explainer's feature panels, an animated card grid where each card steps forward in turn, or any "frosted glass panels that zoom out and come back" / "liquid glass" look. Triggers: "liquid glass cards", "glassmorphism panels", "frosted glass UI", "cards th...ai-agentsgoVotes: 0GitHub stars: 2
Skills DirectorySkills Directory Look up any of 103,619 scanned skills — grade, score, and every finding. Free.Check a skill
Kinetic TypographyAAdd animated "kinetic typography" to an HTML page — headlines whose words cascade in one after another, a centered hero headline that gets pushed aside as content/cards slide in, top/bottom supporting lines that slide out of the headline, and a fractured/"cracked" word effect. Use when building motion-graphics-style titles, an animated headline reveal, a product explainer's text, or any "the words move like that launch video" request. Triggers: "animate the headline", "kinetic typography", "m...ai-agentsgoVotes: 0GitHub stars: 2
Mark Driven GroundAA background that is built AROUND the element travelling through the frame — a logo, a dot, a cursor. Per-beat path rings centred on the landing point, the flight path drawn on the ground, a lit arc that follows the mark and collapses into the landing, a wide soft glow that blooms where it lands and settles for the rest of the chapter, and a colour TRACK that walks the whole frame from one chapter's colour to the next. Use when a background feels decorative rather than connected to the motion...ai-agentsgoreactVotes: 0GitHub stars: 2
Motion GraphicsASuper-skill for motion-graphics videos in HTML/CSS/JS — the launch-reel / SaaS-explainer look. An umbrella over sub-skills for TEXT motion, BACKGROUNDS & GRADIENTS, ELEMENT / SHAPE / PARTICLE motion, GLASS & UI accents, PRODUCT composition, SCENE TRANSITIONS, and UI / DATA motion. Holds a named "platter" of ~40 reusable moves (each with a render-safe recipe) plus a drop-in building- block library (assets/motion.css + motion.js). Use when the user wants to build or restyle an animated title, e...ai-agentsgoVotes: 0GitHub stars: 2
Product MotionAWays to show the product in a motion-graphics video — composition moves. App icons ring a central hub and connect (integrations orbit), icon bubbles float in space (constellation), a product screenshot rises/tilts in on a gradient (screen reveal), person/logo social-proof chips slide in, and tilted cards fan out in perspective. Use when presenting integrations, an ecosystem, a dashboard/UI screenshot, testimonials, or a set of feature cards. Triggers: "integrations orbit / hub and spoke", "ap...ai-agentsgoVotes: 0GitHub stars: 2
Scene TransitionsAScene-to-scene transitions for motion-graphics videos — the glue between beats, beyond a plain crossfade. A solid shape wipes across to swap scenes, the next scene is revealed through an expanding circle (iris), an outgoing scene is pushed out by an incoming shape, a shape in scene A morphs into an element of scene B (match-cut), an organic blob mask grows to swap (liquid wipe), or content cross-dissolves while a shared gradient persists. Use when cutting between scenes feels abrupt or generi...ai-agentsgoVotes: 0GitHub stars: 2
Smooth RenderARender an HTML/CSS animation to a smooth, sharp MP4 at native resolution (up to 2K/4K) without choppy motion. Use when a CSS/JS animation (especially glassy/blur/backdrop-filter, gradient, or continuous-motion scenes) renders JANKY or stuttery via screenshot/screencast capture, when you need per-frame-accurate logical-time output with no wall-clock drift, or when muxing audio onto a rendered animation. Triggers: "render my animation to video", "the capture is choppy/stuttering", "export this ...ai-agentspythongoVotes: 0GitHub stars: 2
Text MotionAKinetic text-motion + gradient + transition toolkit for HTML/CSS motion-graphics videos — the polished "launch reel" look: keyword glow-highlight sweeps, gradient-filled hero words, scramble-decode headlines, ticker-roll word swaps, living color-arc gradient backgrounds with drifting blobs, concentric ring ripples, blueprint grids, and glass UI accents (pills, cursors, prompt cards). Use when making an animated title/heading feel dynamic and varied, adding a moving gradient background, giving...ai-agentsgoVotes: 0GitHub stars: 2
Travelling MarkAMake one brand mark (logo, dot, glyph) TRAVEL through a film as a single rigid object: it lifts off the product's sidebar logo on a hard cut, flies into a title card on a named path (zip, drop, spiral, hops, orbit), lands beside the heading, rides the typed line as a cursor, breathes on the hold, and leaves along an exit (inflate, roll, dive) that also opens the next dashboard around the logo slot. Also covers the opening "round" (one arc-length-parametrised orbit into the sidebar) and the cl...ai-agentsgospringVotes: 0GitHub stars: 2
Ui Data MotionAUI and data animation for product-demo motion graphics — the mechanics of a SaaS/dashboard reveal. Chart bars grow from the baseline, an SVG line/area draws itself on, a number rolls up to its value (odometer counter), UI cards deal into place, a toggle/tab slides between states, a cursor drives a real UI (click → state change), a notification pops in, and a timeline playhead slides through dates. Use when animating a dashboard, chart, metric callout, feature toggle, or a cursor-driven produc...ai-agentsspringawsVotes: 0GitHub stars: 2
Vo SyncASync an animation, captions, or cues to a voiceover so visuals land on the spoken words, and pace the timeline tightly to the narration (no dead air). Use when you have (or will generate) a voiceover and want cards/elements/captions to appear exactly when they're mentioned, when card raises feel out of sync with the narration, or when there are long voice-less gaps to tighten. Generates VO with word-level timestamps (ElevenLabs) and computes per-scene durations + cue times from them. Triggers...ai-agentspythongoVotes: 0GitHub stars: 2
Walkthrough FilmABuild a long-form (2-6 minute) narrated product walkthrough film as a deterministic logical-clock HTML page, then render it per scene and assemble a pacing-warped mix. Use when a product demo is too long for a single-page explainer, when a film must ship in many review rounds or in several brand skins from ONE source tree, when scene durations must be derived from voiceover word timestamps, when a client keeps sending frame-by-frame feedback, or when parallel builder subagents each own part o...ai-agentsgonodeVotes: 0GitHub stars: 2