emilkowalski-skill

emilkowalski-skill

カタログのスタブ — 完全なパッケージ：emilkowalski/skills

判断ツリー

1. 完全版のスキルはすでにインストールされていますか？ このパッケージは15個のスキル（emil-design-eng、animate、animate-expo、animation-performance、animation-vocabulary、apple-design、ask-sonner、break-ui、find-animation-opportunities、improve-animations、mobile-native、pick-ui-library、prototype、review-animations、write-swift）をインストールします。最初のスキルを確認します。

   • グローバル：f=~/.agents/skills/emil-design-eng/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/emil-design-eng/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルはemil-design-engとしてインストール済みです。これを呼び出して続行します
   • pointer → ステップ2に進みます

2. 適用範囲を特定してから、インストールします：

   [ -e ~/.agents/skills/emilkowalski-skill ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add emilkowalski/skills --skill emil-design-eng animate animate-expo animation-performance animation-vocabulary apple-design ask-sonner break-ui find-animation-opportunities improve-animations mobile-native pick-ui-library prototype review-animations write-swift -g -y
   

   プロジェクト：

   npx skills add emilkowalski/skills --skill emil-design-eng animate animate-expo animation-performance animation-vocabulary apple-design ask-sonner break-ui find-animation-opportunities improve-animations mobile-native pick-ui-library prototype review-animations write-swift -y
   

   Claude Code： 会話から離れずにコマンドを実行するには、チャットメッセージの先頭に!を付けて送信します。

注意事項

• ライセンス： MIT
• 名前の競合： animateはanimate-skill（そのインストール版またはカタログのポインター）も書き込みます。両方をインストールすると、先にインストールしたものが上書きされます。
• 名前の競合： prototypeはdesign-for-ai（そのインストール版またはカタログのポインター）も書き込みます。両方をインストールすると、先にインストールしたものが上書きされます。

インストール後の呼び出し

• emil-design-eng — 「Emil Kowalski」、「デザインエンジニアリング」、「アニメーションの判断」、「イージングカーブ」
• animate — アニメーションをゼロから作成し、適切な順序で判断します
• review-animations — 高い品質基準に照らしてアニメーションコードをレビューします
• improve-animations / find-animation-opportunities — 正確な値を指定して動きを提案する読み取り専用の監査です
• animation-performance — Webアニメーションをフレーム予算内に収めます
• animation-vocabulary — 漠然としたエフェクトの説明を正確な用語に置き換えます
• apple-design — Appleスタイルの、滑らかで物理的かつジェスチャー主導のWebアニメーションです
• animate-expo — React NativeとExpoのアニメーションです
• mobile-native — スマートフォンでWebアプリをネイティブアプリのように感じさせます
• break-ui — 最悪のケースのデータでUIに負荷をかけます
• prototype — ビジュアルピッカーから選べる、実質的に異なる複数のバージョンを作成します
• pick-ui-library — 一般的なフロントエンドタスク向けに、明確な方針でライブラリを選びます
• ask-sonner — Sonnerのトーストライブラリです
• write-swift — モダンなSwift、並行処理、テストです

機能

Emil Kowalskiによるデザインエンジニアリングの包括的な手法です。アニメーションの判断フレームワーク（4つのステップ：アニメーションさせるべきか？目的は何か？イージングは？持続時間は？）、必須のカスタムCSSイージングカーブ、コンポーネントのインタラクション原則（:active時のボタンの拡大、scale(0.95)の開始アニメーション、起点を考慮した変形）、中断可能性を考慮したキーフレームよりCSSトランジションを優先する手法、厳格なタイポグラフィのルール（65chの上限、tabular-nums、...ではなく…を使用）を扱います。さらに、既存のモーションコードのレビューや監査のためのスキル、パフォーマンスのガイダンス、モバイルおよびネイティブな操作感を実現する手法も含まれます。Sonner、Vaul、animations.devの開発者が使用しています。コアスキルのみを利用する場合は、上記の完全版コマンドの代わりにnpx skills add emilkowalski/skills --skill emil-design-engを実行してください。

使用しない場合

• バックエンド、API、データ関連の作業
• モーションがすでに適切に扱われている場合