Skills de Emilkowalski

skills/skills/animate

Crea una animación desde cero, tomando las decisiones en el orden que determina si se siente correcta: si debería animarse, con qué propósito, qué herramienta, qué propiedades, qué curva y duración, cómo interrumpe, cómo sale. Escribe la implementación. Úsalo cuando se te pida animar algo, añadir movimiento, hacer que un componente se sienta vivo o construir una transición. Para criticar movimiento existente usa review-animations; para auditar un código completo usa improve-animations.

skills/skills/animation-vocabulary

Glosario de búsqueda inversa que convierte una descripción vaga de una animación web o efecto de movimiento en su término exacto ("la cosa que rebota cuando se abre un popover" → Pop in; "el desplazamiento elástico de iOS" → Rubber-banding). Se usa cuando el usuario pregunta "¿cómo se llama cuando…", o describe un efecto de movimiento sin saber su nombre y quiere la palabra correcta para indicársela a una IA o diseñador. Sirve para nombrar un efecto, no para diseñarlo o construirlo.

skills/skills/apple-design

El enfoque de Apple para el diseño de interfaces y el movimiento físico y fluido, traducido para la web. Úsalo al construir o revisar interfaces basadas en gestos, animaciones con resorte, interacciones de arrastre/deslizamiento/hoja, momentum y transiciones interrumpibles, materiales translúcidos y profundidad, tipografía (tamaño óptico, tracking, interlineado), movimiento reducido, o los fundamentos de diseño (retroalimentación, consistencia espacial, moderación) detrás de las interfaces al estilo Apple.

skills/skills/ask-sonner

Guía de Sonner, la librería de toasts de React — instala y configura el Toaster, elige la llamada toast() correcta, toasts de promesa y de carga, actualizar, descartar y persistir toasts, estilos, temas e iconos, posicionamiento y múltiples toasters. Úsalo al trabajar con Sonner o al solucionar problemas — toasts que no aparecen, aparecen dos veces, pierden sus estilos, ignoran las clases de Tailwind, quedan detrás de un modal o no siguen el modo oscuro.

skills/skills/emil-design-eng

Esta habilidad codifica la filosofía de Emil Kowalski sobre el pulido de la interfaz de usuario, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta genial.

skills/skills/find-animation-opportunities

Busca en un codebase o UI lugares que no se animan pero deberían hacerlo, y rechaza todo lo que no deba animarse. Solo lectura; propone movimiento con valores exactos, no lo implementa. Se usa cuando el usuario pregunta "¿qué se podría animar aquí?" o quiere "hacer que esto se sienta más vivo". Para corregir animaciones existentes, usa improve-animations o review-animations en su lugar.

skills/skills/improve-animations

Inspeccionar el código de animación y movimiento de una base de código como asesor senior de motion, luego generar una auditoría priorizada y planes de implementación autocontenidos para que otros agentes (o modelos más económicos) los ejecuten. Solo lectura del código fuente — planifica mejoras, no las aplica. Usar cuando el usuario pida "mejorar las animaciones", "auditar el motion", "hacer que esta app se sienta mejor", o quiera una hoja de ruta de correcciones de animación en lugar de una revisión de un solo diff.

skills/skills/pick-ui-library

Elige la biblioteca adecuada para una tarea de frontend determinada de una lista curada y con criterio definido: números, entradas OTP, gráficos, menús de comandos, virtualización, arrastrar y soltar, notificaciones toast, estado, estilos y más. Solo se ejecuta cuando se invoca explícitamente; no se activa por sí solo.

skills/skills/prototype

Crea múltiples versiones genuinamente diferentes de una pieza de interfaz que describes, renderizadas detrás de un selector visual para que puedas alternar entre ellas en vivo y promover la que mejor se sienta. Solo se ejecuta cuando se invoca explícitamente; no se activa por sí solo.

skills/skills/review-animations

Revisa el código de animación y movimiento contra un alto estándar artesanal derivado de la filosofía de ingeniería de diseño de Emil Kowalski. Por defecto, se marcan problemas; la aprobación se gana.