Ir a la guía de uso
fixing-motion-performancepor Julien Thibeaut

Fixing Motion Performance Skill.

Una skill de Claude Code y Codex para motion y video: encuentra y corrige animaciones CSS/JS y movimiento vinculado a scroll con problemas de rendimiento.

  • Movimiento y video
  • Informe de revisión
ibelick/ui-skills · skills/fixing-motion-performance/SKILL.mdSKILL.md
--- name: fixing-motion-performance description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. --- ## how to use ## when to apply ## rendering steps glossary ## rule categories by priority ## common fixes ## review guidance
Encabezados de portada y sección leídos del archivo upstream el 14/09/2026 · 5.561 caracteres completos

01 Qué hace

Qué hace el skill fixing-motion-performance en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Una guía de auditoría y corrección para el rendimiento de animaciones en CSS y JS, dirigida a diseñadores y desarrolladores que revisan o refactorizan transiciones con tirones, movimiento vinculado al scroll y efectos de blur. Se distribuye como un slash command: invocado sin argumentos, aplica las directrices a cualquier trabajo de animación en la conversación; si se le indica un archivo, informa de las infracciones citando la línea exacta, por qué importa y una corrección a nivel de código.

Las reglas están ordenadas por prioridad, desde los patrones que nunca deben usarse, la elección del mecanismo y los límites de herramientas en el nivel crítico, hasta la medición, el scroll, el paint, las capas y el blur, y finalmente las view transitions. Se niega a migrar bibliotecas de animación salvo que se le solicite, aplicando las reglas dentro del stack existente.

Qué produce

  • Una frase breve por cada infracción explicando por qué importa.
  • Una corrección concreta, a nivel de código, para cada infracción.
  • Una justificación explícita para cualquier elección de trabajo de renderizado que no sea la predeterminada.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Invócalo como un slash command

    Ejecuta /fixing-motion-performance para vincular las restricciones a cualquier trabajo de animación que ya se esté discutiendo en la sesión.

  2. 02
    O apúntalo a un archivo

    Pasar una ruta lo cambia al modo de revisión, comprobando ese archivo con cada regla en lugar de restringir el trabajo en curso.

  3. 03
    Informar en Tres Partes

    Cada hallazgo cita la línea infractora, ofrece una frase breve sobre por qué importa y propone una corrección a nivel de código.

  4. 04
    Ordenar propiedades por paso de renderizado

    El glosario divide el trabajo en composite, paint y layout, de modo que el revisor sabe qué animaciones son económicas y cuáles son costosas.

  5. 05
    Aplicar en orden de prioridad

    Las categorías críticas se comprueban antes que las de menor impacto, de modo que los patrones que nunca deben usarse y los límites de herramientas se resuelven primero.

  6. 06
    Permanecer dentro del stack actual

    La migración de librerías no forma parte del trabajo; las reglas se aplican al sistema de animación que el código ya utiliza.

02 Encuentra tu caso de uso

Cuándo usar el skill fixing-motion-performance

Usa el skill fixing-motion-performance en Claude Code o Codex cuando el trabajo sea motion y video de este tipo. El ajuste y los límites a continuación se toman del archivo propio del skill.

Buen caso de uso

  • Añadir o modificar animaciones de UI escritas con CSS, WAAPI, Motion, rAF o GSAP.
  • Refactorizar interacciones o transiciones que ya se sienten con tirones.
  • Implementar movimiento vinculado al scroll o efectos de aparición al hacer scroll que actualmente dependen de eventos de scroll.
  • Animar layout, filtros, máscaras, gradientes o variables CSS, donde el costo es toda la cuestión.
  • Revisar componentes que dependen de will-change, transforms o mediciones.

Conozca los límites

  • Transiciones de vista más allá de cambios a nivel de navegación, como UI con muchas interacciones o flujos que deben poder interrumpirse.
  • Efectos de desenfoque continuos o en superficies grandes, que quedan excluidos en lugar de optimizados.

Qué proporcionar

  • El comando slash por sí soloPara trabajo en vivo, invocarlo sin más es suficiente; a partir de ahí da forma a cualquier cambio de animación realizado en la conversación.
  • Una ruta de archivo para el modo de revisiónPasar un archivo hace que el skill revise ese archivo contra todas las reglas y produzca el informe de infracciones.
  • El sistema de animación existenteNo se indica una librería objetivo; el código tal como está es el punto de referencia, y las reglas se aplican dentro de él.

03 Dentro del skill

