emil-design-eng
専門的なデザインガイダンスで洗練されたUIを構築
多くのインターフェースには、ソフトウェアを「気持ちいい」ものにする見えない細部が欠けています。このスキルは、アニメーション、トランジション、コンポーネントの磨き上げに対し、実証済みのデザインエンジニアリング原則を適用し、ユーザーが愛するインターフェースの構築をサポートします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「emil-design-eng」を使用しています。 このモーダルトランジションコードをレビューしてください: .modal { transition: all 300ms ease-in; transform: scale(0); transform-origin: center; }
期待される結果:
- transition: all を transition: transform 200ms ease-out に変更してGPUアクセラレーションを有効にする
- より自然な表示のため、scale(0) を scale(0.95) と opacity: 0 に置き換える
- ease-in を ease-out または cubic-bezier(0.23, 1, 0.32, 1) のようなカスタムカーブに切り替える
「emil-design-eng」を使用しています。 サイドバーナビゲーションは展開・折りたたみ時にアニメーションさせるべきですか？
期待される結果:
- Animation Decision Frameworkを適用: サイドバーナビゲーションはユーザーが1日に数十回操作します。高さの微妙なトランジションを検討するか、キーボード操作によるトグルの場合はアニメーションを完全にスキップすることを検討してください。
- アニメーションさせる場合: ease-outで最大200msの持続時間を使用し、transformとopacityのみをアニメーションさせ、CSSトランジションでアニメーションが割り込み可能であることを確認してください。
セキュリティ監査
安全All 153 static analyzer findings are false positives. The skill is a single markdown file (SKILL.md) containing design engineering documentation with CSS and JavaScript code examples. The backtick characters flagged as 'external_commands' are markdown code fence delimiters, not shell execution. URLs flagged as 'network' are documentation hyperlinks (animations.dev, easing.dev, easings.co), not runtime network requests. Blocker findings for 'weak cryptographic algorithm' and 'system reconnaissance' have no basis in this file which contains only UI design guidelines. No prompt injection or malicious content detected.
品質スコア
作れるもの
本番環境のUIコンポーネントを磨き上げる
フロントエンド開発者が、適切なイージング、タイミング、割り込み可能性を保証するため、Animation Decision Frameworkに従ってモーダル、ドロワー、ツールチップコンポーネントをレビューします。
デザインシステムのアニメーション標準を確立する
デザインエンジニアが、Core PhilosophyおよびCSS Transform Masteryのセクションを使用し、コンポーネントライブラリ向けの一貫したアニメーション設計トークンを定義します。
アニメーションパフォーマンスの問題を修正する
ページ読み込み中にフレームドロップを経験した開発者が、ハードウェアアクセラレーションとCSS対JavaScriptアニメーションのガイダンスを適用してボトルネックを解消します。
これらのプロンプトを試す
このボタンコンポーネントをレビューして、より洗練された印象にするために、どのようなアニメーションとトランジションの改善ができるか教えてください。
ユーザーが1日100回以上開くコマンドパレットを構築しています。開閉アニメーションを追加すべきでしょうか？Animation Decision Frameworkを適用して判断してください。
ダッシュボードのアニメーションがページ読み込み中にフレームドロップします。Framer Motionのxおよびyショートハンドプロパティを使用しています。ハードウェアアクセラレーションのためにこれを修正する方法を示してください。
Sonnerのようなトーストコンポーネントを構築したいです。トランジション戦略、translateYによるトースト位置指定、モーメンタムベースの dismissal、タブの可視性や積み重ねられたホバー状態などのエッジケースの処理についてガイダンスをお願いします。
ベストプラクティス
- transition: all の代わりに、トランジションで常に正確なCSSプロパティを指定する
- 高速にトリガーされる可能性のあるUI要素には、キーフレームではなくCSSトランジションを使用する
- 実際のデバイスで、通常速度、スローモーション、フレーム単位でアニメーションをテストしてから出荷する
回避
- transition: all を使用すると、高コストなレイアウトとペイントの計算がトリガーされる
- scale(0) からのアニメーションは不自然に見える。現実世界で何かが完全に消えて完全に現れることはない
- UIアニメーションにease-inを使用すると、スローに始まってインターフェースが鈍く感じられる