Communitygithub.com

emilkowalski/animation-vocabulary

アニメーションの専門用語を理解し、適切なアニメーションプロパティを提案するスキルです。

animation-vocabulary とは?

このスキルは、AIエージェントがCSSアニメーションやウェブアニメーションに関連する専門用語を正確に理解し、適切なアニメーションプロパティやテクニックを提案できるようにします。開発者が「フェードイン」「スライド」「イージング」といった一般的なアニメーション用語を使用した際に、対応するCSSプロパティ(`animation`, `transition`, `transform`など)や具体的な実装方法を推奨します。主にフロントエンド開発やUI/UXデザインのタスクで役立ち、Claude CodeやCursorなどのAIエージェントプラットフォームで動作します。このスキルはemilkowalski/skillsリポジトリから提供され、アニメーション関連のタスクに特化しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/emilkowalski/skills/tree/main/skills/animation-vocabulary

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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 メディアクエリの使用を推奨します。

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

関連スキル