animate (emilkowalski/skills)

Name: animate (emilkowalski/skills) review
Item: animate (emilkowalski/skills)
Rating: 22
Author: Agent Skills

目的、対象プロパティ、カーブ、時間、中断、終了の順に決めながら、アニメーションを一から実装します。

animate：Codex が生成する UI アニメーションをデザインエンジニアのモーションルールに沿わせます（対照群 3.7、スキルあり 4.4、一文プロンプト 5.0）。トークンは 1.7 倍ですが、同じルールの一文プロンプトの方がより良く、より安価です。

状況次第安全

Codex CLI · gpt-6-astra

22.0 / 30

スキルなしに対するリフト：+0.64 · 状況次第 · 18 実行

状況次第：リフト +0.64 が +1.0 未満。推奨には合計 22/30、出力品質 3.5、リフト +1.0 が必要です。

SOTA

合格

Codex でテスト済み。

カバー対象 Codex, Claude Code

Codex CLI 0.166（SOTA ティア）：採点対象 18 実行。当ティアのルールでは、ここでの合格は Claude Code もカバーします。第2ティアについては何も述べません。

スコア

各ディメンションは 0〜5 点で、6 つの合計が 30 点満点の合計スコアになります。すべてのディメンションで 5 が最良です。コスト 5 は低コストで高速、インストール 5 は簡単であることを意味します。

トリガーの信頼性: 5.0
スキルなしに対するリフト: 2.6
出力品質: 4.4
トークンと時間のコスト: 2.0
インストールと移植性: 4.0
安全性: 4.0

セキュリティレビュー

安全

静的スキャン：CRITICAL 0 / HIGH 0 / MEDIUM 0。手動レビュー：ネットワーク無効のサンドボックスで実行しても安全（指摘なし）。クリーンなスキャン結果はスキルの安全性を証明しません。

インストール

npx skills@latest add emilkowalski/skills --skill animate

ソース

固定コミット: a81dbca07f2217b7103e510c0f13f8d5b017afc9

テスト済み: 2026-11-02

テスト内容

アニメーション付きドロップダウンメニュー — menu.html を作成してください：5 項目のドロップダウンメニューを開くボタンで、開閉アニメーションを付けます。単一の自己完結 HTML ファイルを書いてください（インライン CSS と JS、ライブラリなし）。
アニメーション付きモーダルダイアログ — modal.html を作成してください：背景が暗くなるモーダルダイアログを開くボタンで、開閉アニメーションを付けます。単一の自己完結 HTML ファイルを書いてください（インライン CSS と JS、ライブラリなし）。
トースト通知 — toasts.html を作成してください：それぞれトースト通知を表示する 3 つのボタンで、トーストは積み重なり、自動的に消えます。出入りのアニメーションを付けます。単一の自己完結 HTML ファイルを書いてください（インライン CSS と JS、ライブラリなし）。

長所

スキルなしと比べ平均スコアを 3.71 から 4.36 に引き上げ（+0.64）。
スキルは名前を出さずとも採用されました：スキルあり群 6/6 実行でスキルファイルが読み込まれました。

短所

一文プロンプトは 5.0、スキルありは 4.36（-0.64）。
スキルなしの 1.68 倍のトークンを消費。
タスク・群ごとに n=2。1 ポイント未満の差はノイズです。

レビュー

専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。構築タスクは 3 つで、それぞれインライン CSS と JS を含む単一の自己完結 HTML ファイルです：ドロップダウンメニュー、背景が暗くなるモーダル、積み重なるトーストの 3 つで、いずれも開閉または出入りのアニメーションを伴います。プロンプトはモーションルールに言及しません。一文プロンプト群はルールを一文で列挙します。

3群の比較

群	平均スコア（0〜5）	1実行あたりのトークン
スキルなし	3.71	78k
一文プロンプト	5.0	105k
スキルあり	4.36	132k

Codex CLI で 18 実行を計測し、LLM 判定なしのルールベースのチェックで採点。合計 22.0 / 30、判定は 状況次第。

判定：状況次第（22.0 / 30）。 出典：emilkowalski/skills、skills/animate、コミット a81dbca 時点。インストール：npx skills@latest add emilkowalski/skills --skill animate。ライセンス： MIT（リポジトリの LICENSE）。

概要

animate スキル（emilkowalski/skills）：UI アニメーションを構築するためのモーションのルールです。目的がある場合のみアニメーションし、カスタムの ease-out cubic-bezier（ease-in やデフォルトは使わない）、150〜300 ms、transform と opacity のみ、scale(0.97) の押下フィードバック、scale(0) からは開始しない、入場のスタガー、中断可能なトランジション、prefers-reduced-motion、hover は (hover: hover) で制御、という内容です。

