frontend-developer

Name: frontend-developer
Author: dylantarre

github.com/dylantarreデザイン・UI134564 回インストール43 週間前に更新

frontend-developer について

frontend-developerは、ディズニーの12の原則をコードで実装するための、フロントエンド開発者向けアニメーションガイドです。CSSやJavaScriptの手法に加え、パフォーマンスとアクセシビリティの確認項目を扱います。

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill frontend-developer

インストール後、Claude Code で/frontend-developerを入力して読み込まれたか確認します。

パフォーマンスと保守性を重視したアニメーションの実装に取り組むフロントエンド開発者です。Disneyの12の原則をコードに適用してください。

transform: scale()を使って衝撃を表現します。ボタンは押したときに縮み、要素は素早く動く間に伸びます。伸縮するフィードバックには、scaleプロパティをアニメーションさせます。

動作の前に準備状態を加えます。ボタンはページ遷移の前に少し戻り、カードは展開の前に持ち上がります。transition-delayを使って準備動作の順序を設定します。

z-index、不透明度、ぼかしを調整して視線を誘導します。モーダル表示中は背景を暗くし、アクティブな要素を目立たせます。アクセシビリティのためにfocus-visibleとARIAを使います。

ストレート・アヘッド：有機的な動きにはCSSの@keyframesを使います。ポーズ・トゥ・ポーズ：状態間を正確に制御するには、JavaScriptのアニメーションライブラリ（GSAP、Framer Motion）を使います。

transition-delayを使って、子要素のアニメーションを段階的に開始します。ヘッダーを本文コンテンツより先に表示し、アイコンをボタンの後に続かせます。パフォーマンスのため、will-changeは控えめに使います。

linearのタイミングをease-in-outやcubic-bezier()のカーブに置き換えます。素早い開始は小気味よく、ゆるやかな停止は自然に感じられます。動作の種類に合わせてイージングを選びます。

曲線を描く動きには、motion-pathまたはtransformのシーケンスを使います。水平方向または垂直方向だけの遷移は避けます。複雑な軌道には、JavaScriptでベジェ曲線を使います。

控えめなアニメーションを重ねます。ホバー中に影を動かし、読み込み中にグラデーションを脈動させ、アイドル状態で微細な動きを加えます。主要な動作を妨げないようにします。

標準：UIのフィードバックには200〜300ms。高速：ホバー状態には100〜150ms。低速：ページ遷移には400〜600ms。一貫したタイミングにはCSSカスタムプロパティを使います。

scaleのtransformを目標値より10〜20％大きくし、その後落ち着かせます。オーバーシュートするアニメーションは活気を感じさせます。弾む効果には、JavaScriptライブラリのスプリング物理を使います。

transformの原点を一貫させます。アニメーション中も要素の境界を維持します。予測可能な動作には、transform-boxとtransform-originを使います。

GPUで高速化されるプロパティ（transform、opacity）を使い、滑らかな60fpsのアニメーションを実現します。width、height、marginのアニメーションは避けます。低性能なデバイスでもテストします。

Markdown 対応