emil-design-eng目的、用途、および情報源

このスキルが何をするか

このスキルには、UIの洗練度、コンポーネントデザイン、アニメーションの決定、そしてソフトウェアを素晴らしいものにする目に見えない細部に関するエミル・コワルスキーの哲学が凝縮されています。

上流ワークフローの仕組み

Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)

要件とセットアップ

このファイルから要件定義の短い記述が選択されませんでした。これは、スキルに依存関係がないという意味ではありません。リポジトリの設定手順と参照ファイルを確認してください。

制限事項と品質チェック

まずは安全なトライアルから始めましょう

1. サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
2. エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
3. 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
4. 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。

スキルフォーマットとディレクトリの仕様 ↗

詳細は出典元をご覧ください。

• 設計エンジニアリング
• 味覚は訓練によって身につくものであり、生まれつきのものではない。
• 目に見えない詳細が積み重なる
• 美しさは影響力
• レビュー形式（必須）
• アニメーション決定フレームワーク
• 1これはそもそもアニメーションさせるべきでしょうか？
• 2目的は何ですか？
• 3どのような緩和方法を用いるべきか？
• 4どのくらいの速さであるべきでしょうか？
• 知覚されたパフォーマンス
• スプリングアニメーション
• バネを使うべき時
• バネを利用したマウス操作
• スプリング構成
• 中断可能性の利点
• ボタンは反応が良いと感じられる必要がある
• スケールからアニメーションを作成しない(0）
• ポップオーバーの原産地を意識しよう
• ツールチップ: 後続のホバー時の遅延をスキップします
• 中断可能なUIには、キーフレームの上にCSSトランジションを使用する。
• 不完全な遷移を隠すためにぼかしを使用する
• @starting-style を使用して、アニメーションで状態を切り替えます。
• translateY をパーセンテージで表す
• scale() は子要素も拡大縮小します
• 3Dは深度変換を行う
• 変換元
• アニメーションのクリップパス
• 挿入形状
• 色の変化が完璧なタブ

関連スキル

• agent-browservercel-labs/open-agents
• ai-sdkvercel-labs/open-agents
• baseline-uivercel-labs/open-agents
• chat-sdkvercel-labs/open-agents

翻訳と範囲

この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。

この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。

ピン留めされたソース

原文を読む ↗

ソースを取得しました

2026-10-29T09:32:23Z

ソースコミット

cf865e94de7729751c747171785b6ce57e7b178c

ソースSHA-256

9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b