design-motion-principlespor Kyle Zantos

Design Motion Principles Skill.

Un skill de Claude Code y Codex para motion y video: movimiento de interacción con propósito, o revisión de animación existente, según Kowalski, Krehel y Tompkins.

Movimiento y video

Descargar OpenDesign Ver guía de uso

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 6.794 caracteres completos

01 Qué hace

Qué hace la skill design-motion-principles en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Una skill de diseño de interacción y movimiento para agentes de código, que funciona en dos modos. Create construye componentes interactivos con movimiento con propósito; Audit revisa el movimiento existente y reporta hallazgos por diseñador, incluyendo patrones de AI-slop, en un informe HTML de marca con demos en bucle.

Organiza sus recomendaciones en torno a tres lentes —Emil Kowalski sobre contención y velocidad, Jakub Krehel sobre acabado de producción, Jhey Tompkins sobre experimentación lúdica— ponderadas según el tipo de proyecto en lugar de aplicarse de forma universal. La cobertura abarca movimiento de UI web y de apps: HTML/CSS, React, Framer Motion, transiciones de iOS/Android y animaciones de sistemas de diseño. El filtro de frecuencia, las duraciones dependientes del contexto y el manejo obligatorio de prefers-reduced-motion se aplican en ambos modos.

Qué produce

Componentes interactivos construidos con movimiento con propósito en el modo Create.
Un informe de revisión por diseñador en el modo Audit.
Un informe HTML de marca que contiene demos en bucle de los hallazgos.
Una plantilla de informe de auditoría renderizada como HTML por defecto, con un modo de terminal disponible como opción.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Detectar el Modo a Partir de la Solicitud
El lenguaje orientado a construir selecciona Create; audit, review, evaluate, feedback o '¿este movimiento es bueno?' selecciona Audit.
02
Leer el Archivo de Workflow Correspondiente
La detección de modo es el paso 0 y condiciona todo lo demás: se sigue el archivo de workflow de ese modo tal como está escrito.
03
Ponderar a los Tres Diseñadores Según el Contexto
Emil, Jakub y Jhey se tratan como perspectivas dependientes del contexto, nunca como reglas universales.
04
Aplicar la Guía de Frecuencia y Duración
Primero se determina con qué frecuencia se dispara la interacción, y después los objetivos de duración se extraen del lente correspondiente.
05
Emitir el Artefacto para el Modo
Create devuelve componentes; Audit devuelve un informe por diseñador cuyos hallazgos obtienen cada uno una tarjeta de demostración construida a partir de una plantilla de contenedor visual.

02 Encuentra tu caso de uso

Cuándo Usar el Skill design-motion-principles

Usa el skill design-motion-principles en Claude Code o Codex cuando el trabajo sea movimiento y video de este tipo. El ajuste y límites a continuación provienen del propio archivo del skill.

Buen caso de uso

Herramientas de productividad como Linear o Raycast, donde predominan las reglas de contención y velocidad de Emil y Jhey solo se usa para el onboarding.
Apps infantiles y productos educativos, donde el pulido y el deleite superan a las reglas de velocidad de productividad, y Emil se reserva para interacciones de alta frecuencia en juegos.
Portafolios creativos, liderados por Jakub para el refinamiento y Jhey para la invención, con Emil limitado a interacciones de alta frecuencia.
Apps móviles, donde Jakub lidera, Emil apoya y Jhey aporta detalles de deleite.

Conozca los límites

Trabajo de motion fuera de la UI web y de apps — motores de juegos, Lottie, Rive o video — donde el marco de frecuencia sigue aplicando pero las técnicas específicas de cada diseñador pueden no ser transferibles.
Juzgar las duraciones con un número universal; marcar o limitar duraciones sin comprobar la ponderación del contexto queda explícitamente descartado.
Las interacciones iniciadas por teclado quedan excluidas por completo de la animación, sea cual sea el tipo de proyecto.

Qué proporcionar

El tipo de proyectoDetermina la ponderación primaria, secundaria y selectiva, de modo que un panel SaaS apunta primero a Emil en lugar de a Jakub.
Con qué frecuencia se dispara la interacciónEl filtro de frecuencia se aplica antes de añadir o aprobar nada, así que la respuesta cambia qué es siquiera elegible para animarse.
El motion en sí y su stackTransiciones, estados hover, microinteracciones y animaciones de entrada/salida, en React, Framer Motion, CSS o HTML.

03 Dentro del skill