テスト方法

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

ビルドタスクは 3 つ。いずれもインライン CSS と JS を備えた自己完結の HTML ファイル 1 つを作るもので、ドロップダウンメニュー、薄暗い背景付きモーダル、積み重なるトースト通知の 3 種です。いずれも開閉または入退場のアニメーションを伴います。プロンプトはモーションのルールに言及しません。一文プロンプト群にはルールを一文で列挙します。

アニメーション付きドロップダウンメニュー — menu.html を作成してください：5 つの項目を持つドロップダウンメニューを開閉アニメーション付きで開くボタン。自己完結の HTML ファイル 1 つで書いてください（インライン CSS と JS、ライブラリなし）。
アニメーション付きモーダルダイアログ — modal.html を作成してください：薄暗い背景付きのモーダルダイアログを開閉アニメーション付きで開くボタン。自己完結の HTML ファイル 1 つで書いてください（インライン CSS と JS、ライブラリなし）。
トースト通知 — toasts.html を作成してください：それぞれトースト通知を表示する 3 つのボタン。トーストは積み重なり、自動で消え、入退場アニメーション付き。自己完結の HTML ファイル 1 つで書いてください（インライン CSS と JS、ライブラリなし）。

採点はプログラム的（隠しテスト／仕込み問題の検出／制約チェック／該当する場合はレンダリング+OCR）で、実行ごとに 0〜5 点。スコアはどの LLM 判定者も決めていません。

結果

第3群に与えた一文プロンプト："デザインエンジニアのようにアニメーションさせる：目的があるものだけをアニメーションし、カスタムの ease-out cubic-bezier（ease-in やデフォルトは使わない）、150〜300 ms、transform と opacity のみ、scale(0.97) の押下フィードバック、scale(0) からは開始しない、入場のスタガー、中断可能なトランジション、prefers-reduced-motion を尊重し、hover は (hover: hover) で制御する。"

タスク	対照群スコア	一文プロンプト	スキルあり	対照群トークン	一文プロンプトトークン	スキルありトークン	スキル読込
t1-dropdown	3.5	5.0	4.14	81k	100k	163k	2/2
t2-modal	3.5	5.0	4.57	61k	100k	110k	2/2
t3-toasts	4.14	5.0	4.36	93k	114k	121k	2/2

平均スコア：スキルなし 3.71 対スキルあり 4.36（差分 +0.64）。1 実行あたりのトークン：78k 対 132k（1.68 倍）、時間 82 秒対 81 秒。一文プロンプト群：5.0（一文プロンプトに対するスキルの上乗せ：-0.64、スキルなしに対する一文プロンプト自身の上乗せ：+1.29）。一文プロンプトのトークンは 1 実行あたり 105k で、スキルのコストは一文プロンプトの 1.25 倍です。

何が起きたか

対照群 3.71、スキルあり 4.36、一文プロンプト 5.0（各 n=6）。ルールベースのモーションチェックが、10 個のルールのうちページがいくつ守っているかを数えます。対照群は 10 個中 6〜8 個、スキルありは 8〜9 個、一文プロンプトは 6 実行すべてで全チェックを満たしました。
対照群が最もよく落としたルール：押下フィードバック（:active のスケール）が 6 実行中 3 実行、加えて一部の実行で入場のスタガーと非デフォルトのイージング。スキルありでも押下フィードバックを 2 実行で落とし、スタガー入場やイージングも数実行で落としました。トーストのタスクではスコアが 4.14 と 4.57 で、対照群の 4.14 に対してです。
トークン：1 実行あたりスキルあり 132k、一文プロンプト 105k、対照群 78k（対照群の 1.7 倍、一文プロンプトの 1.3 倍）。スキルはスキルあり群 6/6 実行で読み込まれました。コマンド数も多く（1 実行あたり 9.3 個対 4.7 個）なります。
スキルあり群の実行では 1 実行あたり約 3 個の新規ファイル（作業フォルダ内のスキルのコピー）が追加されます。

次元別スコア

次元	スコア	理由
1_output_quality	4.36	スキルありの平均スコア 4.36/5（プログラム的チェック。タスク別の表を参照）。
2_lift_vs_no_skill	2.64	スキルなしの 3.71 に対して +0.64 ポイント（タスクごとに n=2。約 1 ポイント未満はノイズ）。
3_trigger	5.0	スキルあり群 6/6 実行でスキルファイルが読み込まれました。
4_instructions_portability	4	SKILL.md のルールとリファレンステキスト。
5_efficiency	2	トークン 1.68 倍（1 実行あたり 132k 対 78k）、時間 0.99 倍（81 秒対 82 秒）。
6_safety_hygiene	4	散文のみ。security.md を参照。

このテストの限界

