01 Qué son y por qué notarás la diferencia
Emil Kowalski es un ingeniero de diseño que ha trabajado en empresas como Vercel y Linear y es el autor de librerías de interfaz muy extendidas, como Sonner (notificaciones tipo toast) y Vaul (paneles deslizantes en móvil). En su repositorio de skills ha volcado los criterios que aplica a diario: qué curva de aceleración usar, qué no se debe animar nunca o por qué un botón sin respuesta al pulsarlo parece roto.
Una skill es una carpeta con un archivo SKILL.md que Claude Code consulta cuando la tarea encaja con su descripción. Sin ellas, Claude anima «a ojo» y suele pasarse: transiciones lentas, elementos que surgen de la nada, efectos en todo. Con ellas, aplica reglas concretas y justifica cada cambio.
02 Instalación paso a paso
-
1
Abre Claude Code en local
Desde la terminal o desde la pestaña Code de la app de escritorio, con la carpeta de tu proyecto abierta. Las sesiones en la nube no ven lo que instalas en tu ordenador.
-
2
Ejecuta el instalador
El paquete skills (la CLI abierta de Vercel Labs para skills de agentes) descarga el repositorio y copia cada skill en la carpeta que lee Claude Code. Puedes lanzarlo tú o pedirle a Claude que lo ejecute.
-
3
Abre una sesión nueva
Las skills se cargan al empezar la conversación. Cierra la sesión actual y abre otra en la misma carpeta.
-
4
Comprueba la carga
Pregunta a Claude qué skills de Emil Kowalski tiene disponibles. Debe listarlas todas por su nombre.
npx skills@latest add emilkowalski/skills -g -s '*' -a claude-code -yQué hace cada opción: -g instala en tu carpeta de usuario para que valgan en todos tus proyectos (sin ella se instalan solo en el proyecto actual); -s '*' selecciona todas las skills del repositorio; -a claude-code limita la instalación a Claude Code y -y se salta las confirmaciones. Si quieres ver antes qué contiene, usa npx skills@latest add emilkowalski/skills --list.
03 Las skills del paquete
No hace falta memorizarlas: Claude elige la adecuada según lo que pidas. Algunas, marcadas como manuales, solo se ejecutan si las invocas con su comando (/nombre).
| Skill | Para qué sirve | Cómo se activa |
|---|---|---|
| emil-design-eng | La base: criterio general de animación y diseño, con tablas de antes y después | Automática |
| apple-design | Principios de diseño y movimiento fluido de Apple adaptados a la web: muelles, interrupciones, translucidez, tipografía | Automática |
| animate | Construye una animación desde cero eligiendo curva, duración y propiedades | Automática |
| improve-animations | Audita todas las animaciones del proyecto y escribe planes priorizados sin tocar el código | Automática |
| find-animation-opportunities | Señala dónde aporta el movimiento y dónde conviene no animar | Automática |
| animation-performance | Diagnostica animaciones que pierden fotogramas | Automática |
| animation-vocabulary | Te da el nombre técnico de un efecto que solo sabes describir | Automática |
| mobile-native | Que la web se sienta como app en el móvil: zoom en campos, destello al tocar, problema de 100vh | Automática |
| break-ui | Intenta romper la interfaz con datos extremos: nombres largos, listas vacías, cifras enormes | Automática |
| review-animations | Revisión estricta de los cambios de animación; aprobar cuesta | Manual: /review-animations |
| prototype | Genera varias versiones de un componente con un selector para compararlas | Manual: /prototype |
| pick-ui-library | Recomienda una librería fiable para cada necesidad | Manual: /pick-ui-library |
| ask-sonner, animate-expo, write-swift | Casos específicos: la librería Sonner, apps con React Native/Expo y código Swift | Automática |
04 Los criterios que va a aplicar Claude
Conocer las reglas te ayuda a pedir mejor y a juzgar los resultados. Estas son algunas de las que recoge la skill principal:
Respuesta inmediata al pulsar
Un botón debe encogerse ligeramente (en torno a scale(0.97)) en el estado :active. Sin esa señal, parece que no ha registrado el clic.
Rápido por defecto
Las animaciones de interfaz se quedan por debajo de 300 ms. Un desplegable de 180 ms se percibe más ágil que uno de 400 ms.
Salida rápida, frenada suave
Para entradas se usa ease-out, nunca ease-in, que arranca despacio y transmite lentitud justo cuando el usuario está mirando.
Nada nace de un punto
Los elementos aparecen desde una escala cercana a la real (0.95) y opacidad cero, no desde scale(0).
Origen coherente
Un menú emergente crece desde el botón que lo abre. Los modales, en cambio, se quedan centrados.
Lo repetitivo, sin animar
Atajos de teclado o acciones que se hacen decenas de veces al día no llevan animación: acaban irritando.
05 Flujo recomendado: auditar, corregir, revisar
El error habitual es pedir «ponle animaciones a mi web». Funciona mucho mejor separar el diagnóstico de los cambios y cerrar con una revisión estricta. La skill de auditoría solo lee el código y guarda sus planes en una carpeta plans del proyecto, así que no rompe nada.
Audita la interfaz de este proyecto con las skills improve-animations y apple-design. Quiero saber:
- qué animaciones sobran, cuáles son demasiado lentas y cuáles usan curvas o propiedades incorrectas;
- dónde falta respuesta visual (botones, menús, formularios);
- si se respeta la preferencia de reducir movimiento.
No modifiques ningún archivo. Devuélveme una tabla ordenada por impacto en la experiencia, con el archivo afectado y una explicación breve que entienda alguien sin conocimientos técnicos.Aplica solo el punto [número] de la auditoría. Antes de tocar nada, resume el cambio en dos líneas. Después:
1. Haz el cambio mínimo necesario.
2. Dime qué archivos has editado.
3. Indícame en qué pantalla y con qué acción puedo comprobar la diferencia en el navegador./review-animations Revisa los cambios de animación hechos en esta sesión. Si algún punto no cumple, explícame el motivo y propón la corrección antes de aplicarla.06 Más prompts para casos concretos
Usa la skill mobile-native sobre la plantilla [ruta del archivo]. Revisa zoom al enfocar campos, destello al tocar, estados hover que se quedan pegados en pantallas táctiles, altura de pantalla con la barra del navegador y zonas seguras. Separa lo que puedes comprobar en el código de lo que debo probar yo en un móvil real.Usa la skill break-ui con [formulario de contacto / tabla de pedidos / ficha de cliente]. Prueba nombres y correos muy largos, campos vacíos, cifras de siete dígitos y textos con emojis. Enséñame qué se descuadra y corrígelo sin cambiar el diseño general./prototype Crea tres variantes claramente distintas de [el bloque de precios / el botón principal de la portada], con un selector para alternar entre ellas en local. Explica en una línea qué sensación busca cada una.07 Problemas frecuentes
Claude no encuentra las skills
Abre una sesión nueva. Si sigue igual, comprueba que la sesión es local y vuelve a lanzar el instalador pidiendo a Claude que te muestre el error completo.
npx no existe
Necesitas Node.js instalado. Instala la versión LTS desde la web oficial de Node y vuelve a abrir la terminal.
Ha animado de más
Pídele que revise de nuevo con emil-design-eng y elimine la animación de todo lo que se use de forma repetida.
/review-animations no responde
Es una skill manual: escríbela con la barra y añade qué quieres revisar. Sin cambios recientes, no tiene nada que evaluar.
Preguntas frecuentes
Sí. El repositorio es público y tiene licencia MIT, así que puedes usarlas en proyectos propios y de clientes.
No para usarlas: describes lo que quieres y Claude aplica los cambios. Sí conviene que sepas revisar el resultado en el navegador y deshacer cambios con Git.
La CLI de skills admite muchos agentes (Codex, Cursor, OpenCode y otros). Cambia el valor de -a por el agente que uses o quita la opción para elegirlo de forma interactiva.
No por sí mismas: son instrucciones en texto para Claude. De hecho, suelen recomendar animar solo transform y opacity, que son las propiedades más baratas para el navegador.
Vuelve a ejecutar el mismo comando de instalación. Descargará la versión actual del repositorio.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.