Reglas que el Skill design-motion-principles le da a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Deja que la Frecuencia de Disparo Decida si se Anima
Las interacciones frecuentes que ocurren cientos de veces al día no reciben animación o una transición instantánea; las poco frecuentes pueden ser expresivas.
Gestionar prefers-reduced-motion, Siempre
El requisito se establece como aplicable a cualquier cosa generada en modo Create o revisada en modo Audit, sin excepciones.
Preguntar Cuando la Solicitud Es Ambigua
Una solicitud vaga como 'mira esta animación del modal' no se adivina — se le pide al usuario que elija Create o Audit.
Reponderar a los Diseñadores según el Tipo de Proyecto
La tabla de mapeo cambia los lentes primario, secundario y selectivo; una landing page tiene a Jakub como primario, Jhey como secundario y Emil solo para formularios y navegación.
Usa la visibilidad como prueba de calidad
El movimiento que arranca un cumplido en cada interacción se considera demasiado protagonista para producción.
Carga las referencias que exige el modo
El modo Create siempre carga el Motion Cookbook (recetas para entrada/salida, easing, springs, clip-path, @property, FLIP, animación por scroll); el modo Audit carga sus propios archivos siempre activos.

04 Ponlo a trabajar

Instalar design-motion-principles en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar design-motion-principles a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

Forma genérica de la CLI skills para skills/design-motion-principles/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Confirma que el peso del movimiento corresponda a la frecuencia real con la que se dispara la interacción, no a lo bien que se ve.
Evalúa el trabajo de pulido de producción contra la banda Jakub de 200-500ms en lugar de una duración global única.
En el modo Audit, recorre la lista de verificación de auditoría sistemática en lugar de evaluar la animación a simple vista.
Pasa los hallazgos por la puerta de calidad de la lista anti-checklist que nombra las categorías y antipatrones de movimiento tipo AI-slop.
Para animaciones complejas, revisa la optimización de GPU, el uso de will-change y el layout thrash.

En OpenDesign importa design-motion-principles desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónalo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Branch main
Archivo de skill: skills/design-motion-principles/SKILL.md Checksum de contenido registrado en verificación; commit 4a9ca87
License: MIT De LICENSE.
Estrellas del repositorio: 1.048 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio kylezantos/design-motion-principles. No es una calificación ni un recuento de uso de design-motion-principles.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

PASO 0: Detectar el modo (HAZ ESTO PRIMERO)Asocia la redacción de la solicitud con Create o Audit y pregunta cuando es ambigua.
Los tres diseñadoresQuiénes son Emil, Jakub y Jhey, la pregunta que responde cada uno y la nota de reconocimiento.
Mapeo de contexto a perspectivaSiete tipos de proyecto asociados a una ponderación primaria, secundaria y selectiva de diseñador.
Principios básicos (ambos modos)Puerta de frecuencia, pautas de duración, la regla de oro y la accesibilidad no opcional.
Índice de referenciasCada archivo de referencia junto con las condiciones bajo las que se debe cargar.
Índice de workflowsLos dos archivos de workflow: construir componentes, o revisar el movimiento e informar.

La descripción propia del Skill

"Experto en diseño de movimiento e interacción basado en las técnicas de Emil Kowalski, Jakub Krehel y Jhey Tompkins. Dos modos: construye componentes interactivos con movimiento intencional, o audita animaciones existentes para detectar patrones de movimiento generados por IA de baja calidad (la auditoría emite un reporte HTML con marca que incluye demos en bucle). Úsalo al crear, agregar, animar o revisar movimiento de UI: transiciones, estados hover, micro-interacciones, animaciones de entrada/salida, o cualquier trabajo de diseño de movimiento en React, Framer Motion, CSS o HTML. Proporciona perspectivas por diseñador con ponderación según contexto."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 6.794 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill design-motion-principles

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Necesito React, o funciona con CSS y HTML sencillos?

Ambos entran dentro del alcance. El skill cubre el movimiento de la interfaz web y de apps en HTML/CSS, React, Framer Motion o Motion, transiciones de iOS/Android y animaciones de sistemas de diseño.

¿Cómo decide si debe construir algo o revisarlo?

Lee la solicitud buscando señales de Create o Audit, y cuando son ambiguas, pregunta. Si AskUserQuestion no está disponible, recurre a una pregunta en texto sin formato que ofrece los dos modos.

¿Una app infantil recibirá el mismo movimiento rápido y contenido que un dashboard?

No. La ponderación depende del contexto, así que una app infantil prioriza a Jakub y Jhey para el pulido y el deleite en lugar de las reglas de velocidad de Emil centradas en la productividad; en ese contexto, el deleite se considera el objetivo.

¿Son los tres diseñadores los creadores de este skill?

No. Las lentes destilan sus cursos, artículos, charlas y proyectos de código abierto publicados públicamente, y el marco de ponderación es la interpretación propia del skill, nombrada como tributo.

Design Motion Principles

Ejecuta design-motion-principles en una tarea real de movimiento y video.

Descarga OpenDesign, importa design-motion-principles desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills