Design & Motion · iart-ai/web-animation-skills
60fps-animation
This skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".
L2 Local · Restricted workspaceV1 Commit-PinnedWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Attribute jank to the browser rendering pipeline: animating width/height/top/left/margin/box-shadow/filter triggers layout/paint on every frame, whereas only transform and opacity run on the compositor thread
skills/60fps-animation/SKILL.md
Eliminate the #1 cause of janky web animation: animating properties that force the browser to recalculate layout (reflow) or repaint on every frame. … Animating **`transform`** and **`opacity`** runs entirely on the compositor (often the GPU), skipping layout and paint, which is what makes animation smooth at 60/120fps.
Provides no stylistic advice, only pipeline-stage attribution; all subsequent recipes (pseudo-element shadows, FLIP, grid collapse) are direct implementations of this mapping table.
Map each expensive property to an inexpensive equivalent accompanied by copy-pasteable code: use pseudo-element opacity for shadows, FLIP for actual dimensions/positions, and grid 0fr→1fr or interpolate-size for height:auto
skills/60fps-animation/SKILL.md
| `box-shadow` | Paint | Animate `opacity` of a pseudo-element holding the shadow |
Includes the mapping table plus three complete code snippets (`.card::after` shadow, `flip()` function, `.wrapper{grid-template-rows:0fr}`), providing directly actionable drop-in replacements rather than just advising against modifying width.
Eliminate layout thrashing using batch-read-then-batch-write, and enforce just-in-time add/remove rules for will-change to prevent compositor layer explosions from hurting performance
skills/60fps-animation/SKILL.md
For frame-synced work, read in a `requestAnimationFrame` callback and apply writes; libraries like fastdom formalize this read/write scheduling.
The same section provides BAD/GOOD comparisons; the will-change section explicitly mandates never blanket-applying to many elements, preventing the common anti-pattern of ubiquitous translateZ(0).
Turn performance into verifiable facts: frozen-frame screenshots verify visual correctness + DevTools Performance or CDP tracing asserts zero Layout/Paint per frame
skills/60fps-animation/SKILL.md
Or headless trace: `npx playwright screenshot` for the visual, plus a CDP/`tracing` capture, and assert no `Layout`/`Paint` events fire during the animation window.
Verification splits into two approaches (freezing CSS @keyframes with animationDelay+playState; WAAPI with anim.currentTime), backing performance claims with concrete evidence rather than subjective impressions.
2Core Capabilities
01Property cost mapping and cheap alternatives for expensive animations (translate/scale/FLIP/pseudo-element shadows/layer cross-fading)
02FLIP animations for layout shifts (reflow, container changes, true dimension resizing)
03Two animation approaches for height: auto (interpolate-size/calc-size and grid 0fr→1fr fallback)
04Just-in-time add/remove rules for will-change (preventing compositor layer explosions)
05Frozen-frame delivery contract and pre-completion checklist (including prefers-reduced-motion gating)
06Built-in property cost cheatsheet (which properties trigger which pipeline stages)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx / Playwright（宿主侧截图工具；SKILL.md 在 verify 段示范，非 skill 自带） |
| cli | scripts/seek-shot.sh + scripts/contact-sheet.sh（仓库根打包助手；9 个 skill 的 SKILL.md 都点名） |
| cli | ffmpeg（contact-sheet.sh 用 hstack 拼接触表） |
| api | 浏览器原生 API：Web Animations `element.animate()`、`getBoundingClientRect`、`interpolate-size`/`calc-size()`、DevTools Performance、CDP tracing |
| network | 无第三方库；正文只允许 deps via CDN if any（未点名任何域；产物期引用不判级） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Restrict working directory
For Administrators
Retain operation logs
Evidence & Triggers (File Paths & Excerpts)
- 本地工作目录: File I/O and artifact output: Zero disk writes within this skill's directory; the agent outputs a single self-contained .html deliverable into the user's project per the output contract
Audit Notes: . Rating is based strictly on the skill's own directory (skills/60fps-animation/ = SKILL.md + 0-byte README.md + references/patterns-and-profiling.md; full verification via find confirms no hidden files, no .sh/.py/.mjs, no binaries): zero script execution, zero credential reads, zero runtime network calls (directory-wide token scan shows zero hits for fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval(), and zero disk writes. The only host-side action named in SKILL.md is npx playwright screenshot (an example in the verify section), which belongs to host-side tooling rather than the skill's behavior. If the deliverable references CDNs (the text only mentions 'deps via CDN if any' without naming any domain), it counts as an artifact-phase reference and is not graded according to Batch 4 criteria.
5Second-Pass Verification
- [ok] 只动 transform/opacity 这条中心主张是否在源码内可执行为判据 — SKILL.md 给映射表 + 完整可抄代码 + layout/paint/composite 三阶段推理，并给 DevTools Perf 与 CDP tracing 两种可复核手段；references 的成本表逐属性标注触发阶段，主张与代码一致。
- [unlocatable] Chrome 129+ 的 interpolate-size 支持声明 — SKILL.md 写 interpolate-size: allow-keywords 为 Modern (Chrome 129+/supporting browsers)，但源码内无版本依据、无 caniuse 数据、无测试；只读侦查不运行浏览器，故按文档声明记录，不当作已核事实（正文同时给了 grid 0fr→1fr 的跨浏览器兜底，风险被降级）。
- [discrepancy] Packaged helper 的相对路径是否真的落在本 skill 目录内 — SKILL.md 的 verify 段写 scripts/seek-shot.sh anim.html 0 1.5 3，但 scripts/ 位于仓库根（/var/ytdown/skills-portal/spy-repos/iart-web-animation-skills/scripts/），skills/60fps-animation/ 内没有 scripts/ 目录。以 skill 目录为 cwd 照抄该命令会找不到文件；需按仓库根（或安装后的 pack 根）执行。对 pin commit 有效。
- [ok] 60fps/120fps 之外的量化主张是否有支撑 — 正文把 60/120fps 表述为合成器路径带来的结果，并把核对交给 DevTools 的 Frame Rendering Stats，未给出伪造基准数字；未发现夸大声明。
6Verdict & Scenarios
Best for: Best for: 1) Frontend developers with existing CSS/JS animations that suffer from jank and frame drops, who need to identify bottlenecks and move them to compositor paths; 2) Scenarios requiring smooth transitions during reflows, container reparenting, or size changes (card reordering, list enter/leave, accordions); 3) Those who want a self-contained demonstration page that runs directly in the browser and self-proves performance in DevTools; 4) Projects that strictly mandate native web platform capabilities without third-party animation libraries.
Not for: Not suitable for: 1) Projects looking to orchestrate complex timelines with GSAP/Lottie from the start (use gsap-web or lottie-animation in the same repository instead); 2) Scenarios requiring timeline-level seek controls or scroll-driven storytelling (this skill does not cover ScrollTrigger); 3) Requests that only care about animation aesthetics without concern for performance diagnosis—acceptance criteria here are performance and distortion-free rendering, not visual styling.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload 60fps-animation.tar.gz
sha256:
Option B · Copy Guide for Agentf8ffc2c3bcd223d0…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.