improve-animations (emilkowalski/skills)
improve-animations：对照组 3.15、一句话提示 4.94、装 skill 4.81（0–5 分，Codex 实测，n=2/任务/组）。结论：推荐，相对不装 skill +1.66。
25.5 / 30
相对不装 skill 的提升：+1.66
推荐：总分 25.5/30 不低于 22，产出质量 4.8 不低于 3.5，提升 +1.66 不低于 +1.0。
前沿
通过使用 Codex 测试。
覆盖 Codex, Claude Code
Codex CLI 0.166（SOTA 档）：18 次评分运行。按我们的分档规则，这档通过同时覆盖 Claude Code；它不代表第二档的结果。
分数
每一维 0 到 5 分，六维相加是满分 30 的总分。每一维都是 5 更好。成本 5 表示又便宜又快。安装 5 表示容易。
- 触发可靠性
- 5.0
- 相对不装的提升
- 3.7
- 产出质量
- 4.8
- 令牌与时间成本
- 4.0
- 安装与可移植性
- 4.0
- 安全
- 4.0
安全审查
安全静态扫描：0 CRITICAL / 2 HIGH / 0 MEDIUM。人工审查：可在断网沙箱中运行。扫描没有命中不等于绝对安全。
安装
npx skills@latest add emilkowalski/skills --skill improve-animations
固定提交: a81dbca07f2217b7103e510c0f13f8d5b017afc9
测试日期: 2026-11-02
我们测了什么
- Audit the motion code — Audit the animations and motion in this project. Give me a prioritized list of what to fix, each with the file and the exact replacement values. Do not change any files.
- Audit two components — Audit only the dropdown and the modal animations in styles.css. What is wrong and what exactly should they become? Do not change any files.
- Top fixes for another person to implement — I'm handing the motion fixes to a colleague who has not seen this project. List the 5 highest-leverage animation fixes with the exact CSS to write for each, so they can implement them without asking me anything. Do not change any files.
优点
- 平均分从不装时的 3.15 提到 4.81（+1.66）。
- 不点名也会被触发：Skill file read in 6/6 treatment runs.
- 装 skill 后绝对质量高：4.81 / 5。
缺点
- 一句话提示得 4.94，装 skill 得 4.81（差 -0.13）。
- 每个任务每组 n=2，差距在 1 分以内属于噪声。
评测
在 Codex CLI（SOTA 档）上跑 3 个任务、对照、一句话提示、装 skill 三组，共 18 次运行，由规则脚本打分（没有 LLM 评委），断网沙箱、每次运行独立临时目录。具体做法见下方英文评测原文。
三组对比
| 组别 | 平均分（0–5） | 每次 token |
|---|---|---|
| 不装 skill | 3.15 | 65k |
| 一句话提示 | 4.94 | 65k |
| 装了 skill | 4.81 | 78k |
Codex CLI 实测，18 次运行，规则脚本打分，没有 LLM 评委。总分 25.5 / 30，结论 推荐。
下面是评测原文，英文。
Verdict: Recommended (25.5 / 30). Source: emilkowalski/skills, skills/improve-animations, pinned at commit a81dbca. Install: npx skills@latest add emilkowalski/skills --skill improve-animations. Licence: MIT (repo LICENSE).
What it is
The improve-animations skill (emilkowalski/skills): a motion-design audit guide: custom ease-out curves instead of ease-in/default, 150-300 ms durations, transform and opacity only, no transition: all, no scale(0) starts, transform-origin at the trigger, reduced-motion support, and no animation on high-frequency actions.
How we tested
Codex CLI 0.166 (gpt-6-astra, low reasoning) on a dedicated Windows test PC, a fresh temporary project and temporary HOME/TMPDIR/caches per run, skill installed (treatment) or absent (control) or absent with the skill's core requirement squeezed into one sentence appended to the prompt (one-liner group), 2 runs per group per task, network off, /tmp writes blocked. The prompts never mention the skill (except the wording noted below).
One small web app (am_app) with 8 planted motion problems. Tasks: audit the whole project, audit only the dropdown and modal, and fix five named problems. Prompts say 'animations and motion' without naming any rule. The one-liner lists the rules and asks for exact replacement values.
- Audit the motion code — Audit the animations and motion in this project. Give me a prioritized list of what to fix, each with the file and the exact replacement values. Do not change any files.
- Audit two components — Audit only the dropdown and the modal animations in styles.css. What is wrong and what exactly should they become? Do not change any files.
- Top fixes for another person to implement — I'm handing the motion fixes to a colleague who has not seen this project. List the 5 highest-leverage animation fixes with the exact CSS to write for each, so they can implement them without asking me anything. Do not change any files.
Scoring is programmatic (hidden tests / planted-issue recall / constraint checks / render+OCR where relevant), 0–5 per run. No LLM judge decided any score.
Results
The one-liner given to the third group: "Audit the motion code like a senior design engineer: flag ease-in and default curves, transition: all, scale(0) starts, layout-property animation, missing reduced-motion, animation on high-frequency actions, wrong transform-origin and slow durations; for each give the exact replacement (custom ease-out cubic-bezier, 150-300 ms, transform/opacity only) so someone else can apply it, and change no source files."
| Task | Control score | One-liner | With skill | Control tokens | One-liner tokens | With-skill tokens | Skill read |
|---|---|---|---|---|---|---|---|
| t1-audit | 3.21 | 4.82 | 4.82 | 65k | 66k | 77k | 2/2 |
| t2-focus | 2.5 | 5.0 | 5.0 | 63k | 64k | 77k | 2/2 |
| t3-five-fixes | 3.75 | 5.0 | 4.62 | 65k | 65k | 78k | 2/2 |
Mean score: 3.15 without vs 4.81 with the skill (delta +1.66). Tokens per run: 65k vs 78k (1.20x); time 48s vs 49s. One-liner group: 4.94 (the skill's gain over the one-liner: -0.13; one-liner's own gain over no skill: +1.79); one-liner tokens 65k per run, so the skill costs 1.19x the one-liner.
What happened
- Control 3.15, skill 4.81, one-liner 4.94 (n=6 each). Without guidance Codex found 3-7 of the 8 planted problems and gave no cubic-bezier or exact easing curve in 5 of 6 runs.
- The skill closes that gap: 5.0 on both focus runs, where control missed the scale(0) modal start in both, and every audit gives exact curves. The one-liner reaches the same result.
- On the five-fixes task the skill was slightly behind the one-liner (4.62 vs 5.0): both treatment runs missed the 700 ms linear card hover, and each missed one other planted problem (scale(0) modal, or transition: all).
- Tokens: skill 78k, one-liner 65k, control 65k (1.2x control). The skill was read in 6/6 treatment runs without being named.
Dimension scores
| Dimension | Score | Why |
|---|---|---|
| 1_output_quality | 4.81 | Mean score 4.81/5 with the skill (programmatic checks, see per-task table). |
| 2_lift_vs_no_skill | 3.66 | +1.66 points vs 3.15 without the skill (n=2 per task; under ~1 point is noise). |
| 3_trigger | 5.0 | Skill file read in 6/6 treatment runs. |
| 4_instructions_portability | 4 | SKILL.md with reference text only. |
| 5_efficiency | 4 | 1.20x tokens (78k vs 65k per run) and 1.03x time (49s vs 48s). |
| 6_safety_hygiene | 4 | Prose only; see security.md. |
Limits of this test
- Recall checks on the text of the audit and regex checks on the changed CSS; nothing was rendered or measured in a browser.
- The one-liner is a close paraphrase of the skill's own checklist, which makes it a strong comparison.
- One fixture; n=2 per cell.
- n = 2 per group per task: differences under about 1 point are noise.
- Rule-based scoring measures what the checks can see; it cannot judge taste or whether a result is the best possible.
Security
See security.md. Scan: 0 CRITICAL / 2 HIGH / 0 MEDIUM. Verdict: safe to run (no-network sandbox). A clean scan does not prove a skill safe.
Bottom line
The skill clearly beats an unprompted audit, mainly by always supplying concrete curves and durations. A single sentence listing the same rules does as well for less, so the gain is over no guidance, not over a good prompt.
记录
Run log for improve-animations: Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run. Columns: task, arm-run, score (0-5), tokens, seconds, checks passed, skill files the agent opened. t1-audit control-1: score 3.21, tokens 65584, secs 50.5, checks 2/3, opened nothing t1-audit control-2: score 3.21, tokens 65586, secs 52.4, checks 2/3, opened nothing t1-audit oneliner-1: score 4.64, tokens 66262, secs 51.5, checks 3/3, opened nothing t1-audit oneliner-2: score 5.0, tokens 66276, secs 69.8, checks 3/3, opened nothing t1-audit treatment-1: score 4.64, tokens 78329, secs 42.8, checks 3/3, opened improve-animations t1-audit treatment-2: score 5.0, tokens 76979, secs 51.1, checks 3/3, opened improve-animations t2-focus control-1: score 2.5, tokens 64157, secs 30.6, checks 2/4, opened nothing t2-focus control-2: score 2.5, tokens 63682, secs 30.8, checks 2/4, opened nothing t2-focus oneliner-1: score 5.0, tokens 64128, secs 32.3, checks 4/4, opened nothing
18 次运行、3 个产物
样例产物
前沿 · 装了 skill：final message（t1-audit，第 1 次，Codex）
Audited all four project files. **No files changed.** This is a static code audit: `index.html` does not load `app.js`, so the dropdown click handler currently never runs. Other open states have no handlers. All motion fixes below are in [styles.css](C:/Users/<user>/AppData/Local/Temp/asv-improve-an-9e585535/work/styles.css), ordered by priority. | Priority | Severity | Location | Finding | Exact replacement | |---|---|---|---|---| | 1 | HIGH | Line 8, `.palette` | The documented ~100 daily keyboard openings should respond immediately. | Replace its declaration with `transition: none;` | | 2 | HIGH | Line 1, `.dropdown` | `400ms ease-in` delays the initial response and makes opening sluggish. | `transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);` | | 3 | HIGH | Lines 4–5, `.modal` | Scaling from zero over 500ms creates excessive movement. | Use the modal replacement below. | | 4 | HIGH | Line 6, `.accordion` | Animating `height` forces repeated layout over 500ms. | Replace `transition: height 0.5s ease;` with `transition: none;`. Keep both height values. This is the smallest safe fix; a smooth reveal needs additional structure. | | 5 | MEDIUM | Missing reduced-motion rule | Dropdown and modal movement have no preference override. | Append the reduced-motion block below, after the other rules. | | 6 | MEDIUM | Line 3, `.btn` | `transition: all` can animate unintended properties. No button state currently changes a visual property. | Replace with `.btn { transition: none; }` | | 7 | MEDIUM | Line 9, `.popover` | Center scaling contradicts its documented connection to the top-bar trigger. | Replace `transform-origin: center;` with `transform-origin: top left;` **if positioned below and left-aligned with the trigger**. Placement is absent from this prototype; use `top right` for right alignment or `top center` for centered alignment. | | 8 | LOW | Lines 10–11, `.card` | A 700ms linear shadow transition makes routine hover feedback linger; hover is also ungated on touch devices. | Use the card replacement below. | Replace lines 4–5 with: ```css .modal { opacity: 0; transform: scale(0.96); transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1), opacity 250ms cubic-bezier(0.23, 1, 0.32, 1); } .modal.open { opacity: 1; transform: scale(1); } ``` Keep the modal’s centered transform origin; it is appropriate here. Replace lines 10–11 with: ```css .card { transition: none; } @media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .2); } } ``` This preserves hover feedback while removing repeated shadow painting during an animation. Append this reduced-motion override: ```css @media (prefers-reduced-motion: reduce) { .dropdown, .dropdown.open, .modal, .modal.open { transform: none; transition: opacity 200ms ease; } .popover { transition: opacity 200ms ease; } } ``` One grounded optional addition: give the Menu button press feedback with `.btn:active { transform: scale(0.97); }` and `.btn { transition: transform 160ms ease-out; }`. If adopted, also add `.btn:active { transform: none; }` in [... excerpt: first 3200 of 3496 characters]