83.3K+Descargar
Ir a la guía de uso
emil-design-engpor Emil Kowalski

Emil Design Eng Skill.

Un skill de Claude Code y Codex para investigación UX: la filosofía de emil Kowalski sobre el pulido de UI, diseño de componentes y decisiones de animación.

  • UX & Research
Descargar OpenDesignVer guía de uso
emilkowalski/skills · skills/emil-design-eng/SKILL.mdSKILL.md
--- name: emil-design-eng description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. --- ## Initial Response ## Core Philosophy ## Review Format (Required) ## The Animation Decision Framework ## Spring Animations ## Component Building Principles
Portada y encabezados de sección leídos del archivo original el 14/09/2026 · 27 130 caracteres en total

01 Qué hace

Qué hace la skill emil-design-eng 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

Esta skill dota a los agentes de código del criterio de ingeniería de diseño de Emil Kowalski para el trabajo de interfaz: cómo decidir si algo debe animarse, qué easing y duración usar, y cómo construir componentes que se sientan responsivos. Establece valores predeterminados estrictos: animaciones de UI por debajo de 300ms, curvas cubic-bezier personalizadas en lugar de los easings integrados de CSS, nunca ease-in, nunca entradas con scale(0), popovers que escalan desde su disparador.

También cubre springs, técnicas de clip-path, manejo de arrastre y gestos, reglas de rendimiento de GPU, movimiento reducido, y una tabla markdown obligatoria de Antes/Después para revisiones de código. Está pensado para diseñadores y desarrolladores que buscan decisiones de interfaz guiadas por el criterio, no consejos genéricos de animación.

Qué produce

  • Una tabla markdown de revisión con columnas Antes, Después y Por qué, una fila por cada problema encontrado
  • Variables CSS listas para pegar que contienen las curvas de easing personalizadas recomendadas
  • Objetos de configuración de spring, con parámetros de estilo Apple o de física tradicional
  • Una lista priorizada de correcciones extraída de las categorías del Review Checklist
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Condicione la Animación a la Frecuencia

    Antes de escribir cualquier código de animación, decida con qué frecuencia los usuarios encontrarán la interacción.

  2. 02
    Nombre el Propósito

    Toda animación debe responder por qué se anima, a partir de la lista válida: consistencia espacial, indicación de estado, explicación, feedback o prevención de cambios abruptos.

  3. 03
    Elija una Curva Personalizada

    Elija el easing según si el elemento entra, sale, se mueve o solo cambia de color, y sustituya las curvas integradas por cubic-beziers personalizadas más marcadas.

  4. 04
    Configurar la Duración

    Ajuste la duración al tipo de elemento según la tabla: pulsación de botón 100-160ms, menús desplegables 150-250ms, modales 200-500ms; mantenga la UI por debajo del límite de 300ms.

  5. 05
    Aplicar los Valores Predeterminados de los Componentes

    Los botones escalan a 0.97 en :active, las entradas comienzan desde 0.95 con opacidad en lugar de scale(0), y los popovers escalan desde su disparador mientras los modales permanecen centrados.

  6. 06
    Use Muelles (Springs) Donde Se Lo Ganan

    Los muelles son adecuados para el arrastre con inercia, los gestos que pueden interrumpirse y las interacciones deliberadamente decorativas.

02 Encuentra tu caso de uso

Cuándo Usar el Skill emil-design-eng

Use el skill emil-design-eng en Claude Code o Codex cuando el trabajo sea investigación UX de este tipo. El alcance y los límites a continuación se toman del propio archivo del skill.

Buen caso de uso

  • Revisar código de UI existente y obtener una tabla concreta de correcciones en lugar de comentarios vagos
  • Construir componentes donde los pequeños detalles se acumulan hasta lograr una interfaz que se siente bien
  • Trabajo de arrastre y deslizamiento donde el descarte debe responder a la velocidad del gesto, no solo a la distancia arrastrada
  • Interfaces sensibles al rendimiento donde la animación con JS pierde fotogramas mientras el hilo principal está ocupado

Conozca los límites

  • Muelles rebotantes en todas partes: el rebote se evita en la mayoría de los contextos de UI y se reserva para arrastrar para descartar e interacciones lúdicas
  • Movimiento decorativo sobre visualizaciones de datos funcionales, donde ninguna animación sería mejor
  • Cualquiera que busque una fórmula para la combinación de opacidad y altura; el archivo dice que es prueba y error
  • Tratar el movimiento reducido como cero animación, algo que el archivo rechaza explícitamente

Qué proporcionar

  • La animación que está a punto de escribirEl framework espera que las cuatro preguntas se respondan en orden antes de que exista cualquier código de animación: si debe animarse, por qué, qué easing, con qué velocidad.
  • Con qué frecuencia la verán los usuariosLa frecuencia es la primera pregunta y determina toda la decisión, desde ninguna animación jamás hasta el permiso para añadir deleite.
  • Su objetivo de compatibilidad de navegadorLas animaciones de entrada usan @starting-style cuando la compatibilidad lo permite; de lo contrario, recurren al patrón del atributo data-mounted.

03 Dentro del skill

Reglas que el Skill emil-design-eng 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.

  1. Nunca Use ease-in

    ease-in retrasa el movimiento inicial, exactamente el momento que el usuario observa con más atención, por lo que un menú desplegable con ease-in de 300ms se siente más lento que uno con ease-out de la misma duración.

  2. Nunca Entre desde Scale(0)

    Nada en el mundo real desaparece y reaparece por completo. Las entradas comienzan en scale(0.9) o superior combinado con opacidad, y la escala de pulsación se mantiene sutil entre 0.95-0.98.

  3. Los Modales Mantienen el Origen Central

    Los popovers deben establecer transform-origin en su disparador, usando var(--transform-origin) de Base UI, pero los modales son la excepción explícita porque no están anclados a un disparador.

  4. Las revisiones usan una tabla real

    Una revisión de UI debe generar una tabla markdown real con columnas Before, After y Why, una fila por cada problema. Una lista con Before: y After: en líneas separadas es el formato incorrecto.

  5. Bloquear el hover detrás de una media query

    Las animaciones de hover van dentro de @media (hover: hover) and (pointer: fine), porque los dispositivos táctiles disparan hover al tocar y generan falsos positivos.

  6. Mantener el stagger corto y no bloqueante

    Los retrasos de stagger duran entre 30 y 80ms entre elementos; retrasos más largos hacen que la interfaz se sienta lenta, y el stagger es decorativo, por lo que nunca debe bloquear la interacción mientras se reproduce.

04 Ponlo a trabajar

Instalar emil-design-eng 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 emil-design-eng a Claude Code, Codex o Su Agente

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

Terminal
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng

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

Dale al Skill una Primera Tarea de Investigación UX

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

Starter prompt
Review the code for [the dropdown and the popover] in [component file]. The dropdown opens with ease-in over 300ms, the popover scales from center, and the entering panel animates from scale(0). Use the Before/After format and tell me what to change and why.

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:

  • Repita el trabajo al día siguiente con ojos frescos, ya que las imperfecciones son más fáciles de detectar tras una noche de distancia
  • Ralentice temporalmente la duración de 2 a 5 veces la normal, o use el inspector de animación del navegador, para detectar problemas de sincronización
  • Avance fotograma a fotograma la animación en Chrome DevTools para ver problemas de coordinación invisibles a velocidad normal
  • Pruebe los cajones y los gestos de deslizamiento en dispositivos físicos, conectando un teléfono por USB al servidor de desarrollo local
  • En cámara lenta, confirme que las propiedades animadas se mantienen sincronizadas y que el origen y el easing se ven correctos

En OpenDesign emil-design-eng viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer 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
Emil Kowalski
Repository
github.com/emilkowalski/skills Branch main
Archivo de skill
skills/emil-design-eng/SKILL.md Suma de verificación del contenido registrada en verificación; commit d23d7f8
License
MIT De LICENSE.
Estrellas del repositorio
37.516 Captura de GitHub tomada el 14-09-2026 para todo el repositorio emilkowalski/skills, que contiene 9 skills en este catálogo. No es una calificación o conteo de uso para emil-design-eng.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Filosofía centralEl buen gusto se entrena, los detalles imperceptibles se acumulan, y la belleza es un diferenciador real.
  2. Formato de revisión (obligatorio)Exige una tabla markdown de Before/After/Why y muestra el formato de lista prohibido.
  3. El marco de decisión de animaciónCuatro preguntas ordenadas: frecuencia, propósito, easing, duración, además del rendimiento percibido.
  4. Animaciones springCuándo encajan los springs, seguimiento del ratón con useSpring, y dos estilos de configuración.
  5. Principios de construcción de componentesFeedback de pulsación, evitar scale(0), origen de popover, retrasos de tooltip, transiciones en lugar de keyframes, blur.
  6. Dominio de las transformaciones CSSTraslados en porcentaje, escalado de hijos, profundidad 3D, y anclas de transform-origin.
  7. clip-path para animaciónRevelados de inset para overlays, pestañas, mantener para eliminar, revelados en scroll, sliders de comparación.
  8. Interacciones de gesto y arrastreDescarte por velocidad, amortiguación de límites, captura de puntero, protección multitáctil, fricción.
  9. Reglas de rendimientoAnimar solo transform y opacity, evitar el recálculo de variables CSS, preferir CSS bajo carga.
  10. AccesibilidadEl movimiento reducido conserva opacidad y color, elimina el movimiento; el hover se bloquea mediante media query.
  11. Los principios de Sonner (construir componentes que gustan)Seis principios de Sonner sobre DX, valores por defecto, nomenclatura, casos límite, transiciones, documentación.
  12. Lista de verificación de revisiónTabla de problemas comunes y sus soluciones prescritas, desde transition-all hasta la falta de stagger.
La descripción propia del Skill
"Este skill codifica la filosofía de Emil Kowalski sobre el pulido de UI, diseño de componentes, decisiones de animación y los detalles invisibles que hacen que el software se sienta excelente."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 27.130 caracteres. Lea el archivo completo en GitHub.

Emil Design Eng

Ejecute emil-design-eng en una Tarea Real de Investigación UX.

La skill emil-design-eng viene incluida en OpenDesign. Descargue la aplicación, seleccione la skill en Plugins → Skills, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng