animate

Resumen

¿Qué es la skill animate?

La skill animate te ayuda a revisar y mejorar características de la interfaz de usuario con animaciones intencionadas, microinteracciones y efectos de movimiento. Está diseñada para diseñadores UI y desarrolladores frontend que buscan mejorar la usabilidad, ofrecer retroalimentación y crear experiencias agradables mediante el diseño de movimiento. Usa animate cuando necesites añadir animaciones, transiciones, efectos hover o hacer que tu UI se sienta más viva y atractiva.

¿Quién debería usar animate?

• Diseñadores UI/UX que quieran aportar pulido y claridad a las interfaces
• Desarrolladores frontend que implementan estrategias de animación
• Equipos que buscan mejorar la retroalimentación al usuario y guiar la atención con movimiento

Problemas que resuelve

• Reduce interfaces estáticas y sin vida
• Añade retroalimentación visual para acciones del usuario
• Suaviza transiciones bruscas
• Clarifica relaciones y guía el foco del usuario

Cómo usar

Pasos de instalación

1. Instala la skill animate con el siguiente comando:

   npx skills add https://github.com/pbakaus/impeccable --skill animate

2. Comienza con el archivo SKILL.md para seguir un flujo de trabajo estructurado y buenas prácticas.

3. Revisa archivos complementarios como README.md, AGENTS.md y metadata.json para contexto adicional si están disponibles.

4. Adapta el flujo recomendado a las herramientas y necesidades de tu proyecto; no copies las instrucciones literalmente.

Resumen del flujo de trabajo

• Preparación obligatoria:
  • Invoca /frontend-design para recopilar principios de diseño y contexto. Si no hay contexto de diseño, ejecuta primero /teach-impeccable.
  • Recopila restricciones de rendimiento para asegurar que las animaciones no afecten la usabilidad.
• Evaluar oportunidades de animación:
  • Identifica áreas estáticas o abruptas que carecen de retroalimentación o atractivo.
  • Considera la personalidad del producto, la audiencia y las necesidades de rendimiento.
• Planificar e implementar animaciones:
  • Añade movimiento estratégicamente donde mejore la comprensión y satisfacción del usuario.

Archivos clave para revisar

• SKILL.md (flujo de trabajo principal y guía)

Preguntas frecuentes

¿Cuándo debería usar la skill animate?

Usa animate cuando tu proyecto requiera animaciones intencionadas, transiciones o microinteracciones para mejorar la experiencia del usuario, ofrecer retroalimentación o añadir atractivo.

¿Animate proporciona código o solo orientación?

La skill se centra en el flujo de trabajo, análisis y buenas prácticas para añadir animación. No ofrece código de animación listo para usar, pero te ayuda a planificar e implementar movimiento efectivo en tu UI.

¿Dónde puedo encontrar más detalles?

Abre la pestaña de Archivos en el repositorio para explorar el árbol completo, incluyendo referencias y scripts auxiliares para un contexto más profundo.