技能 animate
📦
animate
內容修訂 r1 安全 ⚙️ 外部命令
新增有目的的 UI 動畫
靜態介面在狀態變更時可能讓人感到突兀且不清楚。此技能會引導 Claude、Codex 和 Claude Code 在能改善可用性的地方加入具可及性且高效能的動態效果。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "animate" from https://skillstore.io/skills/pbakaus-animate.md and its manifest at https://skillstore.io/api/skills/pbakaus-animate/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「animate」。 檢視設定 modal 的動畫機會。
預期結果:
- modal 應快速淡入並滑入，同時將焦點移入對話框。
- 主要按鈕需要短暫的按壓回應，而驗證訊息應以柔和轉場出現。
- reduced-motion 使用者應獲得即時狀態變更，而不包含裝飾性移動。
正在使用「animate」。 改善儀表板中的 tab 切換。
預期結果:
- 使用滑動式 tab 指示器，以保留區段之間的空間脈絡。
- 在短時間內淡入淡出內容變更，讓重複切換仍保持快速。
- 避免 parallax 或冗長轉場，因為儀表板使用者需要有效率地掃描資訊。
正在使用「animate」。 稽核頁面載入動畫的品質。
預期結果:
- 將主要揭露效果控制在 800ms 以內，並以小幅間隔錯開次要內容。
- 只對 transform 和 opacity 進行動畫處理，然後在目標裝置上驗證流暢行為。
- 確認在啟用 reduced-motion 偏好時，體驗仍能正常運作。
安全審計
安全v4 • 2026/7/6 開啟版本化報告
The static findings are false positives caused by Markdown code fences and inline code spans in SKILL.md. The skill provides frontend animation guidance and contains no evidence of shell execution, reconnaissance, prompt injection, or data exfiltration.
1
已掃描檔案
191
分析行數
0
複核項目
0
已忽略的誤報
風險因素
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/pbakaus-animate/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/pbakaus-animate?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/pbakaus-animate?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/pbakaus-animate/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/pbakaus-animate.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
pbakaus. (2026). animate security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/pbakaus-animate/audits/4BibTeX 引用
@techreport{pbakaus-pbakaus-animate-2026,
author = {pbakaus},
title = {animate security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/pbakaus-animate/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "animate security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "pbakaus"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/pbakaus-animate/audits/4"
identifiers:
- type: other
value: "skillstore:pbakaus-animate:audit:4"
description: "Skillstore immutable audit report identifier"
比較變體
2 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
Skillstore 評分最高
作者 / 來源 Skillstore 評分 證據置信度 Skillstore 使用量 已更新
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
69
社群
83
規範符合度
你可以打造什麼
潤飾產品工作流程
為表單、儀表板和重複動作加入細緻回饋與轉場，同時避免分散使用者注意力。
改善前端元件
找出需要更清楚動態效果與回饋的按鈕、modal、tabs 和 loading states。
稽核動態效果可及性
檢查動畫是否尊重 reduced-motion 偏好，並避免造成疲勞或阻礙互動。
試試這些提示
檢視單一元件
Use the animate skill to review this component and suggest purposeful micro-interactions that improve feedback and clarity.
為流程規劃動態效果
Use the animate skill to create an animation plan for this user flow, including entrance, feedback, and state transitions.
實作具可及性的動態效果
Use the animate skill to add accessible animations to this feature, with reduced-motion support and performance constraints.
精煉動態效果系統
Use the animate skill to audit this interface and define consistent timing, easing, and interaction rules for its motion system.
最佳實務
- 在加入動態效果之前，先從受眾、使用情境、品牌語調與效能限制開始。
- 使用動畫來釐清回饋、狀態變更、層級或導覽。
- 一律支援 reduced-motion 偏好，並在目標裝置上驗證效能。
避免
- 在沒有明確使用者效益的情況下到處加入動畫。
- 使用冗長的回饋動畫，讓介面感覺緩慢。
- 在 transform 或 opacity 可達成效果時，仍對版面配置屬性進行動畫處理。
常見問題
這個技能能協助為哪些內容加入動畫？
它有助於改善元件、流程、狀態變更、loading states、modal、導覽和微互動。
它會撰寫 production-ready code 嗎？
它提供實作指引，也可能引導編輯，但技能本身僅包含指令。
它如何處理可及性？
它要求 reduced-motion 替代方案，並提醒避免會阻礙或耗盡使用者精力的動態效果。
它提到哪些技術？
它會提及 CSS transitions、keyframes、Web Animations API、Framer Motion 和 GSAP。
它適合嚴肅的商業軟體嗎？
是。它強調有目的的動態效果、克制、效能，以及在視覺愉悅之前先考量使用者脈絡。
使用者在使用前應提供什麼？
使用者應在可用時提供目標功能、受眾、使用情境、品牌語調與效能限制。