emil-design-eng (emilkowalski/skills)

レビュー

専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。frontend-design テストと同じ3つのブリーフ（Tidepool のランディングページ、水質ダッシュボード、クライミングジムのホームページのリデザイン）を、単一の自己完結型 HTML ファイルとして作成します。プロンプトはアニメーションにもスキルにも言及しません。スキルあり群にはスキルがインストールされているだけです。

3群の比較

Codex CLI で 18 実行を計測し、LLM 判定なしのルールベースのチェックで採点。合計 26.2 / 30、判定は 推奨。

判定：推奨（26.2 / 30）。 出典：emilkowalski/skills、skills/emil-design-eng、コミット a81dbca に固定。インストール：npx skills@latest add emilkowalski/skills --skill emil-design-eng。ライセンス： MIT（リポジトリの LICENSE）。

概要

emilkowalski/skills の emil-design-eng スキル：UI の磨き上げに関する Emil Kowalski のデザインエンジニアリングルールで、1 つの SKILL.md に約 4,000 語。アニメーションを付けるべきかの判断、デフォルトではなくカスタムの ease-out カーブ、150〜300 ms の継続時間、transform と opacity のみをアニメーションすること、押下フィードバック（:active での scale(0.97)）、scale(0) からのアニメーションをしないこと、スタッガー、(hover: hover) によるホバーのゲート、reduced motion、ヒットターゲットのような見えない細部までカバーします。スクリプトはありません。

テスト方法

専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。

frontend-design テストと同じ 3 つのブリーフ（Tidepool のランディングページ、水質ダッシュボード、クライミングジムのホームページのリデザイン）を、単一の自己完結 HTML ファイルとして書きます。プロンプトはアニメーションにもスキルにも言及しません。スキル群は単にスキルがインストールされているだけです。

1. ブリーフからの新規ランディングページ — Tidepool（サブスクリプション販売の小ロット海藻スナックブランド。3 フレーバー、1 箱 $14、毎月発送）の単一ページのランディングサイトを作成してください。インライン CSS と、必要な場合のみ最小限の JS を使った、自己完結の index.html を 1 つ書いてください。フレームワークなし、ビルド手順な…
2. データ密度の高いダッシュボード UI — 自治体の水質モニタリングチーム向けのダッシュボードページを作成：6 地点の現在値（pH、濁度、塩素、水温）、各地点の 7 日間トレンド、アラートパネル。インライン CSS/JS とハードコードされた…
3. 既存の味気ないページの作り直し — old.html は Granite Peak Climbing Gym（Boulder, CO）の現在のホームページです。new.html にリデザインしてください。実際のコンテンツ（料金、クラス、営業時間、住所）はすべて残しつつ、このジムにふさわしい見た目にしてください。自己完結の HTML/CSS、フレームワー…

採点はプログラム的（隠しテスト／仕込み問題の検出／制約チェック／該当する場合はレンダリング+OCR）で、実行ごとに 0〜5 点。スコアはどの LLM 判定者も決めていません。このスキルはスクリーンショットでは見えないモーションやインタラクションの細部に関するものなので、スコアは生成された CSS に対して実行するルールベースのチェックリスト（10 チェック：:active の押下フィードバック、カスタム cubic-bezier、ease-in/linear/デフォルト ease を使わない、transition: all を使わない、transform/opacity/colour のみをアニメーション、継続時間 <= 300 ms、reduced motion、スタッガー、scale(0) を使わない、(hover: hover) でゲートされたホバー）で、実行ごとに 0〜5 点です。これはスキル自身のルールと密接に一致するため、「スキルに従ったか」を測るものであり、「ページが良くなったか」ではありません。

結果

第 3 群に与えた一文プロンプト：「デザインエンジニアのように磨き上げる：カスタムイージングカーブ（入場は ease-out、デフォルトや ease-in は使わない）、150〜300 ms の継続時間、transform と opacity のみをアニメーション、:active での scale(0.97) のような押下フィードバック、scale(0) からのアニメーションはしない、入場をスタッガーでずらす、prefers-reduced-motion を尊重し、見えない細部（hover、active、focus の状態、44 px のヒットターゲット）に気を配る。」

平均スコア：スキルなし 3.33 に対しスキルあり 4.75（差 +1.42）。1実行あたりのトークン：133k 対 149k（1.12x）。時間：178s 対 163s。一文プロンプト群：4.5（一文プロンプトに対するスキルの上積み：+0.25。一文プロンプト自身のスキルなしに対する上積み：+1.17）。一文プロンプトのトークンは 1実行あたり 127k なので、スキルは一文プロンプトの 1.17 倍のコストになります。

何が起きたか

• 素の Codex は押下フィードバックやカスタムイージングカーブを書きません：対照群のページは 0/6 で :active の scale ルールや cubic-bezier を持つのに対し、一文群は 6/6、スキルありは 6/6（押下）と 5/6（カーブ）です。スコアは対照群 3.33、一文 4.50、スキル 4.75。
• 一文プロンプトが伝えなかった唯一のルール、@media (hover: hover) によるホバースタイルのゲートは、スキルのページが 5/6、その他のページは 0/12 で従っていました。これが一文に対するスキルの上積みのすべてです（+0.25）。
• すでに良い習慣は全群で共通でした：transition: all を使わない、transform/opacity/colour のみをアニメーション、reduced-motion 対応、scale(0) を使わない。対照群はこれらを 6/6 で正しく行ったため、スキルが加えるのは基本ではなく特定の磨き上げルールです。
• ページを盲検で見ると（デスクトップのスクリーンショット、シャッフル済み）、18 ページすべてが磨かれており、壊れているものはありません。3 群の静的なデザイン品質は見分けがつきません。このスキルが変えるのはスクリーンショットに見えるものではなく、体感できる挙動です。
• コスト：1実行あたり 149k トークン。133k（1.12x）、一文群は 127k に対し、デザイン系スキルの中で測定した中では最も安いオーバーヘッドです。

評価項目スコア

このテストの限界

• モーションルールはページの見た目ではなく CSS テキストからチェックしています。トランジションが存在しても、体感が悪いことはあり得ます。
• チェックリストはスキル自身のルールに由来し、一文プロンプトはそのほとんどを明示するため、一文群は短いプロンプトの上限値です。
• 静的なページのブリーフが 3 つだけ。スキルが多くの言葉を割くインタラクティブなコンポーネント（ドロップダウン、トースト、ドロワー）は要求しませんでした。
• タスクごとに各群 n=2。約 1 点未満の差はノイズです。
• ルールベースの採点はチェックが見られるものだけを測ります。好みや、結果が可能な限り最善かどうかは判断できません。

セキュリティ

security.md を参照。スキャン：CRITICAL 0 / HIGH 0 / MEDIUM 0。判定：実行しても安全（ネットワーク無効のサンドボックス）。クリーンなスキャン結果はスキルの安全性を証明しません。

結論

押下フィードバック、ease-out カーブ、ホバーのゲートを、求めずとも備えたページが欲しいなら、このスキルはほぼトークンコストなしでそれを提供します。同じルールを列挙した一文でも 94% のところまで到達するため、スキルの価値は「ルールを知らなくてもよい」ことにあります。