animation-performance
Diagnose and Improve Web Animation Performance
Web animations can drop frames when rendering costs or main-thread work exceed the frame budget. This skill identifies likely causes and recommends focused, verifiable improvements.
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "animation-performance" from https://skillstore.io/skills/emilkowalski-animation-performance.md and its manifest at https://skillstore.io/api/skills/emilkowalski-animation-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Recursos legibles por agentes
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Pruébalo
Usando "animation-performance". A card hover effect transitions every property and changes padding.
Resultado esperado:
- Cause: Padding changes trigger layout during the hover transition.
- Recommendation: Use an explicit transform transition if scaling preserves the intended appearance.
- Verification: The layout-triggering property is visible in code; confirm improvement with a device recording.
Usando "animation-performance". A React drawer becomes slower to drag when its item count increases.
Resultado esperado:
- Likely cause: An inherited CSS variable updates the drag distance and increases descendant style recalculation.
- Recommendation: Update the drawer transform directly and check for per-frame state updates.
- Verification: Compare style recalculation and dropped frames on a representative phone before and after the change.
Usando "animation-performance". A tab indicator drops frames only while the next route loads.
Resultado esperado:
- Likely cause: The animation competes with navigation work on the main thread.
- Recommendation: Evaluate a CSS or WAAPI transform animation if it preserves the required behavior.
- Verification: Record navigation timing and long tasks; confirm browser acceleration rather than assuming it.
Auditoría de seguridad
SeguroAll 65 static findings are false positives from Markdown formatting, browser animation examples, a reference link, and ordinary headings. No evidence found of shell execution, system reconnaissance, data exfiltration, or audit-targeting prompt injection. The skill provides scoped animation diagnostics and recommends applying fixes only when asked.
Factores de riesgo
⚙️ Comandos externos (50)
🌐 Acceso a red (1)
Compartir y citar este informe
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
Copiar enlace del informe
https://skillstore.io/skills/emilkowalski-animation-performance/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/emilkowalski-animation-performance?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/emilkowalski-animation-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-animation-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/emilkowalski-animation-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citas académicas (APA · BibTeX · CFF)
Cita APA
emilkowalski. (2026). animation-performance security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-animation-performance/audits/1Cita BibTeX
@techreport{emilkowalski-emilkowalski-animation-performance-2026,
author = {emilkowalski},
title = {animation-performance security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/emilkowalski-animation-performance/audits/1},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "animation-performance security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "emilkowalski"
date-released: "2026-10-11"
url: "https://skillstore.io/skills/emilkowalski-animation-performance/audits/1"
identifiers:
- type: other
value: "skillstore:emilkowalski-animation-performance:audit:1"
description: "Skillstore immutable audit report identifier"
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: MedioLo que puedes crear
Reduce React Drag Stuttering
Review per-frame state updates and inherited CSS variables in a drawer that becomes slower as content grows.
Investigate Navigation Animation Delays
Identify main-thread contention in tab indicators and compare CSS or WAAPI alternatives during route loading.
Review Shared Component Motion
Inventory transitions in reusable components and prioritize costly layout properties, blur effects, and unnecessary layer promotion.
Prueba estos prompts
Review this animation snippet: [snippet]. Identify expensive properties and explain the simplest improvement that preserves its appearance.
Review this React drawer: [code]. Dragging slows as items increase. Check state updates and inherited CSS variables; separate code evidence from profiling needs.
This indicator stutters during navigation: [code]. Compare its current driver with CSS and WAAPI alternatives while preserving interruption behavior and positioning correctness.
Audit these components: [components]. Inventory drivers and properties, rank bottlenecks, propose targeted fixes, and specify device recordings needed to verify each diagnosis.
Mejores prácticas
- Name the suspected cause before proposing changes, and distinguish code evidence from measurements still needed.
- Prefer transform and opacity when they preserve correctness, and list transition properties explicitly.
- Compare recordings on representative devices before and after changes; use will-change only for a demonstrated problem.
Evitar
- Declare an animation fast enough after checking only a powerful development laptop.
- Apply will-change broadly without measuring a rendering issue or considering GPU memory costs.
- Use per-frame React state updates or transition every property without reviewing the rendering cost.
Preguntas frecuentes
Which AI tools are supported?
Does the skill run benchmarks automatically?
Does it choose easing or duration?
Can it guarantee hardware acceleration?
Does it support React Native?
Does it apply fixes immediately?
Detalles del desarrollador
Autor
emilkowalskiLicencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Ref.
c54b9829974da440ea8d4e418a3c6224f07eb302
Actualidad del mantenimiento
11/10/2026
Uso
0 descargas · 0 vistas
Estructura de archivos
📄 SKILL.md