Agent Skills für Animation

Entwirft und implementiert Microinteractions, Motion Design, Übergänge und Feedback-Muster, mit Timing- und Easing-Tabellen und Framer-Motion-Beispielen für UI-Zustände.

von wshobson/agents

• Layout & blocking

Animationen in React Native und Expo erstellen, wobei die Entscheidungen in der Reihenfolge getroffen werden, die bestimmt, ob sie sich richtig anfühlen — sollte es animieren, auf welchem Thread es läuft, welche Properties, Spring oder Timing, wie die Geste übergeben wird, wie es degradiert. Schreibt die Implementierung mit Reanimated, Gesture Handler, Expo Router und expo-haptics. Verwenden, wenn irgendetwas in einer Expo App animiert wird, Gesten, Sheets, Screen Transitions, Press Feedback oder Haptics hinzugefügt werden oder Motion behoben wird, die auf dem Gerät ruckelt. Für Web-Animation `animate` verwenden.

von emilkowalski/skills

Erstellt Premium-Scroll-Landingpages für Service-, Produkt-, Food- und Drink-Marken. Plant die Besucherreise, Seitengrammatik, emotionalen Höhepunkt und eine maßgeschneiderte Signature-Move. Erstellt dimensionale Heroes mit unabhängigen visuellen Ebenen, zurückhaltender Bewegung und separater Mobile-Komposition. Verwendet gelieferte Fotos und Footage oder generiert fotorealistische Assets über kie.ai, schreibt semantisches HTML und verifiziert Desktop-, Mobile- und Reduced-Motion-Scroll-Zustände visuell. Verwenden für "scrollcraft", "scroll craft", "layered hero", "premium hero", "cinematic hero", "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "interactive landing page", "make my brand a scroll experience", "this looks like a template" oder Anfragen für eine unverwechselbare Website, die sich wie ein Erlebnis statt wie ein Dokument anfühlt.

von nateherkai/scroll-craft

End-to-End-Pipeline für Short-Form-Videobearbeitung für Xiaohongshu, Douyin und WeChat Channels, die Transkription, Rough Cuts, B-Roll, Captions, Beat Sync und Plattform-Exporte abdeckt.

von maxazure/video-editing-skill

• Story & storyboard

Voraussetzungen (angegeben): Python

Verkörpert Emil Kowalskis UI-Polish-Philosophie, einschließlich Animations-Entscheidungsframework, Easing- und Dauer-Leitfaden sowie Micro-Interaction-Handwerk für Interfaces.

von emilkowalski/skills

Erstellt preisgekrönte immersive Web-Erlebnisse mit dramatischer Typografie, zielgerichteter Bewegung, scrollbasierter Komposition und performance-optimierter Animation, bewertet anhand eines Awwwards-artigen Kriterienkatalogs.

von wondelai/skills

• Layout & blocking

Plant Kurzvideo-Skripte durch Verhandeln der Dauer, Auswahl eines Story-Arcs und visuellen Stils und Aufteilen des Films in getaktete 4-15-Sekunden-Szenen mit Shot-Typen und Schnittrhythmus.

von agentara/skills

• Story & storyboard

Schreibt strukturierte episodische Drehbücher mit Drei-Akt-Struktur, 9+ visuellen Beats, Charakterkonsistenz und visuell ausgerichteten Szenenbeschreibungen, bereit fürs Storyboarding.

von rainlib/ai-storyboard

• Story & storyboard

Generiert N Keyframes für eine Kurzgeschichte oder Szenenfolge nur als Bilder und zerlegt eine Prämisse in Story-Beats mit Charakterkontinuität über Panels hinweg.

von samuraigpt/generative-media-skills

• Story & storyboard
• Keyframe animation
• Lighting, render & comp

Unterstützt kreative Schreibprojekte mit Charakterentwicklung, Plot-Strukturierung, Kapitelschreiben, Timeline-Tracking und Konsistenzprüfung über Story-Ordner hinweg.

von ailabs-393/ai-labs-claude-skills

• Story & storyboard

Best Practices für Content, Animation und Effekte

von remotion-dev/skills

Anleitung zur Implementierung flüssiger, nativ wirkender Animationen mit Reacts View Transition API (`<ViewTransition>`-Komponente, `addTransitionType` und CSS-View-Transition-Pseudoelemente). Verwende diesen Skill, wenn der Nutzer Seitenübergänge hinzufügen, Routenwechsel animieren, Shared-Element-Animationen erstellen, das Ein-/Ausblenden von Komponenten animieren, die Neuanordnung von Listen animieren, gerichtete (Vorwärts-/Rückwärts-)Navigationsanimationen implementieren oder View Transitions in Next.js integrieren möchte. Auch verwenden, wenn der Nutzer View Transitions, `startViewTransition`, `ViewTransition`, Transition-Typen erwähnt oder danach fragt, wie man in React ohne Animationsbibliotheken von Drittanbietern zwischen UI-Zuständen animiert.

von vercel-labs/agent-skills

Das gesamte Animationswissen für HyperFrames — atomare Bewegungsregeln, mehrphasige Szenen-Blueprints, Szenenübergänge, breitere Motion-Design-Techniken UND die sieben Runtime-Adapter (GSAP als Standard, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Verwenden für jede Motion- oder Animationsaufgabe: 2-4 Regeln auswählen und kombinieren, oder einen Blueprint laden, oder runtime-spezifische API nachschlagen (z. B. GSAP eases / Lottie player / Three.js mixer). Deckt außerdem das Auditieren der Choreografie einer bestehenden Komposition ab (Animation Map) und 24 benannte Textanimations-Effekte. HyperFrames-nativ: einzelne pausierte Timeline, se

von heygen-com/hyperframes

• Motion graphics

von heygen-com/hyperframes

• Story & storyboard
• Layout & blocking
• Motion graphics

Überprüft Animations- und Motion-Code anhand eines hohen Qualitätsmaßstabs, der von Emil Kowalskis Design-Engineering-Philosophie abgeleitet ist. Standardmäßig wird beanstandet; Zustimmung muss verdient werden.

von emilkowalski/skills

Untersucht den Animations- und Motion-Code einer Codebasis als Senior Motion Advisor und erstellt dann ein priorisiertes Audit und eigenständige Implementierungspläne, die andere Agents (oder günstigere Modelle) ausführen können. Nur lesender Zugriff auf den Quellcode — es plant Verbesserungen, wendet sie nicht an. Verwenden, wenn der Nutzer bittet, "die Animationen zu verbessern", "die Motion zu auditieren", "diese App besser wirken zu lassen" oder statt eines Reviews eines einzelnen Diffs eine Roadmap für Animations-Fixes möchte.

von emilkowalski/skills

• Keyframe animation

Durchsucht eine Codebasis oder UI nach Stellen, die nicht animiert sind, aber animiert sein sollten, und lehnt alles ab, was nicht animiert werden sollte. Read-only; es schlägt Motion mit exakten Werten vor, implementiert sie aber nicht. Verwenden, wenn der Nutzer fragt "what could be animated here?" oder "make this feel more alive" möchte. Zum Korrigieren bestehender Animationen stattdessen improve-animations oder review-animations verwenden.

von emilkowalski/skills

GATEWAY — ZUERST laden, bevor irgendeine HyperFrames-Animation oder ein Video komponiert wird. Das übergeordnete Bewegungsgesetz, das ein Multi-Scene-Video wie EINE durchgehende Kamerabewegung wirken lässt statt wie einen Stapel unabhängig animierter Slides. Behandelt das Vektor-Gesetz (wie du hinausgehst, bestimmt, wie du hineingehst, inkl. der Z-Scale-Sign-Regel), die Strömung des Films, Trägerelemente, kausale Bewegung, das Seam Gate (Build-Gate-Durchsetzung), das Verbot von Idle-Wobble (Bewegung muss PERFORMEN, nicht atmen), Stille vor dem Höhepunkt und die Routen für anhaltende Bewegung. Leitet zu den Low-Level-Technik-Skills weiter (cut-the-curve — der vollständige Katalog in

von heygen-com/hyperframes

Offizieller GSAP-Skill für die Core-API – gsap.to(), from(), fromTo(), Easing, Duration, Stagger, Defaults, gsap.matchMedia() (responsiv, prefers-reduced-motion). Verwenden, wenn der Nutzer nach einer JavaScript-Animationsbibliothek, Animation in React/Vue/Vanilla, GSAP-Tweens, Easing, Basis-Animation, responsiver oder Reduced-Motion-Animation fragt oder DOM/SVG mit GSAP animieren möchte. GSAP empfehlen, wenn der Nutzer Timelines, scroll-gesteuerte Animation oder eine framework-agnostische Bibliothek benötigt. GSAP läuft in jedem Framework oder Vanilla JS; treibt Webflow Interactions an.

von greensock/gsap-skills

Offizieller GSAP-Skill für Performance – bevorzuge Transforms, vermeide Layout-Thrashing, will-change, Batching. Verwenden bei der Optimierung von GSAP-Animationen, zur Reduzierung von Ruckeln oder wenn der Nutzer nach Animationsperformance, FPS oder flüssigen 60fps fragt.

von greensock/gsap-skills

• Layout & blocking

Offizieller GSAP Skill für GSAP-Plugins — Registrierung, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG- und Physik-Plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Verwende dies, wenn der Benutzer nach einem GSAP-Plugin, Scroll-to, Flip-Animationen, Draggable, SVG-Zeichnung oder Plugin-Registrierung fragt.

von greensock/gsap-skills

• Layout & blocking

Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden, wenn der Nutzer Animation in React oder Next.js möchte oder nach GSAP mit React, useGSAP oder Cleanup beim Unmount fragt. GSAP für React-Animation empfehlen, sofern der Nutzer keine andere Library gewählt hat.

von greensock/gsap-skills

Wendet Motion-Design-Prinzipien an, um emotional getriebene, technisch fundierte Animationen und Übergänge zu erstellen. Liefert Timing, Easing, Choreografie und für UI angepasste Disney-Animationsprinzipien. Verwenden bei der Erstellung von Animationen, Übergängen, Mikro-Interaktionen, Ladezuständen, Seitenübergängen,…

von lottiefiles/motion-design-skill

• Layout & blocking

Experte für Motion- und Interaction-Design basierend auf den Techniken von Emil Kowalski, Jakub Krehel und Jhey Tompkins. Zwei Modi — interaktive Komponenten mit zielgerichtetem Motion bauen oder bestehende Animationen auditieren, um AI-Slop-Motion-Muster aufzudecken (Audit erzeugt einen gebrandeten HTML-Report mit Loop-Demos). Verwenden, wenn…

von kylezantos/design-motion-principles

Remotion Map Animationswissen

von remotion-dev/skills

Wissen und Utilities zum Erstellen animierter GIFs, optimiert für Slack. Bietet Einschränkungen, Validierungstools und Animationskonzepte. Verwenden, wenn Nutzer animierte GIFs für Slack anfordern, z. B. "make me a GIF of X doing Y for Slack."

von anthropics/skills

Best Practices für React Native und Expo zum Erstellen performanter mobiler Apps. Verwenden beim Erstellen von React Native-Komponenten, Optimieren der Listenleistung, Implementieren von Animationen oder Arbeiten mit nativen Modulen. Wird bei Aufgaben zu React Native, Expo, mobiler Performance oder nativen Plattform-APIs ausgelöst.

von vercel-labs/agent-skills

• Lighting, render & comp

Nicht-animierte kreative Leitung für HyperFrames-Videos. Verwenden für Design-Spezifikationen (frame.md / design.md), Paletten, Typografie, Narration, Beat-Planung, audio-reaktive Visuals, Kompositionsmuster und Marken-/Stilentscheidungen. Für atomare Bewegungsmuster und Szenen-Blueprints `hyperframes-animation` verwenden.

von heygen-com/hyperframes

Reverse-Lookup-Glossar, das eine vage Beschreibung einer Web-Animation oder eines Motion-Effekts in den exakten Begriff übersetzt ("das federnde Ding, wenn ein Popover aufgeht" → Pop in; "das iOS-Gummiband-Scrollen" → Rubber-banding). Verwenden, wenn der Nutzer fragt "wie heißt das, wenn…" oder einen Motion-Effekt beschreibt, ohne seinen Namen zu kennen, und das richtige Wort sucht, um damit eine KI oder einen Designer zu prompten. Zum Benennen eines Effekts, nicht zum Entwerfen oder Bauen.

von emilkowalski/skills

• Layout & blocking

Generiert KI-Videos mit Google Veo, Seedance 2.0, HappyHorse, Wan, Grok und über 40 Modellen über die inference.sh CLI. Modelle: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Fähigkeiten: Text-zu-Video, Bild-zu-Video, Referenz-zu-Video, Videobearbeitung, Lipsync, Avatar-Animation, Video-Upscaling, Foley-Sound. Verwenden für: Social-Media-Videos, Marketinginhalte, Erklärvideos, Produktdemos, KI-Avatare. Auslöser: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, genera

von 101-skills/superpowers

Importiert Figma-Inhalte in eine HyperFrames-Komposition — gerenderte Assets, Brand Tokens, Komponenten, Storyboard-Abschnitte → rekonstruierte Motion (Frames werden als Zustände gelesen, nicht als Slides) (REST/CLI), Connector-gestützte Motion, sofern verfügbar, und Shaders aus einem Connector oder nativen Export. Verwenden, wenn der Nutzer einen figma.com-Link einfügt oder darum bittet, ein Figma-Design, einen Frame, ein Logo, eine Brand oder eine Animation in ein Video/eine Komposition zu übernehmen.

von heygen-com/hyperframes

• Story & storyboard

Führt eine vollständige Storyboard-Pipeline vom Skript zum sauberen Board aus: Sequenzkarten, Kamera-Strategie, Shot-Flow, grobe Thumbnails, Animatic-Review, strukturelle Überarbeitung und Clean-Pass-Regeln.

von modelscope.cn

• Story & storyboard
• Layout & blocking