lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill intermedio claude-codecodexdiseñoanimación

Skills de Emil Kowalski: decide el movimiento de una interfaz

Mejora curvas, tiempos y comportamiento de tus interfaces con criterios que el agente puede aplicar y revisar sobre el código.

✓ verificado el 27 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.


Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: instala

Comprueba Node.js ≥22.20.0, npm/npx y un arnés que cargue skills. El mínimo es el del manifiesto del instalador skills.

npx skills@latest add emilkowalski/skills

Paso 2: revisa una interacción

Selecciona emil-design-eng o review-animations. Pide cambios justificados antes de extenderlos al resto.

Comprobación

Compara la interacción antes y después. Comprueba que el agente explica curva, duración y propósito; revisa también movimiento reducido.

Si algo falla

Si una recomendación no encaja, aporta la frecuencia de uso y el objetivo. Para falta de fluidez, consulta animation-performance.

ver en .md ¿Prefieres el recurso entero?

Qué es

La colección de Emil Kowalski recoge instrucciones de diseño e ingeniería de interfaces. La skill principal se centra en animación y decisiones visuales; otras separan creación, revisión y rendimiento.

Para qué te sirve

  • Cuando una entrada se siente lenta aunque dure poco.
  • Cuando un agente anima todos los controles sin una razón de uso.
  • Cuando necesitas localizar animaciones que pierden fluidez.

Cómo funciona

Cada skill enfoca una tarea: construir una animación, revisarla con reglas estrictas o proponer mejoras priorizadas. Las referencias explican decisiones como elegir curvas de salida para ciertas entradas. La colección incluye instrucciones para web y otras específicas para React Native y Expo.

Antes de empezar

Necesitas un arnés que pueda leer skills y el código de la interfaz. El instalador permite elegir las instrucciones que quieres incorporar. Prepara un ejemplo visible del problema para relacionar la regla con un comportamiento real.

Límites y alternativas

Las recomendaciones no sustituyen las pruebas de uso ni de rendimiento. La decisión final depende de frecuencia, intención y accesibilidad. No conviertas una sugerencia estética en obligación para todo el producto. Hallmark y UI Craft cubren una dirección de página más amplia.

Recursos