技能 animation-performance

📦

animation-performance

Name: animation-performance
Author: emilkowalski

内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问

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.

支持: Claude Codex Code(CC)

🥉 77 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

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.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/emilkowalski-animation-performance.md 已签名 manifest GET /api/skills/emilkowalski-animation-performance/manifest 已签名 lockfile GET /api/skills/emilkowalski-animation-performance/lockfile

测试它

正在使用“animation-performance”。 A card hover effect transitions every property and changes padding.

预期结果:

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.

正在使用“animation-performance”。 A React drawer becomes slower to drag when its item count increases.

预期结果:

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.

正在使用“animation-performance”。 A tab indicator drops frames only while the next route loads.

预期结果:

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.

安全审计

安全

v1 • 2026/10/11 打开版本化报告

All 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.

已扫描文件

223

分析行数

复核项

已忽略误报

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/emilkowalski-animation-performance/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/emilkowalski-animation-performance/security.svg)](https://skillstore.io/skills/emilkowalski-animation-performance?utm_source=security_passport_badge)

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>

嵌入卡片

<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>

学术引用 (APA · BibTeX · CFF)

APA 引用

emilkowalski. (2026). animation-performance security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-animation-performance/audits/1

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"

Skillstore 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

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.

试试这些提示

Explain a Slow Transition

Review this animation snippet: [snippet]. Identify expensive properties and explain the simplest improvement that preserves its appearance.

Diagnose React Drag Performance

Review this React drawer: [code]. Dragging slows as items increase. Check state updates and inherited CSS variables; separate code evidence from profiling needs.

Compare Animation Drivers

This indicator stutters during navigation: [code]. Compare its current driver with CSS and WAAPI alternatives while preserving interruption behavior and positioning correctness.

Audit a Component Collection

Audit these components: [components]. Inventory drivers and properties, rank bottlenecks, propose targeted fixes, and specify device recordings needed to verify each diagnosis.

最佳实践

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.

避免

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.

常见问题

Which AI tools are supported?

The skill supports Claude, Codex, and Claude Code.

Does the skill run benchmarks automatically?

No. It provides diagnostic guidance and recommends browser recordings and real-device profiling to verify performance.

Does it choose easing or duration?

No. Its scope is animation performance, not motion styling or deciding whether motion should exist.

Can it guarantee hardware acceleration?

No. Acceleration depends on browser support and runtime conditions. Recommendations should preserve correctness even when acceleration is unavailable.

Does it support React Native?

No. The guidance covers web animation and browser rendering, not React Native thread behavior.

Does it apply fixes immediately?

Its workflow reports causes and recommendations first. It instructs the assistant to apply fixes when the user asks.

开发者详情

作者

emilkowalski

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/emilkowalski/skills/tree/2d228630ba1446365f614a108cb8252f1feda202/skills/animation-performance

引用

c54b9829974da440ea8d4e418a3c6224f07eb302

维护新鲜度

2026/10/11

使用量

0 次下载 · 0 次浏览

文件结构

📄 SKILL.md

emilkowalski 的更多技能

查看全部

📦

apple-design

设计流畅的 Apple 风格 Web 界面

手势驱动的 Web 界面常常显得延迟、僵硬或视觉不一致。此技能为响应式动效、材质、排版、无障碍和交互设计提供实用指导。

设计与创意查看

📦

pick-ui-library

Choose the Right Frontend UI Library

Choosing among frontend libraries can waste time and create inconsistent dependencies. This skill maps a defined UI task to an opinionated, curated library recommendation.

编码与开发查看

📦

find-animation-opportunities

Find High-Value UI Animation Opportunities

Teams often add motion without a clear user benefit, which can make interfaces feel slow or distracting. This skill audits UI seams, applies a strict decision gate, and produces a short ranked list of precise motion recommendations.

设计与创意查看

📦

mobile-native

Make Web Apps Feel Native on Mobile

Mobile web applications often feel awkward because browser defaults conflict with touch interaction and changing viewports. This skill applies focused CSS and metadata fixes for a more native mobile experience.

编码与开发查看

📦