animation-vocabulary は何をしますか?
emilkowalski/skills からのエージェントスキル 'animation-vocabulary'。タスクがこのスキルのドメインに一致する場合に使用します。
概要
このスキルは、アニメーションに関する用語を理解し、適切なCSSプロパティや実装方法を提案するために設計されています。以下のような一般的なアニメーション用語を認識します:
- フェードイン / フェードアウト
- スライドイン / スライドアウト
- イージング(ease-in, ease-out, ease-in-out)
- キーフレームアニメーション
- トランジション
- トランスフォーム(scale, rotate, translate)
使用方法
エージェントがアニメーション関連のタスクを受け取った場合、このスキルを自動的に呼び出します。ユーザーは特別なアクションは必要ありません。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIエージェント
例
ユーザーが「要素をスライドインさせたい」と言った場合、エージェントは次のようなCSSを提案します:
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.element {
animation: slideIn 0.5s ease-out;
}
注意事項
- このスキルはアニメーションの用語と実装を関連付けるためのものです。
- パフォーマンスに関する考慮事項も必要に応じて提案します(例:
will-changeプロパティの使用)。 - アクセシビリティに配慮し、
prefers-reduced-motionメディアクエリの使用を推奨します。