Saltar al contenido
Por kylezantos

Creación y auditoría de movimiento

/design-motion-principles

/design-motion-principles es una skill de Claude Code de la sección Web y Diseño. La mantiene kylezantos y se publica con licencia MIT. Construye componentes con movimiento útil o audita animaciones existentes con criterios de Emil Kowalski, Jakub Krehel y Jhey Tompkins.

Descripción del autor (traducida)

Experta en diseño de movimiento e interacción basada en las técnicas de Emil Kowalski, Jakub Krehel y Jhey Tompkins. Dos modos: construir componentes interactivos con movimiento con propósito, o auditar animaciones existentes para detectar patrones de movimiento con pinta de IA genérica (la auditoría genera un informe HTML de marca con demos en bucle). Úsala al crear, añadir, animar o revisar movimiento de UI: transiciones, estados hover, microinteracciones, animaciones de entrada/salida, o cualquier trabajo de motion design en React, Framer Motion, CSS o HTML. Ofrece perspectivas por diseñador con ponderación según el contexto.

Cómo pedírselo

  • Añade una animación de entrada con propósito a esta tarjeta
  • Audita las animaciones de mi web y dime si parecen genéricas de IA
  • Crea microinteracciones de hover para estos botones en Framer Motion

Instalar

curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash

Tras instalar con el script, escribe /design-motion-principles. ¿Usas Cursor, Windsurf o Codex? Guías por plataforma

Demo en camino

↑↓ moverte · Enter abrir · Esc cerrar