Las skills que hacen que tu interfaz no parezca de programador

Tu app con IA funciona, pero se nota quién la ha hecho: un programador, no un diseñador. Este repo le da a tu agente el criterio que le falta para que las animaciones y la interfaz dejen de cantar a plantilla. Once skills, un comando, gratis.

Instalación

npx skills@latest add emilkowalski/skills

Un comando y las once quedan disponibles para tu agente (Claude Code, Codex, Cursor y demás hosts compatibles con skills). No hay que elegir cuál instalar: entra el paquete entero.

De quién es esto

El repo se llama emilkowalski/skills — “Skills for Designers and Engineers”. 30,6k estrellas, 1,7k forks, licencia MIT (gratis y open source). Lo mantiene Emil Kowalski, el creador de Sonner y Vaul, con paso por Vercel y Linear. Esto no es un hallazgo mío: es su trabajo, y el crédito es suyo.

Su propia filosofía, tal cual la cuenta en el README del repo:

“la IA no reemplaza esa experiencia, amplifica lo que puedes sacar de ella”

Estas skills existen para eso: que el agente no cometa los errores típicos de diseño y animación que comete por defecto.

Las once skills — cuál usar y cuándo

Skill	Qué hace	Cuándo la usas
`emil-design-eng`	La skill base: el criterio general de diseño e ingeniería de Emil aplicado a cualquier interfaz.	Como skill por defecto cuando tocas UI y no sabes por cuál de las otras diez empezar.
`animate`	Anima interfaces web.	Un componente está ahí quieto y necesita movimiento: entradas, transiciones, hover.
`animate-expo`	La versión de `animate` para apps nativas: React Native y Expo.	Curras en una app móvil, no en web. Es la novedad — más abajo.
`review-animations`	Audita las animaciones que ya tienes en la interfaz.	Algo se mueve pero no sabes si está bien o mal, antes de tocar nada.
`improve-animations`	Arregla lo que `review-animations` ha señalado.	Justo después de la revisión, para pasar de diagnóstico a fix.
`find-animation-opportunities`	Recorre tu interfaz y detecta dónde faltan animaciones que deberían estar.	Tu app funciona pero se siente estática y no sabes por dónde empezar.
`animation-vocabulary`	Vocabulario y conceptos de animación para hablar el mismo idioma que el agente.	Quieres pedir un cambio de animación con precisión, no con “que se mueva más bonito”.
`apple-design`	Aplica criterios de diseño al estilo Apple.	El producto necesita ese acabado limpio tipo iOS/macOS.
`pick-ui-library`	Ayuda a elegir qué librería de componentes usar.	Al arrancar un proyecto, antes de instalar la primera dependencia de UI.
`prototype`	Monta prototipos rápidos de interfaz.	Quieres validar una idea antes de construirla en serio.
`ask-sonner`	Responde dudas concretas sobre Sonner, la librería de toasts de Emil.	Estás implementando o depurando notificaciones toast con Sonner.

No las lances todas a la vez sobre el mismo componente: se pisan. Una por tarea, en el orden que te toque (por ejemplo: find-animation-opportunities → animate → review-animations).

La novedad: `/animate-expo` para apps nativas

Lanzada el 19 de agosto, en colaboración con el equipo de Expo. Como la resume el propio Emil: “todo el conocimiento de animación, pero para tus apps nativas. React Native y Expo: gestos, sheets, hápticas, transiciones de pantalla.”

Nathan Schroeder, de Expo, enseñó lo primero que construyó con ella: un toast stack. Si tu proyecto es una app móvil con React Native o Expo, esta es la skill que llena el hueco que hasta ahora no cubría ninguna herramienta de este tipo: el mundo nativo se queda sin el mismo nivel de acabado que la web.

Regla de oro

No le pidas al agente “que quede bonito” — dale una de estas once skills y un objetivo concreto. El output deja de parecer hecho por un programador.

Repo de Emil Kowalski → github.com/emilkowalski/skills

Sígueme para más trucos con Claude Code e IA → @pabloinpublic

Únete a la comunidad → pabloinpublic.com