Communitygithub.com

mblode/ui-animation

Erstellt, überprüft und debuggt UI-Bewegungs- und Animationsimplementierungen. Deckt Federn, Gesten, Drag-Interaktionen, Clip-Path-Enthüllungen, Easing-Kurven, Timing, CSS-Transition-Rezepte und Animationsüberprüfung ab.

Was ist ui-animation?

Diese Fähigkeit unterstützt Entwickler und KI-Agenten bei der Erstellung, Überprüfung und Fehlerbehebung von UI-Animationen und Bewegungen. Sie ist besonders nützlich für die Arbeit mit modernen Webanimationstechniken wie Federn, Gesten, Drag-Interaktionen, Clip-Path-Enthüllungen, Easing-Kurven und Timing. Die Fähigkeit eignet sich für CSS-Transitionen, Keyframes, framer-motion und Federanimationen. Sie kann auf Anfragen wie 'Animationen hinzufügen', 'mach das geschmeidiger', 'überprüfe meine Animationen', 'sollte das animieren', 'füge eine Wischgeste hinzu' oder 'füge einen Übergang hinzu' reagieren. Für die Nachbildung von Bewegungen aus Bildschirmaufnahmen wird die separate Fähigkeit 'reverse-engineer-animation' empfohlen, während 'ui-design' für die visuelle Gesamtrichtung und 'animate-text' für Textanimationen (Schreibmaschine, Zeilen-Enthüllung, kinetische Builds) zuständig ist.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-animation
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht ui-animation?

Erstellt, überprüft und debuggt UI-Bewegungs- und Animationsimplementierungen. Deckt Federn, Gesten, Drag-Interaktionen, Clip-Path-Enthüllungen, Easing-Kurven, Timing, CSS-Transition-Rezepte und Animationsüberprüfung ab. Verwenden Sie dies beim Entwerfen, Implementieren oder Überprüfen von Bewegungen, CSS-Transitionen, Keyframes, framer-motion, Federanimationen oder bei Fragen wie 'Animationen hinzufügen', 'mach das geschmeidiger', 'überprüfe meine Animationen', 'sollte das animieren', 'füge eine Wischgeste hinzu' oder 'füge einen Übergang hinzu'. Für die Nachbildung von Bewegungen aus einer Bildschirmaufnahme oder einem Video verwenden Sie reverse-engineer-animation; für die allgemeine visuelle Richtung und Gestaltung verwenden Sie ui-design; für spezifizierte Texteffekte (Schreibmaschine, Zeilen-Enthüllung, kinetische Builds) verwenden Sie animate-text.

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community