Emil Kowalski Skills

Quiero que mi página se sienta como una app de Apple. Antes de cambiar algo, revísala.

1. Usa la skill improve-animations para revisar todas las animaciones y transiciones de mi página.
2. Revisa también con la skill apple-design: que los botones respondan al instante, que los menús salgan de donde los toco, que las animaciones se puedan interrumpir, que la barra de arriba se sienta ligera y que la página respete a quien tiene apagado el movimiento en su teléfono.
3. Dime también dónde falta movimiento y dónde sobra.

No cambies ningún archivo todavía. Yo no sé programar: explícame cada punto en palabras simples, con un ejemplo de qué voy a notar cuando esté arreglado. Ordena todo de lo que más se nota a lo que menos.

Vamos con el punto 1 de la tabla.

Escribe el plan para ese punto y después aplícalo. Solo ese, nada más. Cuando termines:
- Dime en palabras simples qué cambió.
- Levanta la página en mi compu y dame el link para verla.
- Dime exactamente dónde hago clic o qué toco para notar la diferencia.

/review-animations revisa los cambios de animación que hicimos en esta sesión. Dame tu veredicto y, si algo no pasa, explícame en palabras simples qué está mal y arréglalo.

Usa la skill emil-design-eng para revisar todos los botones de mi página. Quiero que se hundan tantito en cuanto los presiono, que respondan al instante y que el efecto de pasar el mouse solo aparezca en computadora. Dame la tabla de antes, después y por qué, y aplica los cambios.

Usa las skills emil-design-eng y apple-design para el menú de [nombre o ubicación del menú]. Que salga del botón que lo abre, que sea rápido, que no aparezca desde un punto y que se pueda cerrar a la mitad si me arrepiento. Explícame qué cambiaste.

Usa la skill animate para la ventana de [qué ventana: registro, carrito, etc.]. Decide si debe animarse, cuánto debe durar y cómo debe cerrarse. Que el fondo se oscurezca para que me enfoque en la ventana, y que al cerrar sea más rápido que al abrir.

Usa la skill find-animation-opportunities en mi página de inicio: ¿qué secciones deberían aparecer con movimiento al hacer scroll y cuáles deben quedarse quietas? Propón valores exactos y explícame por qué. No apliques nada hasta que te diga cuáles sí.

Usa las skills apple-design y emil-design-eng en la primera sección de mi página. Quiero que se sienta como la página de un producto de Apple: títulos con buen espaciado, entrada suave y sin exagerar. Si algo se mueve, que tenga una razón. Dame la tabla de antes, después y por qué.

Usa la skill mobile-native en mi página. Revisa el zoom raro cuando escribo en un campo, el destello gris al tocar, los efectos de mouse que se quedan pegados en el celular y la pantalla que brinca cuando aparece la barra del navegador. Dime cuáles puedes comprobar en el código y cuáles tengo que probar en mi teléfono.

Usa la skill animation-vocabulary. Vi en una página un efecto donde [descríbelo con tus palabras: las letras aparecían una por una, la tarjeta se inclinaba al pasar el mouse, etc.]. ¿Cómo se llama? Dame el nombre y una frase que le pueda decir a Claude para pedirlo.

Usa la skill apple-design, la parte de tipografía. Revisa los títulos y el texto de mi página: el espaciado entre letras de los títulos grandes, el interlineado y el grosor. Ajústalo como lo hace Apple y explícame cada cambio en palabras simples.

Usa las skills emil-design-eng y apple-design para revisar si mi página respeta la opción de reducir movimiento del teléfono y de la computadora. Donde algo se desliza o rebota, que en ese modo solo aparezca suavecito. Dime cómo lo pruebo yo.

/prototype hazme tres versiones distintas de [el botón de comprar, la tarjeta de precios, el aviso de suscripción]. Que cada una se sienta diferente y ponlas en un selector para compararlas en vivo.

Usa la skill break-ui con [la sección de testimonios, la tabla de precios, el perfil]. Prueba nombres larguísimos, textos vacíos, emojis y números enormes. Enséñame qué se rompe y arréglalo.