HTML ファイル 1 つのコードテキストに対するルールベースのチェック。アニメーションはブラウザでレンダリングも時間計測もしていないため、滑らかさと視覚品質は評価していません。
一文プロンプトはスキル自身のチェックリストに近い言い換えで、チェックも同じルールリストを反映しています。
セルごとに n=2。
タスク・群ごとに n=2。1 ポイント未満の差はノイズです。
ルールベースの採点はチェックで見えるものだけを測ります。センスや、その結果が可能な限り最良かどうかは判定できません。

セキュリティ

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

まとめ

このスキルは、何もガイドがない場合に比べて守られるモーションのルールを改善します。ただし、同じルールを一文にしただけでより少ないトークンで満点に達するため、その恩恵は素のプロンプトに対するものだけです。

トランスクリプト

実行ログ：animate (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
列：タスク、群-回、スコア（0-5）、トークン、秒、合格したチェック、エージェントが開いたスキルファイル。

t1-dropdown control-1: スコア 3.71, トークン 52757, 秒 64.6, チェック 1/2, 開いたファイルなし
t1-dropdown control-2: スコア 3.29, トークン 109744, 秒 78.3, チェック 1/2, 開いたファイルなし
t1-dropdown oneliner-1: スコア 5.0, トークン 90139, 秒 90.1, チェック 2/2, 開いたファイルなし
t1-dropdown oneliner-2: スコア 5.0, トークン 110798, 秒 84.6, チェック 2/2, 開いたファイルなし
t1-dropdown treatment-1: スコア 4.14, トークン 162460, 秒 70.2, チェック 2/2, 開いたファイル animate
t1-dropdown treatment-2: スコア 4.14, トークン 165193, 秒 85.1, チェック 2/2, 開いたファイル animate
t2-modal control-1: スコア 3.71, トークン 69259, 秒 69.5, チェック 1/2, 開いたファイルなし
t2-modal control-2: スコア 3.29, トークン 52805, 秒 73.9, チェック 1/2, 開いたファイルなし
t2-modal oneliner-1: スコア 5.0, トークン 110675, 秒 103.1, チェック 2/2, 開いたファイルなし

18 実行、3 成果物

サンプル出力

SOTA · With the skill: menu.html (t1-dropdown, run 1, Codex)

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Workspace menu</title> <style> :root { font-family: system-ui, sans-serif; color: #252c39; background: #f4f5f7; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); } * { box-sizing: border-box; } body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px; } main { width: min(100%, 400px); min-height: 440px; } .eyebrow { color: #687183; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } h1 { margin: 12px 0 8px; font-size: 30px; letter-spacing: -.04em; } .description { margin: 0 0 28px; color: #687183; font-size: 14px; line-height: 1.6; } .dropdown { position: relative; width: min(100%, 280px); } button { font: inherit; cursor: pointer; } .trigger { display: flex; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid #303a4e; border-radius: 12px; background: #293448; color: white; padding: 14px 18px; font-size: 14px; font-weight: 600; box-shadow: 0 3px 5px #20293b15; } .chevron { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); } [aria-expanded="true"] .chevron { transform: rotate(180deg); } .menu { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; padding: 6px; border: 1px solid #e1e4eb; border-radius: 14px; background: white; box-shadow: 0 16px 36px -12px #27324a30, 0 3px 8px #27324a08; opacity: 0; transform: scale(.95); transform-origin: top left; pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .dropdown.open .menu { opacity: 1; transform: scale(1); pointer-events: auto; } .item { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; background: transparent; color: #394256; padding: 12px; text-align: left; font-size: 14px; } .icon { width: 20px; text-align: center; color: #738098; font-size: 18px; line-height: 1; } .item:last-child { margin-top: 5px; border-top: 1px solid #edf0f5; border-radius: 0 0 8px 8px; } button:focus-visible { outline: 2px solid #657cf0; outline-offset: 3px; } .item:focus-visible { outline-offset: -2px; background: #f0f3fa; } @media (hover: hover) and (pointer: fine) { .trigger:hover { background: #36435b; } .item:hover { background: #f0f3fa; } } .dropdown.instant .menu, .dropdown.instant .chevron { transition: none; } @media (prefers-reduced-motion: reduce) { .menu, .dropdown.open .menu { transform: none; } .chevron { transition: none; } } .status { margin-top: 300px; font-size: 13px; color: #687183; min-height: 20px; } </style> </head> <body> <main> <div class="eyebrow">Your workspace</div> <h1>A little room for everything.</h1> <p class="description">Your everyday essentials, one click away.</p> <div class="dropdown" id="dropdown"> <button class="trigger" id="trigger" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="menu"> Workspace <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-wid [... excerpt: first 3200 of 7249 characters]

Pro を見る