Reglas que el skill fixing-motion-performance le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Nunca Intercalar Lecturas y Escrituras

    Las lecturas y escrituras de layout no deben mezclarse dentro del mismo frame, y varios sistemas de animación que midan o modifiquen el layout no deben ejecutarse a la vez.

  2. Nunca Animar a Partir de la Posición de Scroll

    Está prohibido impulsar la animación a partir de scrollTop, scrollY o eventos de scroll; use Scroll Timelines o View Timelines e IntersectionObserver en su lugar.

  3. Todo Bucle rAF Necesita una Salida

    Un bucle requestAnimationFrame sin condición de detención es un patrón que nunca debe usarse, no un compromiso aceptable.

  4. Priorizar Transform y Opacity por Defecto

    Estas son las propiedades del compositor y el punto de partida para el movimiento; la animación impulsada por JS se reserva para las interacciones que la requieren.

  5. Limitar el Blur a 8px

    La animación de desenfoque debe mantenerse pequeña, en 8px o menos, y se limita a efectos breves de una sola vez; el desenfoque continuo y el desenfoque en superficies grandes quedan descartados.

  6. Usar will-change de Forma Quirúrgica

    La promoción de capas no es automática, por lo que will-change se aplica de forma temporal y acotada, en lugar de dejarlo activo en capas promovidas numerosas o grandes.

  7. No Animar Variables CSS para Movimiento

    Las propiedades personalizadas que controlan transform, opacity o position no deben animarse, y las variables animadas heredadas están prohibidas por completo.

  8. Sin Migraciones a Medias

    Dentro de un mismo componente, las APIs no deben migrarse parcialmente y los estilos de animación no deben mezclarse.

04 Ponlo a trabajar

Instalar fixing-motion-performance en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agrega fixing-motion-performance a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

Formulario genérico de la CLI skills para skills/fixing-motion-performance/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Use /fixing-motion-performance on [path/to/Component.tsx]. The [side panel] transitions width on hover, the reveal-on-scroll is wired to a window scroll listener, and there is a blurred overlay on a full-width section. Report each violation with the exact line, why it matters, and a concrete fix, working within our existing [Motion] setup rather than migrating libraries.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Confirme que la corrección propuesta realiza el trabajo de renderizado menos costoso que aún coincida con el efecto previsto.
  • Compruebe que todo lo que se mueve fuera de pantalla realmente se pausa o se detiene en lugar de dejarse en ejecución.
  • Cuando la promoción de capas sea relevante, verifíquela con herramientas en lugar de asumir que ocurrió.

En OpenDesign importe fixing-motion-performance desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Repository
github.com/ibelick/ui-skills Rama main
Archivo de skill
skills/fixing-motion-performance/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 79081ab
License
MIT De LICENSE.
Estrellas del repositorio
8.402 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio ibelick/ui-skills, que contiene 5 skills en este catálogo. No es una calificación ni un recuento de uso para fixing-motion-performance.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

  1. cómo usarloLa invocación simple limita la sesión; un argumento de archivo activa un informe completo de infracciones.
  2. cuándo aplicarloEnumera las cinco situaciones que deberían activar estas pautas durante el trabajo de animación.
  3. glosario de pasos de renderizadoDefine composite, paint y layout, y las propiedades que cubre cada uno.
  4. categorías de reglas por prioridadNueve categorías clasificadas con una etiqueta de impacto, de crítico a bajo.
  5. referencia rápidaNueve categorías numeradas de restricciones breves en viñetas, desde patrones prohibidos hasta límites de herramientas.
  6. correcciones comunesFragmentos de CSS y JS antes/después para thrashing de layout, movimiento vinculado al scroll y medición FLIP.
  7. guía de revisiónCómo realizar la revisión: primero lo crítico, el trabajo más económico, elecciones no predeterminadas justificadas, notas prácticas.
La descripción propia del Skill
«Audita y corrige problemas de rendimiento de animaciones, incluyendo layout thrashing, propiedades de compositor, movimiento vinculado al scroll y efectos de desenfoque. Úsalo cuando las animaciones se entrecorten, las transiciones tengan saltos o estés revisando el rendimiento de animaciones CSS/JS.»

Descripción del encabezado de SKILL.md. El archivo completo tiene unos 5.561 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill fixing-motion-performance

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué bibliotecas de animación cubre?

Menciona CSS, WAAPI, Motion, rAF y GSAP dentro de su alcance, por lo que es amplio en lugar de estar ligado a un solo framework. Como aplica reglas dentro del sistema existente, se adapta a cualquiera de estos que ya esté usando.

Fixing Motion Performance

Ejecuta fixing-motion-performance en una tarea real de Motion & Video.

Descarga OpenDesign, importa fixing-motion-performance desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows