Borrowing it
Nothing to install: this file belongs to yoshimi-I/ai-engineer-teams. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/yoshimi-I/ai-engineer-teams/main/.kiro/skills/fixing-motion-performance/SKILL.mdgit clone --depth 1 https://github.com/yoshimi-I/ai-engineer-teamsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yoshimi-i/ai-engineer-teams/fixing-motion-performance)<a href="https://agentmods.dev/skills/yoshimi-i/ai-engineer-teams/fixing-motion-performance"><img src="https://agentmods.dev/badge/skills/yoshimi-i/ai-engineer-teams/fixing-motion-performance/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/yoshimi-i/ai-engineer-teams/fixing-motion-performance"><img src="https://agentmods.dev/badge/skills/yoshimi-i/ai-engineer-teams/fixing-motion-performance.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00116 | $0.01949 |
| Opus 5 | $0.00058 | $0.00975 |
| Sonnet 5 | $0.00023 | $0.00390 |
| Haiku 4.5 | $0.00012 | $0.00195 |
Grade A, and why
fixing-motion-performance scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 151 lines — stays where its author put it; the contents beside it link to each section on GitHub.
モーションパフォーマンス修正
使い方
-
/fixing-motion-performanceこの会話のUIアニメーション作業に以下の制約を適用する。 -
/fixing-motion-performance <file>ファイルを以下のルールに照らしてレビューし、報告:- 違反箇所（該当行/スニペットを引用）
- 重要な理由（1文）
- 具体的な修正案（コードレベル）
明示的に要求されない限りアニメーションライブラリを移行しない。既存スタック内でルールを適用。
適用タイミング
以下の作業時に参照:
- UIアニメーションの追加・変更（CSS, WAAPI, Motion, rAF, GSAP）
- カクつくインタラクションやトランジションのリファクタリング
- スクロール連動モーションやスクロール時表示の実装
- レイアウト、フィルター、マスク、グラデーション、CSS変数のアニメーション
- will-change、transform、測定を使用するコンポーネントのレビュー
レンダリングステップ用語
- composite: transform, opacity
- paint: color, borders, gradients, masks, images, filters
- layout: size, position, flow, grid, flex
優先度別ルールカテゴリ
| 優先度 | カテゴリ | 影響度 |
|---|---|---|
| 1 | 禁止パターン | 致命的 |
| 2 | メカニズム選択 | 致命的 |
| 3 | 測定 | 高 |
| 4 | スクロール | 高 |
| 5 | ペイント | 中〜高 |
| 6 | レイヤー | 中 |
| 7 | ブラーとフィルター | 中 |
| 8 | ビュートランジション | 低 |
| 9 | ツール境界 | 致命的 |
クイックリファレンス
1. 禁止パターン（致命的）
- 同一フレーム内でレイアウトの読み取りと書き込みを交互に行わない
- 大きな・意味のある面でレイアウトを連続的にアニメーションしない
- scrollTop, scrollY, scroll イベントからアニメーションを駆動しない
- 停止条件のない requestAnimationFrame ループ禁止
- それぞれがレイアウトを測定・変更する複数のアニメーションシステムを混在させない
2. メカニズム選択（致命的）
- モーションのデフォルトは transform と opacity
- インタラクションが必要な場合のみ JS 駆動アニメーションを使用
- ペイントやレイアウトアニメーションは小さく分離された面でのみ許可
- ワンショット効果は連続モーションより許容されやすい
- モーションを完全に削除するよりテクニックのダウングレードを優先
3. 測定（高）
- 一度測定し、transform または opacity でアニメーション
- 全 DOM 読み取りを書き込みの前にバッチ処理
- アニメーション中にレイアウトを繰り返し読み取らない
- レイアウト風の効果には FLIP スタイルのトランジションを推奨
- 測定と書き込みをバッチ処理するアプローチを推奨
4. スクロール（高）
- スクロール連動モーションには利用可能な場合 Scroll または View Timelines を推奨
- 可視性と一時停止には IntersectionObserver を使用
- アニメーションのためにスクロール位置をポーリングしない
- 画面外のアニメーションは一時停止または停止
- スクロール連動モーションは大きな面で連続的なレイアウトやペイントをトリガーしないこと
5. ペイント（中〜高）
- ペイントトリガーアニメーションは小さく分離された要素でのみ許可
- 大きなコンテナでペイント負荷の高いプロパティをアニメーションしない
- transform, opacity, position 用の CSS 変数をアニメーションしない
- 継承される CSS 変数をアニメーションしない
- アニメーションする CSS 変数はローカルにスコープし、継承を避ける
6. レイヤー（中）
- コンポジタモーションにはレイヤープロモーションが必要、仮定しない
- will-change は一時的かつ外科的に使用
- 多数または大きなプロモートレイヤーを避ける
- パフォーマンスが重要な場合はツールでレイヤー動作を検証
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 151 lines · 116 tokens per session scan A 3c3efcb939d9
fixing-motion-performance is a skill published in the GitHub repository yoshimi-I/ai-engineer-teams (2 stars, last pushed 2mo ago), licensed MIT. It adds 116 tokens to every session and 1,949 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
mcp-host-styling-integration
Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
ui-first-builder
Creates production-ready UI immediately from any description. Generates complete pages, components, and realistic mock data in FIRST response. Uses Next.js 16 + Tailwind + shadcn/ui. Never asks questions - infers everything from context. Triggers: UI creation, page building, component generation, build interface…
component-design
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
kirby-performance-and-media
Improves Kirby performance and media delivery (cache tuning, CDN, responsive images, lazy loading). Use when optimizing page speed, caching, or image handling.
design-review
Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use…