106.9K+Descargar
Ir a la guía de uso
UI Animationpor mblode

UI Animation Skill.

Crea, depura y mide animaciones de interfaz con propósito.

  • Animación UI
  • Movimiento reducido
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · ui-animationSKILL.md
Tarea Crea, depura y mide animaciones de interfaz con propósito. Resultados Implementación o revisión focalizada de movimiento UI. Antes de empezar Aporta código o referencia grabada clara, frecuencia de acción y dispositivos objetivo. Define si es revisión, modificación o reconstrucción medida.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Crea, depura y mide animaciones de interfaz con propósito

Revisa transiciones, resortes y gestos UI o ajusta movimiento desde grabaciones, comprobando interrupciones, tasa de fotogramas y movimiento reducido.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

ui-animation cubre creación, revisión y medición del movimiento de interfaz. Empieza por propósito y frecuencia de la interacción, luego elige tiempos e implementación. Feedback, orientación y continuidad guían la decisión; las acciones frecuentes deben seguir siendo inmediatas.

Otro flujo mide movimiento desde una grabación. Extrae fotogramas, sigue un elemento y ajusta curvas de resorte o aceleración antes de generar parámetros. Apertura y cierre se tratan por separado; una grabación nueva se compara con la referencia para verificar que se conservaron las fases reconstruidas.

Entregables esperados

  • Implementación o revisión focalizada de movimiento UI.
  • Especificación medida de curva o resorte desde una grabación.
  • Entrega con tiempos, fases de propiedades y observaciones de validación.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Decidir por qué debe moverse el estado

    Identifica necesidades de feedback, continuidad u orientación y frecuencia de acción. Conserva finalización inmediata y foco de teclado.

  2. 02
    Elegir o medir movimiento

    Elige receta o extrae la grabación a su frecuencia real y ajusta el movimiento pertinente. Distingue apertura y cierre.

  3. 03
    Probar la interacción real

    Alterna rápidamente, revisa a cámara lenta y prueba táctil y movimiento reducido. Para reconstruir, compara una grabación de la implementación con la original.

02 Cuándo usarlo

Cuándo usarlo

Aporta código o referencia grabada clara, frecuencia de acción y dispositivos objetivo. Define si es revisión, modificación o reconstrucción medida.

Buen encaje

  • Una interacción se siente incorrectaLa fuente dirige la lentitud, los saltos y las activaciones erróneas a comprobaciones concretas de tiempos o implementación.
  • Necesitas reproducir un efecto grabadoLos scripts permiten medir, no solo adivinar un resorte visualmente.

Límites que conviene comprobar

  • No define toda la dirección visualPaleta, tipografía y diseño general del producto quedan fuera del alcance principal.
  • Medir necesita dependenciasEl flujo usa FFmpeg y paquetes Python de seguimiento y ajuste de curvas.
  • Un ajuste no demuestra equivalenciaFotogramas perdidos, frecuencia variable y movimiento multifase pueden hacer engañosa una curva única.

Aporta estos datos

  • Componente o grabaciónAporta código que mejorar o clip claro de referencia.
  • Comportamiento y frecuenciaDescribe acción, estado resultante y frecuencia de repetición.
  • Plataforma objetivoEspecifica stack, dispositivos y requisitos de accesibilidad.

03 Decisiones importantes

Decisiones importantes

  1. Propósito antes que decoración

    El marco puede rechazar animación innecesaria además de recomendarla.

  2. Gestión de interrupciones

    Alternar rápido revela problemas de reinicio y cambio de objetivo ausentes en reproducción normal.

  3. Entrega medida

    Tiempos por propiedad y parámetros ajustados hacen más precisa la reconstrucción.

04 Ejemplo de brief

Prueba con un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Aporta código que mejorar o clip claro de referencia.

Archivo fuente original
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa ui-animation para diagnosticar el panel lateral de mi grabación y componente React. Mide apertura y cierre por separado a la frecuencia real. Determina si la demora percibida viene de la curva, una pausa inicial o trabajo que bloquea el hilo principal. Mantén inmediato el foco de teclado y conserva el comportamiento. Propón el cambio mínimo y prueba alternancia rápida y movimiento reducido. Si ajustas un resorte o curva, informa de limitaciones y compara una grabación revisada con la referencia, sin afirmar coincidencia visual solo por los parámetros.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Prueba cambios rápidos de objetivo y reproducción lenta en ambos sentidos.
  • Iguala las tasas de fotogramas de extracción y ajuste de curvas.
  • Prueba la misma tarea con movimiento reducido y entrada táctil.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
mblode
Repositorio
mblode/agent-skills
Archivo del skill
SKILL.md
Licencia
MIT
Versión revisada
2026-11-02 · 391508702523
Resumen editorial de la fuente
Crea, depura y mide animaciones de interfaz con propósito.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puede encontrar dónde añadir animación?

Sí. La exploración informa oportunidades según propósito y frecuencia, incluidas sugerencias rechazadas. Explorar no autoriza implementar.

¿Por qué medir apertura y cierre separados?

Suelen tener tiempos y carácter distintos. La fuente advierte de no ajustar un sentido e invertirlo sin más.

¿Una regla CSS de movimiento reducido cubre todo?

No necesariamente. La fuente señala que el movimiento controlado por JavaScript necesita su propia gestión del movimiento reducido y debe probarse en la interacción real.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md