什麼是 animate?
Next.js/React 應用程式的動畫模式和最佳實踐。在 React 元件中實現動畫、過渡、懸停效果、頁面轉換、模態或任何運動時,請使用此技能。基於 Emil Kowalski 的「網路動畫」課程。 來源:delphi-ai/animate-skill。
Next.js/React 應用程式的動畫模式和最佳實踐。在 React 元件中實現動畫、過渡、懸停效果、頁面轉換、模態或任何運動時,請使用此技能。基於 Emil Kowalski 的「網路動畫」課程。
透過命令列快速安裝 animate AI 技能到你的開發環境
來源:delphi-ai/animate-skill。
This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations.
| Element entering | ease-out | 200-300ms | | Element moving on screen | ease-in-out | 200-300ms | | Element exiting | ease-in | 150-200ms | | Hover effects | ease | 150ms | | Opacity only | linear | varies |
Complete working examples from the course are in the examples/ directory:
Next.js/React 應用程式的動畫模式和最佳實踐。在 React 元件中實現動畫、過渡、懸停效果、頁面轉換、模態或任何運動時,請使用此技能。基於 Emil Kowalski 的「網路動畫」課程。 來源:delphi-ai/animate-skill。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/delphi-ai/animate-skill --skill animateNext.js/React 應用程式的動畫模式和最佳實踐。在 React 元件中實現動畫、過渡、懸停效果、頁面轉換、模態或任何運動時,請使用此技能。基於 Emil Kowalski 的「網路動畫」課程。 來源:delphi-ai/animate-skill。
開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/delphi-ai/animate-skill --skill animate 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/delphi-ai/animate-skill