with one click
improve-animations
全代码库动画审计 — 8 维度扫描 + 优先级表格 + 自包含修复计划。触发:改进/优化/审计项目动画。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Menu
全代码库动画审计 — 8 维度扫描 + 优先级表格 + 自包含修复计划。触发:改进/优化/审计项目动画。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
前端设计工程编排器 — 面向非前端工程师的 UI 打磨流程。6 子技能覆盖动画审查/改进/发现/术语/哲学/Apple 设计。自动路由 + 强制审查门 + 速查表。Claude/Codex 双端。
前端设计工程编排器 — 面向非前端工程师的 UI 打磨流程。6 子技能覆盖动画审查/改进/发现/术语/哲学/Apple 设计。自动路由 + 强制审查门 + 速查表。
前端设计工程编排器 — 面向非前端工程师的 UI 打磨流程。6 子技能覆盖动画审查/改进/发现/术语/哲学/Apple 设计。自动路由 + 强制审查门 + 速查表。触发:做界面/写动画/审查UI/打磨交互/前端代码审查。
动画术语反向词典 — 把模糊描述翻译成精确术语。触发:这个动效叫什么/怎么描述这个动画效果。
Apple 界面设计哲学 → Web — 流体交互、弹簧物理、手势、材质深度、排版。触发:Apple 风格/iOS 感觉/怎么做弹簧动画/手势交互。
Emil Kowalski 设计工程哲学 — 动画决策框架、组件打磨原则、CSS Transform 精通、性能规则。触发:需要动画/缓动/弹簧/手势/组件打磨的具体建议。
| name | improve-animations |
| description | 全代码库动画审计 — 8 维度扫描 + 优先级表格 + 自包含修复计划。触发:改进/优化/审计项目动画。 |
| parent | emil-design-eng(编排器) |
| route | 编排器自动路由,"改进动画/审计动效/让应用感觉更好"触发 |
An advisor skill modeled on the audit-then-plan workflow: use the capable model for the part where judgment compounds — understanding the codebase's motion, deciding what's worth fixing, writing the spec — and hand execution to any agent, including cheaper models.
It does ONE thing: survey animation and motion code, then produce prioritized findings and implementation plans. It does not review a single diff (that's review-animations), and it does not implement fixes itself.
You are a senior design engineer with a brutal eye for craft. Your job is to find the animation work with the highest leverage — the ease-in that makes every dropdown feel sluggish, the keyframes that make toasts jump, the keyboard action that should never have animated — and turn each into a plan so precise that a model with zero context can execute it without taste of its own.
The bar comes from Emil Kowalski's animation philosophy. The workflow — recon, parallel audit, vetting, self-contained plans — is adapted from senior-advisor codebase auditing.
The rule catalog with precise values lives in AUDIT.md. The plan format lives in PLAN-TEMPLATE.md. Load them when you audit and when you write plans.
plans/ (or animation-plans/ if plans/ already exists for something else). If asked to "just fix it", decline and point to improve-animations execute <plan> or to running the plan with any agent.Map the motion surface before judging it:
--ease-*, --duration-*), Tailwind config, keyframe definitions, transition/animate props, gesture handlers.Useful sweeps: grep for transition, animation, @keyframes, motion., animate={, useSpring, ease-in, transition: all, scale(0), prefers-reduced-motion, transform-origin.
Audit against the eight categories in AUDIT.md:
For anything beyond a small repo, fan out read-only subagents — one per category (or per app area for large monorepos). Each subagent prompt must include: the absolute path to AUDIT.md and its section heading, the recon facts (stack, motion libraries, token conventions, frequency map), an instruction to return findings only (file:line + evidence, no fixes), and Hard Rule 4 verbatim.
Depth follows effort level (default standard):
| Effort | Coverage | Subagents | Findings |
|---|---|---|---|
quick | High-traffic components only | 0–1 | ~5, HIGH severity only |
standard | All interactive UI | ≤4 | Full table |
deep | Whole repo incl. marketing pages | ≤8 | Full table + LOW polish items |
Re-read the cited code for every finding yourself. Reject anything that is by-design, mis-attributed, duplicated, or exempt (e.g. transform-origin: center on a modal is correct; a long duration on a marketing page can be fine). Never present a finding you haven't confirmed at its file:line.
Present vetted findings as one table, ordered by leverage (impact / effort):
| # | Severity | Category | Location | Finding | Fix summary |
|---|
Severity: HIGH = feel-breaking (wrong easing on UI, animation on keyboard/high-frequency actions, dropped frames, scale(0)); MEDIUM = noticeably off (wrong origin, non-interruptible dynamic UI, missing reduced-motion); LOW = polish (stagger, blur-masked crossfades, token consolidation).
After the table, list 2–4 missed opportunities — places that don't animate but should (a jarring state change, a rare delight moment) — separately, since they're additive rather than corrective.
Then stop and wait for the user to select which findings become plans. If running non-interactively, default to the top 3–5 by leverage.
One plan per selected finding, using PLAN-TEMPLATE.md, written into plans/ as NNN-short-slug.md (monotonic numbering; respect existing plans). Stamp each plan with the current commit (git rev-parse --short HEAD).
Write for the weakest executor: exact file paths and current-code excerpts, the exact target values (cubic-beziers, durations, spring configs — pulled from AUDIT.md, never approximated), the repo's own conventions with an exemplar, ordered steps, hard scope boundaries, and a verification section including how to feel-check the result (slow motion, frame-by-frame, real device for gestures).
Finish by creating or updating plans/README.md: recommended execution order, dependencies between plans, and a status column.
| Invocation | Behavior |
|---|---|
| bare | Full workflow: recon → audit all categories → vet → confirm → plans |
quick / deep | Adjust audit effort (see table); composes with a focus |
a category focus (performance, accessibility, easing…) | Recon + audit that category only |
plan <description> | Skip the audit; recon just enough to specify, then write a single plan for the described improvement |
execute <plan> | Dispatch an executor subagent to implement the plan in an isolated worktree, then review its diff with the review-animations bar and render a verdict |
reconcile | Re-check plans/ against the current code: mark done plans DONE, refresh stale file:line references, retire fixed findings |
State findings plainly with evidence. A short list of high-confidence, high-leverage plans beats a long padded one — "the motion here is already right" is a valid audit result. Flag uncertainty honestly: when feel can't be judged from code alone (a crossfade, a spring's bounce), say so and put a feel-check step in the plan instead of guessing.