スキル

Emil のスキルで UI アニメーションを点検する

デザイナーとエンジニアが、既存 UI のアニメーションとデザイン助言を先に点検する向け。RN/Expo では動きが JS thread を離れているかも照合する。

公式ソース · emilkowalski/skills

インストール

npx skills@latest add emilkowalski/skills

向いている人

デザイナーとエンジニア向けで、目標は build better user interfaces。公式リポジトリは https://github.com/emilkowalski/skills For designers and engineers to help them build better user interfaces と書く。スキルは著者の Vercel と Linear での長年の経験に基づく。主スキルは mostly animation, but also some design advice。同じ基準が React Native と Expo にも向く。汎用の製品デザイン講座ではなく、コンポーネント庫をすでに選んだことにもならない。

既存 UI のアニメーション/モーション点検を先にする向きであり、いきなり本番ページを書き直す向きではない。仕事が UI の動きと無関係なら、この材料は合わない。必須のエージェント製品名は材料にない。

3分で最初の試行を終える

公式のインストールコマンドは:

npx skills@latest add emilkowalski/skills

前提条件:npx を実行でき、今のディレクトリへスキル設定を書いてよいこと。Node 版や他のインストーラは材料にない。書き込み可を確認してから実行する。副作用はこの一式が入ること。導入後、スキルを呼び出せるか先に確認し、すぐ業務コードを直さない。

低リスク作業:そのスキルを使えるエージェントで、閲覧権限のある既存 UI またはコンポーネントを開き、アニメーションとデザイン助言だけ求め、変更を提出しないと明示する。成功の合図は「主スキルはアニメ主体、デザイン助言も少し」に沿った照合可能な意見で、動きが重すぎるか、デザイン制約が欠けているかなど。ページ全体の作り直しはさせない。材料にないシークレットを求められたら即停止。

主スキルのコマンド名は材料にない。最初の試行は導入後の既定入口でよい。スキル識別子を捏造しない。

使用例

事例1:Web UI のアニメーションとデザインを点検。対応は The main skill that consists of mostly animation, but also some design advice。ページやコンポーネントが既にあり、先に助言だけ欲しい人向け。点検表もフレームワーク制限も材料にない。確認できるのは重点がアニメで、デザイン助言が少しあること。助言を見てからコードを変えるか決める。

事例2:同じ基準を React Native と Expo に使う。対応は The same bar, for React Native and Expo: gestures, sheets, haptics, screen transitions, and keeping motion off the JS thread。RN/Expo プロジェクトに既にジェスチャ、sheet、触覚、遷移がある人向け。具体 API は材料にない。確認できるのは動きが JS thread を離れるべきこと。最初は照合だけ。この段でネイティブ依存を変えない。

利用の境界

経験は Vercel と Linear から来るが、それらの公式仕様ではなく、任意のデザインシステムに成り立つ保証もない。2本目のインストールコマンドも、スキル別の独立導入名もない。RN/Expo の条は gestures、sheets、haptics、screen transitions と motion を JS thread から出すことだけ。汎用ネイティブ開発ガイドに広げない。特定クライアントの独占も推論しない。書いていないスキル名は補わない。