Communitygithub.com

lottiefiles/motion-design

Aplica principios de diseño de movimiento para crear animaciones y transiciones técnicamente sólidas y emocionalmente impactantes. Proporciona temporización, easing, coreografía y principios de animación de Disney adaptados a la interfaz de usuario.

¿Qué es motion-design?

Esta skill, `lottiefiles/motion-design`, está diseñada para asistentes de IA que trabajan en proyectos de animación y transiciones en interfaces de usuario. Su propósito es guiar la creación de movimientos que no solo sean visualmente atractivos, sino también técnicamente correctos y emocionalmente resonantes. La skill se basa en principios clásicos de animación, como los 12 principios de Disney, adaptándolos al entorno UI moderno. Proporciona pautas detalladas sobre temporización (duración de animaciones), curvas de easing (aceleración y desaceleración), y coreografía (secuenciación de múltiples elementos en movimiento). Es compatible con una amplia gama de tecnologías y librerías de animación, incluyendo CSS, Framer Motion, GSAP, Lottie, Spring, y cualquier otro sistema de animación. Es especialmente útil para tareas como micro-interacciones, estados de carga, transiciones de página, efectos activados por scroll y cualquier otro tipo de animación en la web.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lottiefiles/motion-design-skill/tree/main/skills/motion-design
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace motion-design?

Aplica principios de diseño de movimiento para crear animaciones y transiciones técnicamente sólidas y emocionalmente impactantes. Proporciona temporización, easing, coreografía y principios de animación de Disney adaptados a la interfaz de usuario. Úsalo al crear animaciones, transiciones, micro-interacciones, estados de carga, transiciones de página, efectos activados por scroll o cualquier trabajo de movimiento. Funciona con CSS, Framer Motion, GSAP, Lottie, Spring o cualquier sistema de animación.

Skills relacionados

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