web-animation-designFinalidad, uso y origen

Lo que hace esta habilidad

Diseña e implementa animaciones web que se sientan naturales y con propósito. Usa esta habilidad de forma proactiva siempre que el usuario haga preguntas sobre animaciones, movimiento, suavizado, sincronización, duración, resortes, transiciones o rendimiento de la animación. Esto incluye preguntas sobre cómo animar elementos específicos de la interfaz de usuario, qué suavizado usar, mejores prácticas de animación o consideraciones de accesibilidad para el movimiento. Se activa en: suavizado, suavizado de salida, suavizado de entrada, suavizado de entrada y salida, cúbica-bezier, rebote, física de resorte, fotogramas clave, transformación, opacidad, desvanecimiento, deslizamiento, escala, efectos de desplazamiento, microinteracciones, Framer Motion, React Spring, GSAP, transiciones CSS,entrance/exitanimaciones, transiciones de página, escalonamiento, cambiará, aceleración de GPU, prefiere movimiento reducido,modal/dropdown/tooltip/popover/draweranimaciones, animaciones de gestos, interacciones de arrastre, sensación al presionar botones, se siente tosco, hágalo suave.

Cómo funciona el flujo de trabajo ascendente

Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

Requisitos y configuración

No se seleccionó ningún fragmento de requisitos breves de este archivo. Esto no significa que la habilidad no tenga dependencias. Consulte las instrucciones de configuración del repositorio y los archivos de referencia.

Límites y controles de calidad

Comience con una prueba segura.

1. Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
2. Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
3. Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
4. Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.

Especificación del formato y directorio de habilidades ↗

Lea más en la fuente

• Diseño de animación web
• Respuesta inicial
• Formato de revisión (obligatorio)
• Inicio rápido
• salida gradual (más común)
• entrada y salida suaves (para movimiento)
• Facilidad (para efectos al pasar el cursor)
• lineal (Evitar en la interfaz de usuario)
• adaptación gradual (casi nunca)
• Regla de elementos emparejados
• Directrices sobre la duración
• La frecuencia
• Cuándo animar
• Animaciones de primavera
• ¿Cuándo usar resortes?
• Configuración
• Directrices de rebote
• Interrupción
• La regla de oro
• Técnicas de optimización
• CSS vs. JavaScript
• Accesibilidad
• prefiere-movimiento-reducido
• Directrices para la reducción del movimiento
• Consideraciones sobre dispositivos táctiles
• Consejos prácticos
• Diagrama de flujo para facilitar la toma de decisiones
• Archivos de referencia

Habilidades relacionadas

• agent-browservercel-labs/open-agents
• ai-sdkvercel-labs/open-agents
• baseline-uivercel-labs/open-agents
• chat-sdkvercel-labs/open-agents

Traducción y alcance

Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.

Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.

Fuente fijada

Lee el original ↗

Fuente recuperada

2026-10-29T09:32:23Z

Confirmación de origen

cf865e94de7729751c747171785b6ce57e7b178c

Fuente SHA-256

dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332