Communitygithub.com

jakubantalik/transitions-dev

本番環境対応のCSSトランジションをWebアプリに提供します。通知バッジ、ドロップダウン、モーダル、パネル表示、ページ遷移、カードリサイズ、数字のポップイン、テキストスワップ、アイコンスワップ、成功チェック、アバターグループホバー、エラー状態のシェイク、検索/入力クリア、スケルトンローダー、シマーテキスト、スライディングタブ、ツールチップ、またはスタッガーテキスト表示などの実装時に使用します。

transitions-dev とは?

このスキルは、Webアプリケーション向けの本番環境対応CSSトランジションを提供します。通知バッジ、ドロップダウン、モーダル、パネル表示、ページ遷移、カードリサイズ、数字のポップイン、テキストスワップ、アイコンスワップ、成功チェック、アバターグループホバー、エラー状態のシェイク、検索/入力クリア、スケルトンローダー、シマーテキスト、スライディングタブ、ツールチップ、スタッガーテキスト表示など、多様なUIアニメーションをサポートします。Cline、Claude CodeなどのAIエージェントプラットフォームで動作し、「トランジションを追加」「ドロップダウンをアニメーション」「モーダルをスムーズに開く」「アイコンを入れ替える」「ページスライド」「スタッガーアニメーション」「開く/閉じるトランジション」「アニメーションさせる」「フェード切り替え」「成功アニメーション」「フォームエラー」「無効時にシェイク」「ホバーリフト」「アバターホバー」「検索をクリア」「スケルトンローダー」「読み込みシマー」「シマーテキスト」「スライディングタブ」「セグメントコントロール」「ツールチップ」「テキスト表示」といった自然言語トリガーに応答します。トランジションの適用、レビュー、改良もサポートします。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jakubantalik/transitions.dev/tree/main/skills/transitions-dev

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

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

ドキュメント

transitions-dev は何をしますか?

本番環境対応のCSSトランジションをWebアプリに提供します。通知バッジ、ドロップダウン、モーダル、パネル表示、ページ遷移、カードリサイズ、数字のポップイン、テキストスワップ、アイコンスワップ、成功チェック、アバターグループホバー、エラー状態のシェイク、検索/入力クリア、スケルトンローダー、シマーテキスト、スライディングタブ、ツールチップ、またはスタッガーテキスト表示などの実装時に使用します。「トランジションを追加」「ドロップダウンをアニメーション」「モーダルをスムーズに開く」「アイコンを入れ替える」「ページスライド」「スタッガーアニメーション」「開く/閉じるトランジション」「アニメーションさせる」「フェード切り替え」「成功アニメーション」「フォームエラー」「無効時にシェイク」「ホバーリフト」「アバターホバー」「検索をクリア」「スケルトンローダー」「読み込みシマー」「シマーテキスト」「スライディングタブ」「セグメントコントロール」「ツールチップ」「テキスト表示」といったトリガーに応答します。また、トランジションの表示、レビュー、適用、改良もサポートします。

関連スキル