·cards-containers
*

cards-containers

カード、パネル、タイル、またはコンテナ要素をアニメーション化して奥行きとインタラクティブ性を作成するときに使用します。

38インストール·2トレンド·@dylantarre

インストール

$npx skills add https://github.com/dylantarre/animation-principles --skill cards-containers

cards-containers のインストール方法

コマンドラインで cards-containers AI スキルを開発環境にすばやくインストール

  1. ターミナルを開く: ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます
  2. インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/dylantarre/animation-principles --skill cards-containers
  3. インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: dylantarre/animation-principles。

Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.

Squash & Stretch Cards can subtly compress on drag-start and stretch when released. Keep it minimal: 2-3% scale change maximum.

Anticipation Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.

カード、パネル、タイル、またはコンテナ要素をアニメーション化して奥行きとインタラクティブ性を作成するときに使用します。 ソース: dylantarre/animation-principles。

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/dylantarre/animation-principles --skill cards-containers
カテゴリ
*クリエイティブ
認証済み
初回登録
2026-03-05
更新日
2026-03-10

Browse more skills from dylantarre/animation-principles

クイックアンサー

cards-containers とは?

カード、パネル、タイル、またはコンテナ要素をアニメーション化して奥行きとインタラクティブ性を作成するときに使用します。 ソース: dylantarre/animation-principles。

cards-containers のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/dylantarre/animation-principles --skill cards-containers インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/dylantarre/animation-principles