尧图网站建设 
AI 技能设计系统前端【免费下载链接】skillsSkills for Designers and Engineers.项目地址https://gitcode.com/gh_mirrors/skill2/skills点击查看免费下载本文围绕improve-animations技能中的 PLAN-TEMPLATE.md 展开系统讲解这份自包含动画实现计划模板的每一个字段、写作纪律与底层设计意图。读完本文你将掌握如何把一次动画审计中发现的问题转写成一份连零上下文、零审美的执行模型都能一字不差照做的计划并学会用 AUDIT.md 的权威数值与 SKILL.md 中的工作流约束来保证计划的质量与可执行性。从审计到计划模板存在的意义improve-animations是一个模拟高级动效顾问的只读技能先全面侦察代码库的动画与动效代码产出带优先级的问题清单再为选中的问题编写可直接交给其他 Agent包括能力较弱的廉价模型执行的实现计划。它的工作流在 SKILL.md 中分为四个阶段Recon侦察→ Audit并行审计→ Vet / 确认 → Write plans写计划。PLAN-TEMPLATE.md 就是第四阶段唯一遵守的格式规范它开宗明义地给出了模板存在的理由Every plan written byimprove-animationsfollows this structure. The executor may be a less capable model with zero context and zero taste — the plan must contain everything, exactly. No references to the audit above or the easing we discussed.这段话点出了整个模板的设计哲学计划是写给最弱执行者看的执行规格书。执行者没有本次对话的上下文、没有审美判断力因此计划必须自包含一切——精确的文件路径、逐字的现状代码、精确的目标数值、仓库自己的写法惯例、有序的编辑步骤、硬性的边界约束以及可机器检查与可手感检查的验收标准。任何参考上面的审计我们之前讨论过的缓动这类指代式表述都是被明令禁止的对应 SKILL.md 的 Hard Rule 3Plans must be fully self-contained。模板总览一段自包含的执行规格书模板在 PLAN-TEMPLATE.md 中以一段完整的 Markdown 骨架给出共八个部分头部元数据、Problem、Target、Repo conventions、Steps、Boundaries、Verification以及作者备忘Notes。完整骨架如下# NNN — Short imperative title - **Status**: TODO - **Commit**: output of git rev-parse --short HEAD when this plan was written - **Severity**: HIGH | MEDIUM | LOW - **Category**: audit category - **Estimated scope**: n files, rough size ## Problem What is wrong, where, and why it matters to how the product feels. Cite every location as path/to/file.tsx:123 and include the current code verbatim: css /* src/components/dropdown.css:14 — current */ .dropdown { transition: all 400ms ease-in; } ## Target The exact end state. Every value spelled out — curves, durations, spring configs, media queries. Never use a nicer easing: css /* target */ .dropdown { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); transform-origin: var(--transform-origin); } ## Repo conventions to follow How this codebase already does it, with one exemplar the executor should imitate (token names, file placement, prop patterns): - Easing tokens live in src/styles/tokens.css; add new curves there, e.g. --ease-out: cubic-bezier(0.23, 1, 0.32, 1); - exemplar file:line that already does this correctly ## Steps 1. One concrete edit per step: file, what changes, resulting code. 2. … ## Boundaries - Do NOT touch files/components out of scope. - Do NOT change markup/structure — motion properties only (unless a step says otherwise). - Do NOT add new dependencies. - If a step doesnt match the code you find (drift since the commit stamp), STOP and report instead of improvising. ## Verification - **Mechanical**: exact commands — typecheck, lint, build — with expected outcome. - **Feel check**: run the UI, trigger interaction, and confirm: - observable check, e.g. the dropdown scales from its trigger, not from center - e.g. spamming the toggle never restarts the animation from zero - In DevTools, set playback to 10% (Animations panel) and confirm detail. - Toggle prefers-reduced-motion (Rendering panel) and confirm movement is dropped but opacity feedback remains. - **Done when**: machine- or eye-checkable completion criteria.下面逐段拆解每个部分的意图与填法。头部元数据状态、Commit 戳、严重级别、类别与范围计划的标题使用NNN — 短祈使句标题格式NNN 是单调递增的计划编号与落盘文件名NNN-short-slug.md对应SKILL.md 要求遵守现有计划的编号。头部四个字段各有用途Status: TODO—— 状态字段用于plans/README.md的状态追踪与reconcile变体的生命周期管理执行完成后可标记为 DONE参见 SKILL.md。Commit—— 写入计划时git rev-parse --short HEAD的短提交哈希。这是计划与代码库之间的时间锚点如果执行时发现代码与计划中的引文对不上就说明自写计划以来代码已漂移执行者必须停止并报告见 Boundaries。Severity: HIGH | MEDIUM | LOW—— 严重级别沿用 SKILL.md 的定义HIGH 为破坏手感的问题UI 上的错误缓动、键盘/高频操作上的动画、掉帧、scale(0)MEDIUM 为明显不对劲的问题错误的原点、不可中断的动态 UI、缺失 reduced-motion 处理LOW 为打磨项stagger 错落、blur 遮罩的交叉淡化、token 整合。Category—— 填写审计类别即 AUDIT.md 中定义的八大类之一Purpose frequency、Easing duration、Physicality origin、Interruptibility、Performance、Accessibility、Cohesion tokens、Missed opportunities。Estimated scope—— 预估改动规模涉及文件数与大致体量帮助执行者与人工审查者评估计划的工作量。Problem把问题钉死在 file:line 与逐字代码上Problem 段落回答三个问题哪里错了、错在何处、为什么影响产品手感。模板强制两个硬性要求每个问题位置都写成path/to/file.tsx:123形式不允许模糊描述。这一约束贯穿整个技能——SKILL.md 在审计阶段同样要求从未在自己核对过 file:line 的 finding 绝不呈现。必须逐字包含现状代码。例如模板内置的示例/* src/components/dropdown.css:14 — current */ .dropdown { transition: all 400ms ease-in; }这里的transition: all 400ms ease-in本身就是 AUDIT.md 中两条典型 finding 的叠加ease-in让 UI 入场先慢后快恰好延迟了用户正在注视的瞬间transition: all会顺带动画化非 GPU 属性。逐字贴出代码既让执行者精确知道改哪里也让审查者无需回翻审计上下文即可判断问题是否属实。Target写下精确终态拒绝换个更好的缓动Target 段落是计划的心脏规则只有一条每个值都要写死——曲线、时长、spring 配置、媒体查询全部拼写出来绝不允许出现用个更顺滑的缓动这类交给执行者自行发挥的表述/* target */ .dropdown { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); transform-origin: var(--transform-origin); }模板示例中的每个值都能在 AUDIT.md 找到出处这正是精确值的来源缓动决策顺序进入/退出用ease-out起手快、响应感强、屏幕内移动/形变用ease-in-out、hover/颜色变化用ease、恒定运动用linear、默认ease-out而UI 上的ease-in永远是一个 finding。强自定义曲线内建 CSS 缓动太弱--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out for on-screen movement */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve */时长预算UI 动画控制在 300ms 以内。按钮按压反馈 100–160ms、工具提示/小 popover 125–200ms、下拉/选择器 150–250ms、模态/抽屉 200–500ms、营销页/解释性动画可以更长。示例中 200ms 的下拉时长正是落在 150–250ms 区间内。spring 配置推荐 Apple 风格{ type: spring, duration: 0.5, bounce: 0.2 }bounce 保持在 0.1–0.3 的微妙区间可见回弹只留给拖拽关闭和俏皮场景AUDIT.md。模板在 Notes 里进一步强调每个数值都要从 AUDIT.md 拉取绝不凭记忆近似。AUDIT.md 是权威数值目录任何出现在其中的值都应原样拷贝进 Target。Repo conventions to follow让执行者模仿仓库自己的写法审计阶段 SKILL.md 的一项核心侦察任务是摸清仓库的动效惯例现有 easing token、时长刻度、spring 配置而这一节就是把侦察结果固化进计划告诉执行者这个代码库已经是怎么做的并给出一个值得模仿的样板exemplar file:line。模板内置示例Easing tokens live insrc/styles/tokens.css; add new curves there, e.g.--ease-out: cubic-bezier(0.23, 1, 0.32, 1);这里隐含了一个重要原则AUDIT.md 的 Cohesion tokens 类别曲线和时长应该作为共享 token 存在五个手写的、几乎相同的 cubic-bezier 本身就是一条整合型 finding。因此计划必须扩展现有 token而不是另起一套平行的命名体系——写进这一节的正是新曲线加到哪个文件、用什么 token 名再配一个已经在正确位置这么做的 exemplar file:line作为执行者的模仿对象。Steps一步一编辑可复制的最终代码Steps 把 Target 拆解成有序的编辑动作。模板规定每一步只做一个具体编辑且必须包含三要素文件、改动内容、改动后的结果代码One concrete edit per step: file, what changes, resulting code.…之所以要求一步一编辑 最终代码是因为执行者可能没有能力自己推导中间状态。对大型改动Steps 通常按先在src/styles/tokens.css加入--ease-outtoken → 再替换组件里的transition→ 最后处理transform-origin这样的依赖顺序排列每一步的结果都可独立核对。这也与 SKILL.md 的写作要求一致为最弱的执行者写作给出精确的文件路径与现状代码摘录、精确的目标数值、仓库惯例与样板、有序步骤、硬边界以及包含手感检查的验收部分。Boundaries硬边界与漂移止损Boundaries 段落的目的是限制执行者的自由裁量权模板内置四条Do NOT touch files/components out of scope —— 明确圈定不可触碰的文件/组件。Do NOT change markup/structure — motion properties only (unless a step says otherwise) —— 默认只允许改动效属性禁止改 DOM 结构除非某一步明确授权。Do NOT add new dependencies —— 禁止新增依赖杜绝执行者为了省事引入动画库。If a step doesnt match the code you find (drift since the commit stamp), STOP and report instead of improvising ——漂移止损协议头部 Commit 戳标记了写计划时的代码版本如果执行者发现实际代码与计划引文不一致必须停下并报告而不是即兴发挥。最后这条与 Hard Rule 5SKILL.md互为补充如果代码库中有设计文档或注释记录了刻意的动效取舍计划作者应尊重它、注明它而不是把它当作 finding 上报。边界段保证了执行者既不会越界也不会在意外情况下自作主张。Verification机械检查 手感检查 完成标准Verification 是模板中最具可执行性的部分分三层Mechanical机械检查给出精确命令及其预期结果如 typecheck、lint、build。这些是零判断的检查执行者照敲即可。Feel check手感检查运行 UI、触发指定交互然后逐项确认可观察的表现。模板内置了四个典型的观察项下拉从触发点缩放而不是从中心缩放——对应 Physicality 类别中popover/dropdown/tooltip 从 trigger 缩放transform-origin: var(--transform-origin)模态框除外的规则AUDIT.md快速连点开关时动画从不从零重启——对应 Interruptibility 类别中transition 可中途重定向keyframes 会从零重启的规则AUDIT.md在 DevTools 的 Animations 面板把播放速度调到 10%慢速核对具体细节缓动是否突兀停止、transform-origin是否正确、联动属性是否同步参考 STANDARDS.md 的调试建议在 Rendering 面板切换prefers-reduced-motion确认位移被移除但透明度反馈保留——这正是reduced motion 意味着更少更柔和的动画而不是零动画的落地检查AUDIT.md。Done when完成标准给出机器可查或肉眼可查的完成判据作为执行者收尾与人工审查的基准。模板作者备忘强调手感检查不是可选项。动效可能机械上完全正确但感觉就是不对因此要给执行者或审查执行者 diff 的人提供具体的慢速观察点。SKILL.md 的 Tone 部分也要求当手感无法单凭代码判断交叉淡化、spring 回弹时明确说明这一点并在计划里放入 feel-check 步骤而不是靠猜。Notes for the plan author写作纪律模板末尾的 Notes 是对计划作者通常是能力强、有审美的模型的四条纪律一个 finding 对应一个计划。只有两个 finding 共享全部文件且修复模式完全相同例如同一 easing token 在多个组件间替换时才允许合并为一个计划。每个值都从 AUDIT.md 拉取绝不凭记忆近似。AUDIT.md 是审计规则目录与权威数值目录计划中的曲线、时长、spring 配置必须原样拷贝。Feel check 不可省略。原因如前所述动效可以机械正确而手感不对。写完计划后创建或更新plans/README.md内容包括计划表编号、标题、严重级别、状态、推荐执行顺序、计划之间的依赖关系。plans/README.md计划的索引、依赖与执行顺序plans/README.md是计划的前台总览。它需要包含计划表列出自定义的计划编号number、标题title、严重级别severity与当前状态status如 TODO / DONE推荐执行顺序按 leverage影响 ÷ 代价排序通常 HIGH 优先计划间依赖例如计划 004 依赖 003 先落地--ease-outtoken。计划文件本身按NNN-short-slug.md命名编号单调递增并尊重已有计划SKILL.md。当代码库演进后improve-animations reconcile变体SKILL.md会重新核对plans/与当前代码把已完成的计划标记为 DONE、刷新过期的 file:line 引用、退役已被修复的 finding——这正是头部 Commit 戳与 Problem 中 file:line 引文派上用场的场景。完整示例把模板填成一份真实计划下面把模板中自带的 dropdown 示例与 AUDIT.md 的权威值结合填出一份完整计划内容为演示性质用于展示各字段的填法# 007 — Replace dropdown ease-in with ease-out tokens - **Status**: TODO - **Commit**: 3f2a9c1 - **Severity**: HIGH - **Category**: Easing duration - **Estimated scope**: 2 files, ~20 lines ## Problem src/components/dropdown.css:14 uses transition: all 400ms ease-in. ease-in starts slow, delaying the exact moment the user watches the dropdown open; transition: all animates unintended properties off-GPU. css /* src/components/dropdown.css:14 — current */ .dropdown { transition: all 400ms ease-in; } ## Target Dropdown is a 150–250ms UI element. Enter with strong ease-out, exit with ease-out, origin at the trigger: css /* target */ .dropdown { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); transform-origin: var(--transform-origin); } ## Repo conventions to follow - Easing tokens live in src/styles/tokens.css; add new curves there, e.g. --ease-out: cubic-bezier(0.23, 1, 0.32, 1); - Exemplar: src/components/popover.css:21 already uses var(--ease-out) with transform-origin: var(--transform-origin). ## Steps 1. In src/styles/tokens.css, add --ease-out: cubic-bezier(0.23, 1, 0.32, 1); to the :root block. 2. In src/components/dropdown.css:14, replace the transition with the target declaration above, and add transform-origin: var(--transform-origin);. ## Boundaries - Do NOT touch src/components/dropdown.tsx (markup/structure). - Motion properties only — no layout changes. - Do NOT add new dependencies. - If src/components/dropdown.css no longer matches the excerpt above, STOP and report. ## Verification - **Mechanical**: npm run typecheck and npm run lint pass with no new errors. - **Feel check**: open the dropdown from its trigger and confirm: - The panel scales from the trigger point, not from the center. - Spamming the toggle never restarts the animation from zero. - In DevTools Animations panel set playback to 10%: easing does not stop abruptly and opacity/transform stay in sync. - Toggle prefers-reduced-motion: movement is dropped but opacity feedback remains. - **Done when**: the transition matches the target verbatim and all feel checks pass at 10% playback.这份示例展示了模板各段落的协同Problem 给出可核对的引文Target 的所有数值来自 AUDIT.md 的权威目录Repo conventions 用仓库现有的 popover 做法作为样板Boundaries 用 commit 戳 引文做漂移止损Verification 同时覆盖机器检查、慢速手感检查和 reduced-motion 检查。模板如何融入 improve-animations 工作流理解模板还需要知道它在整个工作流中的位置与约束写计划发生在审计确认之后。流程是Recon 侦察动效面技术栈、动效库、token 惯例、产品性格、频率地图→ 按八大类并行审计 → 作者亲自复核每个 finding 的 file:line、剔除 by-design/误判/重复项按 leverage 排序成表等待用户挑选 → 用户选定后每个 finding 用本模板写成一个计划SKILL.md。非交互模式下默认取 leverage 最高的前 3–5 个。审计深度可调quick仅高频组件约 5 条 HIGH finding、standard全部交互 UI完整表格、deep整个仓库含营销页含 LOW 打磨项会影响计划的来源但不会改变计划本身的格式。只读约束贯穿始终Hard Rule 1 和 2SKILL.md规定技能绝不修改源码唯一可创建/编辑的文件位于plans/若plans/已被占用则用animation-plans/没有安装、没有带副作用的构建、没有 commit、没有格式化只有只读分析。计划的下游消费方式execute plan变体会在隔离 worktree 中派出执行子代理落地计划再以review-animations的标准STANDARDS.md 中同一套数值与规则审查其 diff 并给出结论reconcile变体则负责让plans/与演进中的代码保持同步。结语PLAN-TEMPLATE 是一份把审美判断编码为可执行规格的模板头部元数据负责追踪与防漂移Problem/Target 负责把问题与终态钉死Repo conventions 保证计划贴合仓库既有写法Steps 给出可复制的编辑序列Boundaries 限制自由裁量Verification 同时提供机器检查与慢速手感检查。它的核心价值在于让强模型把判断力花在审计与规格上让任何模型都能不带审美地忠实执行。配合 AUDIT.md 的权威数值目录与 SKILL.md 的只读工作流这套审计-计划-执行-复核的流水线就能在保持手感标准的同时把动画改进规模化地交付出去。赞分享AI 技能设计系统前端【免费下载链接】skillsSkills for Designers and Engineers.项目地址https://gitcode.com/gh_mirrors/skill2/skills点击查看免费下载相关推荐OpenMetadata 连接器开发指南JSON Schema 标准与连接配置规范OpenMetadata 连接器开发指南JSON Schema 标准与连接配置规范 在 OpenMetadata 中每一个数据服务连接器Database、前端UI组件可执行重构计划的写作范式improve 技能样板 Plan 001「抽取共享 shadow-config 解析」深度拆解可执行重构计划的写作范式improve 技能样板 Plan 001「抽取共享 shadow config 解析」深度拆解 本文以 improve 技能仓库中保Claude Code Game Studios 冲刺计划实战从 sprint-plan 模板到 /sprint-plan 自动化流水线Claude Code Game Studios 冲刺计划实战从 sprint plan 模板到 /sprint plan 自动化流水线 导读 本指南围绕 CAI 技能/插件游戏开发AI 应用上一篇react-redux-typescript-guide 贡献指南基于 README_SOURCE.md 的自动化 README 生成与代码注入工作流下一篇如何三步跑通DANN领域自适应模型无监督迁移学习完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 动画改进计划模板实战指南：improve-animations PLAN-TEMPLATE 深度解析
AI 技能设计系统前端【免费下载链接】skillsSkills for Designers and Engineers.项目地址https://gitcode.com/gh_mirrors/skill2/skills点击查看免费下载本文围绕improve-animations技能中的 PLAN-TEMPLATE.md 展开系统讲解这份自包含动画实现计划模板的每一个字段、写作纪律与底层设计意图。读完本文你将掌握如何把一次动画审计中发现的问题转写成一份连零上下文、零审美的执行模型都能一字不差照做的计划并学会用 AUDIT.md 的权威数值与 SKILL.md 中的工作流约束来保证计划的质量与可执行性。从审计到计划模板存在的意义improve-animations是一个模拟高级动效顾问的只读技能先全面侦察代码库的动画与动效代码产出带优先级的问题清单再为选中的问题编写可直接交给其他 Agent包括能力较弱的廉价模型执行的实现计划。它的工作流在 SKILL.md 中分为四个阶段Recon侦察→ Audit并行审计→ Vet / 确认 → Write plans写计划。PLAN-TEMPLATE.md 就是第四阶段唯一遵守的格式规范它开宗明义地给出了模板存在的理由Every plan written byimprove-animationsfollows this structure. The executor may be a less capable model with zero context and zero taste — the plan must contain everything, exactly. No references to the audit above or the easing we discussed.这段话点出了整个模板的设计哲学计划是写给最弱执行者看的执行规格书。执行者没有本次对话的上下文、没有审美判断力因此计划必须自包含一切——精确的文件路径、逐字的现状代码、精确的目标数值、仓库自己的写法惯例、有序的编辑步骤、硬性的边界约束以及可机器检查与可手感检查的验收标准。任何参考上面的审计我们之前讨论过的缓动这类指代式表述都是被明令禁止的对应 SKILL.md 的 Hard Rule 3Plans must be fully self-contained。模板总览一段自包含的执行规格书模板在 PLAN-TEMPLATE.md 中以一段完整的 Markdown 骨架给出共八个部分头部元数据、Problem、Target、Repo conventions、Steps、Boundaries、Verification以及作者备忘Notes。完整骨架如下# NNN — Short imperative title - **Status**: TODO - **Commit**: output of git rev-parse --short HEAD when this plan was written - **Severity**: HIGH | MEDIUM | LOW - **Category**: audit category - **Estimated scope**: n files, rough size ## Problem What is wrong, where, and why it matters to how the product feels. Cite every location as path/to/file.tsx:123 and include the current code verbatim: css /* src/components/dropdown.css:14 — current */ .dropdown { transition: all 400ms ease-in; } ## Target The exact end state. Every value spelled out — curves, durations, spring configs, media queries. Never use a nicer easing: css /* target */ .dropdown { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); transform-origin: var(--transform-origin); } ## Repo conventions to follow How this codebase already does it, with one exemplar the executor should imitate (token names, file placement, prop patterns): - Easing tokens live in src/styles/tokens.css; add new curves there, e.g. --ease-out: cubic-bezier(0.23, 1, 0.32, 1); - exemplar file:line that already does this correctly ## Steps 1. One concrete edit per step: file, what changes, resulting code. 2. … ## Boundaries - Do NOT touch files/components out of scope. - Do NOT change markup/structure — motion properties only (unless a step says otherwise). - Do NOT add new dependencies. - If a step doesnt match the code you find (drift since the commit stamp), STOP and report instead of improvising. ## Verification - **Mechanical**: exact commands — typecheck, lint, build — with expected outcome. - **Feel check**: run the UI, trigger interaction, and confirm: - observable check, e.g. the dropdown scales from its trigger, not from center - e.g. spamming the toggle never restarts the animation from zero - In DevTools, set playback to 10% (Animations panel) and confirm detail. - Toggle prefers-reduced-motion (Rendering panel) and confirm movement is dropped but opacity feedback remains. - **Done when**: machine- or eye-checkable completion criteria.下面逐段拆解每个部分的意图与填法。头部元数据状态、Commit 戳、严重级别、类别与范围计划的标题使用NNN — 短祈使句标题格式NNN 是单调递增的计划编号与落盘文件名NNN-short-slug.md对应SKILL.md 要求遵守现有计划的编号。头部四个字段各有用途Status: TODO—— 状态字段用于plans/README.md的状态追踪与reconcile变体的生命周期管理执行完成后可标记为 DONE参见 SKILL.md。Commit—— 写入计划时git rev-parse --short HEAD的短提交哈希。这是计划与代码库之间的时间锚点如果执行时发现代码与计划中的引文对不上就说明自写计划以来代码已漂移执行者必须停止并报告见 Boundaries。Severity: HIGH | MEDIUM | LOW—— 严重级别沿用 SKILL.md 的定义HIGH 为破坏手感的问题UI 上的错误缓动、键盘/高频操作上的动画、掉帧、scale(0)MEDIUM 为明显不对劲的问题错误的原点、不可中断的动态 UI、缺失 reduced-motion 处理LOW 为打磨项stagger 错落、blur 遮罩的交叉淡化、token 整合。Category—— 填写审计类别即 AUDIT.md 中定义的八大类之一Purpose frequency、Easing duration、Physicality origin、Interruptibility、Performance、Accessibility、Cohesion tokens、Missed opportunities。Estimated scope—— 预估改动规模涉及文件数与大致体量帮助执行者与人工审查者评估计划的工作量。Problem把问题钉死在 file:line 与逐字代码上Problem 段落回答三个问题哪里错了、错在何处、为什么影响产品手感。模板强制两个硬性要求每个问题位置都写成path/to/file.tsx:123形式不允许模糊描述。这一约束贯穿整个技能——SKILL.md 在审计阶段同样要求从未在自己核对过 file:line 的 finding 绝不呈现。必须逐字包含现状代码。例如模板内置的示例/* src/components/dropdown.css:14 — current */ .dropdown { transition: all 400ms ease-in; }这里的transition: all 400ms ease-in本身就是 AUDIT.md 中两条典型 finding 的叠加ease-in让 UI 入场先慢后快恰好延迟了用户正在注视的瞬间transition: all会顺带动画化非 GPU 属性。逐字贴出代码既让执行者精确知道改哪里也让审查者无需回翻审计上下文即可判断问题是否属实。Target写下精确终态拒绝换个更好的缓动Target 段落是计划的心脏规则只有一条每个值都要写死——曲线、时长、spring 配置、媒体查询全部拼写出来绝不允许出现用个更顺滑的缓动这类交给执行者自行发挥的表述/* target */ .dropdown { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); transform-origin: var(--transform-origin); }模板示例中的每个值都能在 AUDIT.md 找到出处这正是精确值的来源缓动决策顺序进入/退出用ease-out起手快、响应感强、屏幕内移动/形变用ease-in-out、hover/颜色变化用ease、恒定运动用linear、默认ease-out而UI 上的ease-in永远是一个 finding。强自定义曲线内建 CSS 缓动太弱--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out for on-screen movement */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve */时长预算UI 动画控制在 300ms 以内。按钮按压反馈 100–160ms、工具提示/小 popover 125–200ms、下拉/选择器 150–250ms、模态/抽屉 200–500ms、营销页/解释性动画可以更长。示例中 200ms 的下拉时长正是落在 150–250ms 区间内。spring 配置推荐 Apple 风格{ type: spring, duration: 0.5, bounce: 0.2 }bounce 保持在 0.1–0.3 的微妙区间可见回弹只留给拖拽关闭和俏皮场景AUDIT.md。模板在 Notes 里进一步强调每个数值都要从 AUDIT.md 拉取绝不凭记忆近似。AUDIT.md 是权威数值目录任何出现在其中的值都应原样拷贝进 Target。Repo conventions to follow让执行者模仿仓库自己的写法审计阶段 SKILL.md 的一项核心侦察任务是摸清仓库的动效惯例现有 easing token、时长刻度、spring 配置而这一节就是把侦察结果固化进计划告诉执行者这个代码库已经是怎么做的并给出一个值得模仿的样板exemplar file:line。模板内置示例Easing tokens live insrc/styles/tokens.css; add new curves there, e.g.--ease-out: cubic-bezier(0.23, 1, 0.32, 1);这里隐含了一个重要原则AUDIT.md 的 Cohesion tokens 类别曲线和时长应该作为共享 token 存在五个手写的、几乎相同的 cubic-bezier 本身就是一条整合型 finding。因此计划必须扩展现有 token而不是另起一套平行的命名体系——写进这一节的正是新曲线加到哪个文件、用什么 token 名再配一个已经在正确位置这么做的 exemplar file:line作为执行者的模仿对象。Steps一步一编辑可复制的最终代码Steps 把 Target 拆解成有序的编辑动作。模板规定每一步只做一个具体编辑且必须包含三要素文件、改动内容、改动后的结果代码One concrete edit per step: file, what changes, resulting code.…之所以要求一步一编辑 最终代码是因为执行者可能没有能力自己推导中间状态。对大型改动Steps 通常按先在src/styles/tokens.css加入--ease-outtoken → 再替换组件里的transition→ 最后处理transform-origin这样的依赖顺序排列每一步的结果都可独立核对。这也与 SKILL.md 的写作要求一致为最弱的执行者写作给出精确的文件路径与现状代码摘录、精确的目标数值、仓库惯例与样板、有序步骤、硬边界以及包含手感检查的验收部分。Boundaries硬边界与漂移止损Boundaries 段落的目的是限制执行者的自由裁量权模板内置四条Do NOT touch files/components out of scope —— 明确圈定不可触碰的文件/组件。Do NOT change markup/structure — motion properties only (unless a step says otherwise) —— 默认只允许改动效属性禁止改 DOM 结构除非某一步明确授权。Do NOT add new dependencies —— 禁止新增依赖杜绝执行者为了省事引入动画库。If a step doesnt match the code you find (drift since the commit stamp), STOP and report instead of improvising ——漂移止损协议头部 Commit 戳标记了写计划时的代码版本如果执行者发现实际代码与计划引文不一致必须停下并报告而不是即兴发挥。最后这条与 Hard Rule 5SKILL.md互为补充如果代码库中有设计文档或注释记录了刻意的动效取舍计划作者应尊重它、注明它而不是把它当作 finding 上报。边界段保证了执行者既不会越界也不会在意外情况下自作主张。Verification机械检查 手感检查 完成标准Verification 是模板中最具可执行性的部分分三层Mechanical机械检查给出精确命令及其预期结果如 typecheck、lint、build。这些是零判断的检查执行者照敲即可。Feel check手感检查运行 UI、触发指定交互然后逐项确认可观察的表现。模板内置了四个典型的观察项下拉从触发点缩放而不是从中心缩放——对应 Physicality 类别中popover/dropdown/tooltip 从 trigger 缩放transform-origin: var(--transform-origin)模态框除外的规则AUDIT.md快速连点开关时动画从不从零重启——对应 Interruptibility 类别中transition 可中途重定向keyframes 会从零重启的规则AUDIT.md在 DevTools 的 Animations 面板把播放速度调到 10%慢速核对具体细节缓动是否突兀停止、transform-origin是否正确、联动属性是否同步参考 STANDARDS.md 的调试建议在 Rendering 面板切换prefers-reduced-motion确认位移被移除但透明度反馈保留——这正是reduced motion 意味着更少更柔和的动画而不是零动画的落地检查AUDIT.md。Done when完成标准给出机器可查或肉眼可查的完成判据作为执行者收尾与人工审查的基准。模板作者备忘强调手感检查不是可选项。动效可能机械上完全正确但感觉就是不对因此要给执行者或审查执行者 diff 的人提供具体的慢速观察点。SKILL.md 的 Tone 部分也要求当手感无法单凭代码判断交叉淡化、spring 回弹时明确说明这一点并在计划里放入 feel-check 步骤而不是靠猜。Notes for the plan author写作纪律模板末尾的 Notes 是对计划作者通常是能力强、有审美的模型的四条纪律一个 finding 对应一个计划。只有两个 finding 共享全部文件且修复模式完全相同例如同一 easing token 在多个组件间替换时才允许合并为一个计划。每个值都从 AUDIT.md 拉取绝不凭记忆近似。AUDIT.md 是审计规则目录与权威数值目录计划中的曲线、时长、spring 配置必须原样拷贝。Feel check 不可省略。原因如前所述动效可以机械正确而手感不对。写完计划后创建或更新plans/README.md内容包括计划表编号、标题、严重级别、状态、推荐执行顺序、计划之间的依赖关系。plans/README.md计划的索引、依赖与执行顺序plans/README.md是计划的前台总览。它需要包含计划表列出自定义的计划编号number、标题title、严重级别severity与当前状态status如 TODO / DONE推荐执行顺序按 leverage影响 ÷ 代价排序通常 HIGH 优先计划间依赖例如计划 004 依赖 003 先落地--ease-outtoken。计划文件本身按NNN-short-slug.md命名编号单调递增并尊重已有计划SKILL.md。当代码库演进后improve-animations reconcile变体SKILL.md会重新核对plans/与当前代码把已完成的计划标记为 DONE、刷新过期的 file:line 引用、退役已被修复的 finding——这正是头部 Commit 戳与 Problem 中 file:line 引文派上用场的场景。完整示例把模板填成一份真实计划下面把模板中自带的 dropdown 示例与 AUDIT.md 的权威值结合填出一份完整计划内容为演示性质用于展示各字段的填法# 007 — Replace dropdown ease-in with ease-out tokens - **Status**: TODO - **Commit**: 3f2a9c1 - **Severity**: HIGH - **Category**: Easing duration - **Estimated scope**: 2 files, ~20 lines ## Problem src/components/dropdown.css:14 uses transition: all 400ms ease-in. ease-in starts slow, delaying the exact moment the user watches the dropdown open; transition: all animates unintended properties off-GPU. css /* src/components/dropdown.css:14 — current */ .dropdown { transition: all 400ms ease-in; } ## Target Dropdown is a 150–250ms UI element. Enter with strong ease-out, exit with ease-out, origin at the trigger: css /* target */ .dropdown { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); transform-origin: var(--transform-origin); } ## Repo conventions to follow - Easing tokens live in src/styles/tokens.css; add new curves there, e.g. --ease-out: cubic-bezier(0.23, 1, 0.32, 1); - Exemplar: src/components/popover.css:21 already uses var(--ease-out) with transform-origin: var(--transform-origin). ## Steps 1. In src/styles/tokens.css, add --ease-out: cubic-bezier(0.23, 1, 0.32, 1); to the :root block. 2. In src/components/dropdown.css:14, replace the transition with the target declaration above, and add transform-origin: var(--transform-origin);. ## Boundaries - Do NOT touch src/components/dropdown.tsx (markup/structure). - Motion properties only — no layout changes. - Do NOT add new dependencies. - If src/components/dropdown.css no longer matches the excerpt above, STOP and report. ## Verification - **Mechanical**: npm run typecheck and npm run lint pass with no new errors. - **Feel check**: open the dropdown from its trigger and confirm: - The panel scales from the trigger point, not from the center. - Spamming the toggle never restarts the animation from zero. - In DevTools Animations panel set playback to 10%: easing does not stop abruptly and opacity/transform stay in sync. - Toggle prefers-reduced-motion: movement is dropped but opacity feedback remains. - **Done when**: the transition matches the target verbatim and all feel checks pass at 10% playback.这份示例展示了模板各段落的协同Problem 给出可核对的引文Target 的所有数值来自 AUDIT.md 的权威目录Repo conventions 用仓库现有的 popover 做法作为样板Boundaries 用 commit 戳 引文做漂移止损Verification 同时覆盖机器检查、慢速手感检查和 reduced-motion 检查。模板如何融入 improve-animations 工作流理解模板还需要知道它在整个工作流中的位置与约束写计划发生在审计确认之后。流程是Recon 侦察动效面技术栈、动效库、token 惯例、产品性格、频率地图→ 按八大类并行审计 → 作者亲自复核每个 finding 的 file:line、剔除 by-design/误判/重复项按 leverage 排序成表等待用户挑选 → 用户选定后每个 finding 用本模板写成一个计划SKILL.md。非交互模式下默认取 leverage 最高的前 3–5 个。审计深度可调quick仅高频组件约 5 条 HIGH finding、standard全部交互 UI完整表格、deep整个仓库含营销页含 LOW 打磨项会影响计划的来源但不会改变计划本身的格式。只读约束贯穿始终Hard Rule 1 和 2SKILL.md规定技能绝不修改源码唯一可创建/编辑的文件位于plans/若plans/已被占用则用animation-plans/没有安装、没有带副作用的构建、没有 commit、没有格式化只有只读分析。计划的下游消费方式execute plan变体会在隔离 worktree 中派出执行子代理落地计划再以review-animations的标准STANDARDS.md 中同一套数值与规则审查其 diff 并给出结论reconcile变体则负责让plans/与演进中的代码保持同步。结语PLAN-TEMPLATE 是一份把审美判断编码为可执行规格的模板头部元数据负责追踪与防漂移Problem/Target 负责把问题与终态钉死Repo conventions 保证计划贴合仓库既有写法Steps 给出可复制的编辑序列Boundaries 限制自由裁量Verification 同时提供机器检查与慢速手感检查。它的核心价值在于让强模型把判断力花在审计与规格上让任何模型都能不带审美地忠实执行。配合 AUDIT.md 的权威数值目录与 SKILL.md 的只读工作流这套审计-计划-执行-复核的流水线就能在保持手感标准的同时把动画改进规模化地交付出去。赞分享AI 技能设计系统前端【免费下载链接】skillsSkills for Designers and Engineers.项目地址https://gitcode.com/gh_mirrors/skill2/skills点击查看免费下载相关推荐OpenMetadata 连接器开发指南JSON Schema 标准与连接配置规范OpenMetadata 连接器开发指南JSON Schema 标准与连接配置规范 在 OpenMetadata 中每一个数据服务连接器Database、前端UI组件可执行重构计划的写作范式improve 技能样板 Plan 001「抽取共享 shadow-config 解析」深度拆解可执行重构计划的写作范式improve 技能样板 Plan 001「抽取共享 shadow config 解析」深度拆解 本文以 improve 技能仓库中保Claude Code Game Studios 冲刺计划实战从 sprint-plan 模板到 /sprint-plan 自动化流水线Claude Code Game Studios 冲刺计划实战从 sprint plan 模板到 /sprint plan 自动化流水线 导读 本指南围绕 CAI 技能/插件游戏开发AI 应用上一篇react-redux-typescript-guide 贡献指南基于 README_SOURCE.md 的自动化 README 生成与代码注入工作流下一篇如何三步跑通DANN领域自适应模型无监督迁移学习完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考