AI 技能設(shè)計(jì)系統(tǒng)前端【免費(fèi)下載鏈接】skillsSkills for Designers and Engineers.項(xiàng)目地址https://gitcode.com/gh_mirrors/skill2/skills點(diǎn)擊查看免費(fèi)下載這篇指南圍繞倉(cāng)庫(kù)中skills/review-animations/SKILL.md展開(kāi)講解它作為唯一職責(zé)的動(dòng)畫(huà)審查技能如何工作從默認(rèn)標(biāo)記問(wèn)題的審查姿態(tài)、十條不可妥協(xié)標(biāo)準(zhǔn)、升級(jí)觸發(fā)清單到輸出格式與精確數(shù)值字典。讀完你既能拿它當(dāng) Agent 提示詞模板也能把它提煉成一套可復(fù)用的動(dòng)畫(huà) code review 檢查表配合 STANDARDS.md 中的精確數(shù)值做到按值引用、不靠手感近似。一、定位一個(gè)只做動(dòng)畫(huà)審查的專項(xiàng)技能該技能在 SKILL.md 開(kāi)頭就聲明了自己的邊界它只做一件事——按高工藝標(biāo)準(zhǔn)審查動(dòng)畫(huà)與動(dòng)效代碼。它不寫功能、不修無(wú)關(guān) bug、不審查非動(dòng)效代碼如果被要求審查通用代碼應(yīng)當(dāng)拒絕并指向通用審查技能。這種單職責(zé)設(shè)計(jì)是整個(gè)倉(cāng)庫(kù)的通用風(fēng)格animate 只負(fù)責(zé)從零構(gòu)建動(dòng)畫(huà)improve-animations 只負(fù)責(zé)全倉(cāng)審計(jì)并產(chǎn)出可執(zhí)行計(jì)劃find-animation-opportunities 只負(fù)責(zé)尋找該動(dòng)而沒(méi)動(dòng)的地方而review-animations只負(fù)責(zé)審查單個(gè) diff 中的動(dòng)效。README 中將其概括為基于我的規(guī)則以嚴(yán)格方式審查你的動(dòng)畫(huà)見(jiàn) README.md。這種職責(zé)切分讓每個(gè)技能都能把標(biāo)準(zhǔn)拉到極致不會(huì)因?yàn)槎嗳蝿?wù)而稀釋。二、審查姿態(tài)默認(rèn)標(biāo)記批準(zhǔn)是掙來(lái)的原文檔明確給出了審查者的心理模型你是一名對(duì)工藝有苛刻眼光的資深設(shè)計(jì)工程師。你的偏見(jiàn)朝向感覺(jué)對(duì)的動(dòng)效而非僅僅能跑的動(dòng)效。一個(gè)能工作但顯得遲滯、從錯(cuò)誤原點(diǎn)落地、觸發(fā)過(guò)于頻繁或掉幀的過(guò)渡是回歸不是通過(guò)。默認(rèn)標(biāo)記問(wèn)題。批準(zhǔn)是掙來(lái)的不是默認(rèn)的。這句話定義了與普通 code review 完全不同的默認(rèn)值普通審查默認(rèn)相信能跑就行這里默認(rèn)懷疑每一個(gè)動(dòng)效?；鶞?zhǔn)來(lái)自 Emil Kowalski 的動(dòng)畫(huà)哲學(xué)而審查方法不可妥協(xié)的標(biāo)準(zhǔn)、升級(jí)觸發(fā)、補(bǔ)救層級(jí)、分級(jí)輸出、顯式批準(zhǔn)條件則借鑒了激進(jìn)的代碼質(zhì)量審查流程。當(dāng)一條結(jié)論需要精確數(shù)值時(shí)必須加載 STANDARDS.md 中的完整規(guī)則目錄緩動(dòng)曲線、時(shí)長(zhǎng)表、彈簧配置、手勢(shì)、clip-path、性能、無(wú)障礙而不是憑記憶近似。三、十條不可妥協(xié)標(biāo)準(zhǔn)每一處動(dòng)畫(huà)都被這樣測(cè)量原文檔強(qiáng)調(diào)diff 中的每一處動(dòng)畫(huà)都按這些標(biāo)準(zhǔn)測(cè)量違反即是一條 finding問(wèn)題。動(dòng)效必須有正當(dāng)理由Justified motion每一處動(dòng)畫(huà)都必須回答為什么這里要?jiǎng)印臻g一致性、狀態(tài)指示、反饋、解釋、或防止突兀變化?？雌饋?lái)很酷用在高頻出現(xiàn)的元素上是 block攔截。STANDARDS.md 給出的合法目的正是這五類并補(bǔ)充It looks cool用在?？丛厣喜怀闪?。與出現(xiàn)頻率匹配Frequency-appropriate動(dòng)效強(qiáng)度必須匹配用戶多?？吹剿ｆI盤觸發(fā)和每天 100 次的操作完全不動(dòng)畫(huà)每天十幾次的操作只做減量動(dòng)效偶爾出現(xiàn)的用標(biāo)準(zhǔn)動(dòng)畫(huà)罕見(jiàn)/首次出現(xiàn)才允許一點(diǎn) delight。響應(yīng)式緩動(dòng)Responsive easing進(jìn)入/退出元素必須用ease-out或強(qiáng)自定義曲線。UI 上用ease-in是 block——它延遲了用戶最關(guān)注的那個(gè)瞬間。內(nèi)置 CSS 緩動(dòng)太弱應(yīng)當(dāng)使用自定義 cubic-bezier。UI 動(dòng)畫(huà)低于 300msSub-300ms UIUI 動(dòng)畫(huà)保持在 300ms 以內(nèi)任何更慢的 UI 動(dòng)效若無(wú)理由即算 finding。逐元素的時(shí)長(zhǎng)預(yù)算在 STANDARDS.md 中給出。原點(diǎn)與物理正確Origin physical correctnesspopover/下拉/工具提示應(yīng)從觸發(fā)器transform-origin縮放而不是從中心。絕不要從scale(0)動(dòng)畫(huà)——應(yīng)從scale(0.9–0.97) opacity 起步Modal 豁免保持居中?？芍袛嘈訧nterruptibility快速觸發(fā)或手勢(shì)驅(qū)動(dòng)的動(dòng)效toast、開(kāi)關(guān)、拖拽必須可中斷——用 CSS transition 或可從當(dāng)前狀態(tài)重新定位的彈簧而不是會(huì)從零重啟的 keyframes。只用 GPU 屬性GPU-only properties只動(dòng)畫(huà)transform和opacity。動(dòng)畫(huà)width/height/margin/padding/top/left或負(fù)載下的 Framer Motionx/y/scale簡(jiǎn)寫是性能 finding。無(wú)障礙Accessibilityprefers-reduced-motion必須被尊重更溫和而非歸零——保留 opacity/color去掉位移。hover 動(dòng)畫(huà)必須被media (hover: hover) and (pointer: fine)門控。不對(duì)稱進(jìn)出Asymmetric enter/exit深思熟慮的動(dòng)作按壓、按住、破壞性確認(rèn)動(dòng)得慢系統(tǒng)響應(yīng)要干脆。按壓-釋放或按住交互上的對(duì)稱時(shí)序是 finding。一致性Cohesion動(dòng)效要匹配組件的性格和整個(gè)產(chǎn)品的氣質(zhì)——俏皮的可以更有彈性儀表盤保持干脆。性格不匹配或本可用微妙模糊過(guò)渡銜接兩個(gè)狀態(tài)卻用了突兀 crossfade是 finding。拿不準(zhǔn)動(dòng)效是否合適時(shí)最強(qiáng)的一招往往是刪掉它。四、攻擊性升級(jí)觸發(fā)看到就硬性標(biāo)記原文檔列出了一份看到就硬性標(biāo)記的清單它們是最高置信度的違規(guī)信號(hào)適合作為 grep 關(guān)鍵詞直接掃代碼transition: all無(wú)界屬性動(dòng)畫(huà)scale(0)或沒(méi)有初始 transform 的純淡入進(jìn)入任何 UI 交互上的ease-in刻意動(dòng)畫(huà)上使用過(guò)弱的內(nèi)置緩動(dòng)鍵盤快捷鍵、命令面板開(kāi)關(guān)、或每天 100 次操作上的動(dòng)畫(huà)無(wú)陳述理由的 UI 時(shí)長(zhǎng) 300ms觸發(fā)器錨定 popover/下拉/工具提示上的transform-origin: centertoast、開(kāi)關(guān)或任何快速添加/觸發(fā)的元素上的 keyframes動(dòng)畫(huà)布局屬性width/height/margin/padding/top/left頁(yè)面繁忙時(shí)運(yùn)行的 Framer Motionx/y/scaleprops在父元素上更新 CSS 變量來(lái)驅(qū)動(dòng)子元素 transform樣式重算風(fēng)暴位移動(dòng)效缺少prefers-reduced-motion處理未門控的:hover動(dòng)效按壓-釋放或按住交互上的對(duì)稱進(jìn)出時(shí)序應(yīng)該用 30–80ms stagger 卻全部同時(shí)進(jìn)入這 13 條幾乎可以直接轉(zhuǎn)化為自動(dòng)化 lint 規(guī)則或 PR 評(píng)論模板——每條都是一個(gè)壞味道 判定的二元組合審查者無(wú)需糾結(jié)。五、補(bǔ)救偏好層級(jí)修復(fù)建議的先后順序發(fā)現(xiàn)問(wèn)題后提出修復(fù)建議時(shí)優(yōu)先早的方案刪掉動(dòng)畫(huà)高頻 / 無(wú)目的 / 鍵盤觸發(fā)減量——更短時(shí)長(zhǎng)、更小 transform、更少動(dòng)畫(huà)屬性修緩動(dòng)——ease-in→ease-out/自定義曲線用強(qiáng) cubic-bezier修原點(diǎn)/物理性——糾正transform-origin把scale(0)換成scale(0.95)opacity做成可中斷——keyframes → transitions或手勢(shì)驅(qū)動(dòng)用彈簧移到 GPU——布局屬性 →transform/opacity簡(jiǎn)寫 → 完整 transform 字符串程序化 CSS 用 WAAPI不對(duì)稱時(shí)序——放慢深思熟慮階段加快響應(yīng)打磨——用模糊遮罩 crossfade、分組加 stagger、進(jìn)入用starting-style、活躍元素用彈簧無(wú)障礙與一致性——加 reduced-motion hover 門控調(diào)校以匹配組件性格這個(gè)層級(jí)的設(shè)計(jì)邏輯與十條標(biāo)準(zhǔn)一一對(duì)應(yīng)先消滅不該動(dòng)的再改善動(dòng)得不對(duì)的最后才談打磨。六、強(qiáng)制輸出格式先表格后裁決原文檔要求輸出嚴(yán)格分兩部分、按序排列。Part 1 —— 發(fā)現(xiàn)表必需一張 markdown 表格一行一個(gè)問(wèn)題絕不使用 Before:/After: 列表形式。原文檔給出的示例表也是倉(cāng)庫(kù) emil-design-eng 中規(guī)定審查 UI 必須使用的同款格式BeforeAfterWhytransition: all 300mstransition: transform 200ms ease-out明確具體屬性all會(huì)在 GPU 之外動(dòng)畫(huà)到非預(yù)期屬性transform: scale(0)transform: scale(0.95); opacity: 0沒(méi)有東西會(huì)從無(wú)中出現(xiàn)——scale(0)看起來(lái)像從哪冒出來(lái)的ease-inon dropdownease-out custom curveease-in延遲了用戶最關(guān)注的瞬間顯得遲滯transform-origin: centeron popovervar(--transform-origin)(Base UI)Popover 從觸發(fā)器縮放而非中心modal 豁免Part 2 —— 裁決必需剩余評(píng)論按影響層級(jí)分組最高層級(jí)在前空的層級(jí)省略破壞感受的回歸——遲滯的緩動(dòng)、憑空出現(xiàn)、觸發(fā)在高頻/鍵盤操作上錯(cuò)過(guò)的簡(jiǎn)化——應(yīng)該被刪除或大幅縮減的動(dòng)畫(huà)性能——非 GPU 屬性、掉幀風(fēng)險(xiǎn)、重算風(fēng)暴可中斷性與時(shí)序——本應(yīng)使用 transition/彈簧卻用了 keyframes本應(yīng)對(duì)稱的時(shí)序卻不對(duì)稱原點(diǎn)、物理性與一致性——錯(cuò)誤原點(diǎn)、性格不匹配、突兀 crossfade無(wú)障礙——reduced-motion 與指針/hover 門控最后以顯式?jīng)Q策收尾Block——任何破壞感受的回歸、鍵盤/高頻操作上的動(dòng)畫(huà)、UI 上的scale(0)/ease-in、或有簡(jiǎn)單 GPU 修復(fù)方案的非 GPU 動(dòng)畫(huà)。Approve——無(wú)破壞感受的回歸、無(wú)明顯的該刪未刪動(dòng)效、時(shí)長(zhǎng)與緩動(dòng)在界限內(nèi)、需要的地方已處理可中斷性、reduced-motion 已尊重。結(jié)論必須具體并引用file:line需要數(shù)值曲線、時(shí)長(zhǎng)、彈簧配置時(shí)從 STANDARDS.md 中精確取用而非近似。七、數(shù)值字典審查時(shí)的精確取值依據(jù)原文檔中需要數(shù)值時(shí)查閱 STANDARDS.md的約定決定了審查結(jié)論必須落在精確值上。以下是該字典的核心內(nèi)容頻率決策表頻率決策每天 100 次鍵盤快捷鍵、命令面板開(kāi)關(guān)絕不動(dòng)畫(huà)每天十幾次hover 效果、列表導(dǎo)航刪除或大幅縮減偶爾modal、抽屜、toast標(biāo)準(zhǔn)動(dòng)畫(huà)罕見(jiàn)/首次引導(dǎo)、反饋、慶?？梢约?delight文檔特別以 Raycast 為例它沒(méi)有開(kāi)關(guān)動(dòng)畫(huà)——對(duì)每天用幾百次的東西來(lái)說(shuō)這才是正確的。緩動(dòng)決策順序與強(qiáng)曲線進(jìn)入或退出 →ease-out起始快感覺(jué)響應(yīng)屏幕內(nèi)移動(dòng)/變形 →ease-in-outHover/顏色變化 →ease恒定運(yùn)動(dòng)跑馬燈、進(jìn)度條→linear默認(rèn) →ease-outUI 上絕不用ease-in。內(nèi)置 CSS 緩動(dòng)太弱應(yīng)使用強(qiáng)自定義曲線STANDARDS.md 與 animate 技能共享同一組 token--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 (Ionic) */找不到的曲線應(yīng)從知名緩動(dòng)曲線資源如 easing.dev、easings.co挑選不要從零手搓。時(shí)長(zhǎng)預(yù)算表元素時(shí)長(zhǎng)按鈕按壓反饋100–160ms工具提示、小型 popover125–200ms下拉、選擇器150–250msModal、抽屜200–500ms營(yíng)銷/解釋性可以更長(zhǎng)規(guī)則依然是UI 動(dòng)畫(huà)保持在 300ms 以下。180ms 的下拉比 400ms 的下拉感覺(jué)更響應(yīng)轉(zhuǎn)圈動(dòng)畫(huà)更快會(huì)讓加載感覺(jué)更快實(shí)際時(shí)間相同第一個(gè)工具提示之后的后續(xù)工具提示應(yīng)立即出現(xiàn)跳過(guò)延遲 動(dòng)畫(huà)會(huì)讓整個(gè)工具欄感覺(jué)更快。物理性絕不scale(0)從scale(0.9–0.97)opacity: 0開(kāi)始。原點(diǎn)感知的 popover從觸發(fā)器縮放而非中心.popover { transform-origin: var(--transform-origin); }Base UI。Modal 豁免保持transform-origin: center。按鈕按壓反饋:active上transform: scale(0.97)transition: transform 160ms ease-out幅度保持在 0.95–0.98 的微妙范圍。彈簧配置彈簧模擬物理所以感覺(jué)自然沒(méi)有固定時(shí)長(zhǎng)而是按參數(shù)收斂。用于帶慣性的拖拽、活的元素如 Dynamic Island、可中斷手勢(shì)、裝飾性鼠標(biāo)追蹤。// Apple 風(fēng)格更易推理——推薦 { type: spring, duration: 0.5, bounce: 0.2 } // 傳統(tǒng)物理更多控制 { type: spring, mass: 1, stiffness: 100, damping: 10 }bounce 保持在 0.1–0.3 的微妙范圍大多數(shù) UI 中避免 bounce留給拖拽消除和俏皮交互。彈簧被中斷時(shí)保持速度keyframes 從零重啟因此適合用戶可能中途反轉(zhuǎn)的手勢(shì)。鼠標(biāo)交互用useSpring插值而不是把值直接綁到鼠標(biāo)位置直接綁定 生硬、無(wú)動(dòng)量且僅限裝飾性動(dòng)效。可中斷性CSS transition 可被中斷并中途重新定向keyframes 從零重啟。對(duì)快速觸發(fā)的元素堆疊的 toast、開(kāi)關(guān)transition 更順滑/* 可中斷——適合動(dòng)態(tài) UI */ .toast { transition: transform 400ms ease; } /* 不可中斷——?jiǎng)討B(tài) UI 中避免 */ keyframes slideIn { from { transform: translateY(100%); } to { transform: translateY(0); } }無(wú) JS 的進(jìn)入用starting-style.toast { opacity: 1; transform: translateY(0); transition: opacity 400ms ease, transform 400ms ease; starting-style { opacity: 0; transform: translateY(100%); } }舊瀏覽器回退useEffect(() setMounted(true), [])data-mounted屬性。不對(duì)稱時(shí)序用戶在做決定的地方放慢系統(tǒng)響應(yīng)的地方放快.overlay { transition: clip-path 200ms ease-out; } /* release: fast */ .button:active .overlay { transition: clip-path 2s linear; } /* press: slow, deliberate */性能只動(dòng)畫(huà)transform和opacity——它們跳過(guò)布局/繪制并在 GPU 上運(yùn)行padding/margin/height/width/top/left會(huì)觸發(fā)全部三步渲染。不要用父元素上的 CSS 變量驅(qū)動(dòng)子元素 transform——會(huì)為所有子元素重算樣式。直接在元素上設(shè)置transformelement.style.setProperty(--swipe-amount, $zxl6ubazpx); // bad: recalc on all children element.style.transform translateY($zxl6ubazpx); // good: only this elementFramer Motion 簡(jiǎn)寫不是硬件加速的x/y/scale通過(guò) rAF 在主線程運(yùn)行負(fù)載下掉幀應(yīng)改用完整 transform 字符串motion.div animate{{ x: 100 }} / // drops frames under load motion.div animate{{ transform: translateX(100px) }} / // hardware acceleratedCSS 動(dòng)畫(huà)在負(fù)載下優(yōu)于 JS——CSS 跑在主線程之外rAF 動(dòng)畫(huà)在瀏覽器加載/腳本/繪制期間會(huì)卡頓。預(yù)先確定的動(dòng)效用 CSS動(dòng)態(tài)/可中斷動(dòng)效用 JS。WAAPI兼顧 JS 控制與 CSS 性能硬件加速、可中斷、無(wú)庫(kù)依賴element.animate([{ clipPath: inset(0 0 100% 0) }, { clipPath: inset(0 0 0 0) }], { duration: 1000, fill: forwards, easing: cubic-bezier(0.77, 0, 0.175, 1) });Transforms 與 clip-pathtranslate百分比相對(duì)元素自身尺寸——translateY(100%)按元素自身高度移動(dòng)Sonner/Vaul 定位 toast/抽屜的方式優(yōu)于硬編碼 px。scale()會(huì)同時(shí)縮放子元素字體、圖標(biāo)、內(nèi)容——這恰好是按壓反饋要的特性。3DrotateX/Ytransform-style: preserve-3d無(wú) JS 實(shí)現(xiàn)縱深/軌道/翻轉(zhuǎn)。clip-path: inset(t r b l)是強(qiáng)大的動(dòng)畫(huà)工具每個(gè)值從對(duì)應(yīng)邊向內(nèi)吞噬用于滾動(dòng)顯現(xiàn)inset(0 0 100% 0)→inset(0 0 0 0)、按住刪除遮罩、無(wú)縫 tab 顏色過(guò)渡、對(duì)比滑塊。手勢(shì)與拖拽動(dòng)量消除不要要求跨過(guò)距離閾值——計(jì)算速度Math.abs(distance)/elapsedMs若 ~0.11即消除。一個(gè)輕掃應(yīng)該足夠。邊界阻尼拖過(guò)自然邊緣時(shí)移動(dòng)量遞減真實(shí)物體停止前會(huì)減速。指針捕獲拖拽開(kāi)始后捕獲指針指針離開(kāi)邊界仍繼續(xù)。多點(diǎn)觸控保護(hù)拖拽開(kāi)始后忽略額外觸點(diǎn)if (isDragging) return——防止跳動(dòng)。摩擦優(yōu)于硬停允許帶漸增阻力的過(guò)度拖拽而不是看不見(jiàn)的墻。遮罩不完美的 crossfade 與 stagger當(dāng) crossfade 在調(diào)好緩動(dòng)/時(shí)長(zhǎng)后仍顯示兩個(gè)重疊狀態(tài)過(guò)渡期間加微妙的filter: blur(2px)把它們?nèi)诤铣梢粋€(gè)感知上的變換。模糊保持在 20px 以下重模糊代價(jià)高尤其 Safari。分組進(jìn)入用 stagger項(xiàng)間 30–80ms更長(zhǎng)的延遲顯得慢。stagger 是裝飾性的——絕不能阻塞交互.item { opacity: 0; transform: translateY(8px); animation: fadeIn 300ms ease-out forwards; } .item:nth-child(2) { animation-delay: 50ms; } .item:nth-child(3) { animation-delay: 100ms; } keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }無(wú)障礙media (prefers-reduced-motion: reduce) { .element { animation: fade 0.2s ease; } /* keep opacity/color, drop transform-based motion */ } media (hover: hover) and (pointer: fine) { .element:hover { transform: scale(1.05); } /* gate hover motion — touch fires false hovers on tap */ }const reduce useReducedMotion(); const closedX reduce ? 0 : -100%;Reduced motion 意味著更少、更溫和的動(dòng)畫(huà)不是零——保留幫助理解的過(guò)渡移除位移/位置變化。調(diào)試審查中感受拿不準(zhǔn)時(shí)推薦慢動(dòng)作時(shí)長(zhǎng)放大 2–5 倍或用 DevTools 動(dòng)畫(huà)檢查器。檢查顏色是否干凈地過(guò)渡、緩動(dòng)是否戛然而止、transform-origin是否正確、協(xié)調(diào)屬性是否保持同步。逐幀Chrome DevTools Animations 面板可暴露協(xié)調(diào)屬性之間的時(shí)序漂移。真實(shí)設(shè)備做手勢(shì)抽屜、滑動(dòng)——連上手機(jī)、用 IP 訪問(wèn) dev server、用 Safari 遠(yuǎn)程調(diào)試。次日新鮮眼光——開(kāi)發(fā)中不可見(jiàn)的瑕疵日后會(huì)浮現(xiàn)。一致性動(dòng)效匹配組件性格俏皮的可以更有彈性專業(yè)儀表盤應(yīng)干脆快速。Sonner 感覺(jué)對(duì)部分正是因?yàn)榫弰?dòng)、時(shí)長(zhǎng)、設(shè)計(jì)乃至名字都在和諧一致——稍慢、用ease而非ease-out以顯得優(yōu)雅。進(jìn)出列表的 opacity height 是試錯(cuò)出來(lái)的沒(méi)有公式——調(diào)到感覺(jué)對(duì)為止。八、在倉(cāng)庫(kù)中的協(xié)同這套 bar 如何被復(fù)用review-animations的審查標(biāo)準(zhǔn)并非孤島它在整個(gè)倉(cāng)庫(kù)中被反復(fù)引用emil-design-eng 把同一套決策框架頻率 → 目的 → 緩動(dòng) → 時(shí)長(zhǎng) → 彈簧編碼進(jìn)主技能并強(qiáng)制要求審查 UI 時(shí)使用完全相同的 Before/After markdown 表格格式——與review-animations的 Part 1 一脈相承。animate 的 Never Ship 自查表skills/animate/SKILL.md逐條聲明這些在review-animations中都是自動(dòng) block——構(gòu)建技能要求一次通過(guò)審查把 review 標(biāo)準(zhǔn)前移成 build 標(biāo)準(zhǔn)。improve-animations 的execute plan調(diào)用會(huì)在隔離 worktree 中實(shí)現(xiàn)計(jì)劃然后用review-animations的標(biāo)準(zhǔn)審查其 diff 并給出裁決skills/improve-animations/SKILL.md其審計(jì)類別也與審查標(biāo)準(zhǔn)完全對(duì)齊AUDIT.md 的八類目的與頻率、緩動(dòng)與時(shí)長(zhǎng)、物理性與原點(diǎn)、可中斷性、性能、無(wú)障礙、一致性與 token、錯(cuò)失機(jī)會(huì)。換句話說(shuō)這個(gè)倉(cāng)庫(kù)把什么算好的動(dòng)效收斂成一套統(tǒng)一 barreview-animations負(fù)責(zé)把關(guān)animate負(fù)責(zé)按它一次做對(duì)improve-animations負(fù)責(zé)按它審計(jì)全倉(cāng)emil-design-eng負(fù)責(zé)把它的價(jià)值觀沉淀為主哲學(xué)。無(wú)論你在哪個(gè)環(huán)節(jié)工作這套十條標(biāo)準(zhǔn)與 STANDARDS.md 的數(shù)值字典都是共同的裁決依據(jù)。九、直接可用把它變成你的動(dòng)效審查工作流將這份技能落到實(shí)操最小可用流程是拿到 diff 后先跑一遍升級(jí)觸發(fā)清單做快速掃描greptransition: all、scale(0)、ease-in、keyframes、width|height|margin|padding|top|left的 transition、prefers-reduced-motion、transform-origin對(duì)每一處動(dòng)效問(wèn)為什么動(dòng) / 多常被看到再對(duì)照頻率表、緩動(dòng)決策序、時(shí)長(zhǎng)表給出精確的 Before → After 修復(fù)按影響層級(jí)組織裁決明確給出 Block 或 Approve所有數(shù)值一律引用 STANDARDS.md感受拿不準(zhǔn)時(shí)不猜值而是把慢動(dòng)作/逐幀/真實(shí)設(shè)備檢查寫進(jìn)結(jié)論用次日新鮮眼光復(fù)核。當(dāng)刪掉它是最強(qiáng)修復(fù)時(shí)就刪——這是這套審查哲學(xué)里最高頻出現(xiàn)的答案。贊分享AI 技能設(shè)計(jì)系統(tǒng)前端【免費(fèi)下載鏈接】skillsSkills for Designers and Engineers.項(xiàng)目地址https://gitcode.com/gh_mirrors/skill2/skills點(diǎn)擊查看免費(fèi)下載相關(guān)推薦open-slide 動(dòng)畫(huà)審查技能 review-animations十條非協(xié)商標(biāo)準(zhǔn)、升級(jí)觸發(fā)與可落地的數(shù)值基準(zhǔn)open slide 動(dòng)畫(huà)審查技能 review animations十條非協(xié)商標(biāo)準(zhǔn)、升級(jí)觸發(fā)與可落地的數(shù)值基準(zhǔn) 本指南圍繞倉(cāng)庫(kù)中 .agents/skillReact Bits 動(dòng)畫(huà)評(píng)審方法學(xué):十條不可妥協(xié)標(biāo)準(zhǔn)、升級(jí)觸發(fā)器與一套高門檻的 Motion Code 審查框架React Bits 動(dòng)畫(huà)評(píng)審方法學(xué):十條不可妥協(xié)標(biāo)準(zhǔn)、升級(jí)觸發(fā)器與一套高門檻的 Motion Code 審查框架 本文以 react bits 倉(cāng)庫(kù)中的 re前端UI組件SurfSense 動(dòng)畫(huà)代碼評(píng)審技能詳解review-animations 的十條不可協(xié)商標(biāo)準(zhǔn)、升級(jí)觸發(fā)器與 Block/Approve 輸出流程SurfSense 動(dòng)畫(huà)代碼評(píng)審技能詳解review animations 的十條不可協(xié)商標(biāo)準(zhǔn)、升級(jí)觸發(fā)器與 Block/Approve 輸出流程 SurfS人工智能AI 應(yīng)用后端AI Agent網(wǎng)頁(yè)爬蟲(chóng)RAG深度研究MCP 服務(wù)前端上一篇如何用Python實(shí)現(xiàn)95%成功率的大麥自動(dòng)搶票神器告別搶票焦慮的終極指南下一篇PHP-DDD-Cargo-Sample性能優(yōu)化Doctrine查詢優(yōu)化與緩存策略實(shí)戰(zhàn)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考