·emilkowal-animations
</>

emilkowal-animations

Emil Kowalski 的 Web 介面動畫最佳實踐。在 React、CSS 或 Framer Motion 中編寫、檢查或實作動畫時使用。在涉及轉換、緩動、手勢、Toast、抽屜或動作的任務上觸發。

14安裝·1熱度·@blockmatic

安裝

$npx skills add https://github.com/blockmatic/basilic --skill emilkowal-animations

如何安裝 emilkowal-animations

透過命令列快速安裝 emilkowal-animations AI 技能到你的開發環境

  1. 開啟終端機: 開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 執行安裝指令: 複製並執行以下指令:npx skills add https://github.com/blockmatic/basilic --skill emilkowal-animations
  3. 驗證安裝: 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

來源:blockmatic/basilic。

SKILL.md

查看原文

Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), and his animations.dev course. Contains 43 rules across 7 categories, prioritized by impact.

| 1 | Easing Selection | CRITICAL | ease- | | 2 | Timing & Duration | CRITICAL | timing- | | 3 | Property Selection | HIGH | props- | | 4 | Transform Techniques | HIGH | transform- | | 5 | Interaction Patterns | MEDIUM-HIGH | interact- | | 6 | Strategic Animation | MEDIUM | strategy- | | 7 | Accessibility & Polish | MEDIUM | polish- |

| cubic-bezier(0.32, 0.72, 0, 1) | iOS-style drawer/sheet animation | | scale(0.97) | Button press feedback | | scale(0.95) | Minimum enter scale (never scale(0)) | | 200ms ease-out | Standard UI transition | | 300ms | Maximum duration for UI animations | | 500ms | Drawer animation duration | | 0.11 px/ms | Velocity threshold for momentum dismiss |

可引用資訊

為搜尋與 AI 引用準備的穩定欄位與指令。

安裝指令
npx skills add https://github.com/blockmatic/basilic --skill emilkowal-animations
分類
</>開發工具
認證
收錄時間
2026-02-25
更新時間
2026-03-10

Browse more skills from blockmatic/basilic

快速解答

什麼是 emilkowal-animations?

Emil Kowalski 的 Web 介面動畫最佳實踐。在 React、CSS 或 Framer Motion 中編寫、檢查或實作動畫時使用。在涉及轉換、緩動、手勢、Toast、抽屜或動作的任務上觸發。 來源:blockmatic/basilic。

如何安裝 emilkowal-animations?

開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/blockmatic/basilic --skill emilkowal-animations 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

這個 Skill 的原始碼在哪?

https://github.com/blockmatic/basilic