·animate
</>

animate

Next.js/React 應用程式的動畫模式和最佳實踐。在 React 元件中實現動畫、過渡、懸停效果、頁面轉換、模態或任何運動時,請使用此技能。基於 Emil Kowalski 的「網路動畫」課程。

7安裝·2熱度·@delphi-ai

安裝

$npx skills add https://github.com/delphi-ai/animate-skill --skill animate

如何安裝 animate

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

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

來源:delphi-ai/animate-skill。

SKILL.md

查看原文

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 animate
分類
</>開發工具
認證
收錄時間
2026-02-25
更新時間
2026-03-10

Browse more skills from delphi-ai/animate-skill

快速解答

什麼是 animate?

Next.js/React 應用程式的動畫模式和最佳實踐。在 React 元件中實現動畫、過渡、懸停效果、頁面轉換、模態或任何運動時,請使用此技能。基於 Emil Kowalski 的「網路動畫」課程。 來源:delphi-ai/animate-skill。

如何安裝 animate?

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

這個 Skill 的原始碼在哪?

https://github.com/delphi-ai/animate-skill

詳情

分類
</>開發工具
來源
skills.sh
收錄時間
2026-02-25

相關 Skills

暫無