animate-dev

Adobe Animate + CreateJS Development

協助開發、修改、除錯 Adobe Animate + CreateJS 互動應用程式。

開始前

1. 檢查 Project Memory：讀取 CLAUDE.md 或 .claude/project-memory.md
2. 使用已知知識：避免重複詢問已記錄的元件資訊
3. Critical Check：確認 createjs-[version].min.js 存在於 js/ 目錄

流程

Phase 1: Discovery

Goal: 理解用戶需求

Actions:

1. 建立 todo list 追蹤進度
2. 判斷需求類型：
   • 新功能：「幫我加一個下一頁按鈕」
   • 修改功能：「把 menu 改成可拖曳」
   • 行為不對：「click 沒反應」「動畫跑太快」
3. 如果需求不清楚，詢問用戶：
   • 要做什麼？
   • 影響哪些元件？
   • 預期行為是什麼？

---

Phase 2: Codebase Exploration

Goal: 理解相關程式碼結構

Required References:

• references/component-rules.md - 元件命名規則與類型定義
• references/createjs-web-patterns.md - CreateJS 架構模式（當需要理解 Container/MovieClip 結構時）

Actions:

1. 啟動2-3個 component-analyzer agent 分析相關元件
2. Agent 任務範例：
   • 「分析 menu_1 到 menu_14 的元件結構、層級關係、事件綁定」
   • 「分析 SceneManager 如何管理場景切換」
3. Agent 須回傳：
   • 元件層級圖
   • 元件類型對照表
   • Frame label 定義
   • 關鍵檔案清單（5-10 個）
4. 讀取 agent 回報的關鍵檔案
5. 整理發現，向用戶確認理解是否正確
6. 更新 Project Memory

---

Phase 3: Clarifying Questions

Goal: 在設計前釐清所有模糊之處

CRITICAL: 這是最重要的階段之一，不可跳過。

Required References:

• references/component-rules.md - 元件類型詢問模板、state/scene 確認流程

Actions:

1. 回顧 codebase 分析結果和原始需求
2. 根據 component-rules.md 識別需要確認的元件定義：
   • 不符合 {type}_{name} 規則的元件類型
   • State 元件的各 frame 意義
   • Scene 數量和用途
   • 缺少 frame label 的元件
3. 識別其他未明確的面向：
   • 邊界情況（edge cases）
   • 錯誤處理
   • 整合點
   • 設計偏好
   • 效能需求
4. 將所有問題以清晰、有組織的列表呈現給用戶
5. 等待用戶回答後再進入下一階段
6. 將確認的資訊儲存到 Project Memory

若用戶說「你覺得怎樣就怎樣」，請提供你的建議並取得明確確認。

---

Phase 4: Architecture Design（僅當「新功能」或「修改功能」時）

Goal: 設計多種實作方案，提供不同權衡選擇

Actions:

1. 根據 codebase 分析結果，設計 2-3 種實作方案：
   • 最小變動方案：改動最少、最大程度重用現有程式碼
   • 乾淨架構方案：可維護性優先、優雅抽象
   • 務實平衡方案：速度與品質兼顧
2. 考量因素：小修改 vs 大功能、緊迫性、複雜度、專案脈絡
3. 向用戶呈現：
   • 每種方案的簡要說明
   • 權衡比較
   • 你的建議及理由
   • 具體實作差異
4. 詢問用戶偏好哪種方案

---

Phase 5: Issue Analysis（僅當「行為不對」時）

Goal: 定位問題根源

Required References:

• references/common-mistakes.md - 常見錯誤模式診斷（功能性錯誤：TypeError、scope 問題、初始化順序）
• references/common-patterns.md - 效能反模式診斷（效能問題：memory leak、event listener leak）

Actions:

1. 啟動 issue-finder agent
2. Agent 任務範例：
   • 「用戶反映 menu_1 的 click 沒反應，根據 component-analyzer 的分析，找出問題根源」
3. Agent 須回傳：
   • 問題位置（file:line）
   • 根本原因
   • 信心度（需 ≥ 70）
   • 修復建議
4. 向用戶報告問題原因
5. 確認用戶是否要修復

---

Phase 6: Implementation

Goal: 執行開發或修復

DO NOT START WITHOUT USER APPROVAL

Required References:

• references/best-practices.md - 程式碼組織、狀態管理、初始化順序規範
• references/fix-strategies.md - 具體修復程式碼範例（當修復問題時）
• references/createjs-web-patterns.md - CreateJS API 使用模式（當開發新功能時）

Actions:

1. 等待用戶明確同意
2. 啟動 createjs-developer agent
3. Agent 任務範例：
   • 「根據 CreateJS 慣例，為 SceneManager 加入下一頁按鈕功能」
   • 「修復 menu_1 的 mouseChildren 問題」
4. Agent 須遵循：
   • 初始化順序（addChild → gotoAndStop → events）
   • Scope 保留（var self = this 或 .on() scope 參數）
   • Cleanup 模式
   • 優先使用 frame label
5. 更新 todo 進度

---

Phase 7: Quality Review

Goal: 確保程式碼品質

Required References:

• references/best-practices.md - 審查清單、最佳實踐標準
• references/common-patterns.md - 效能反模式檢查

Actions:

1. 啟動 code-reviewer agent
2. 審查重點：
   • 最佳實踐（JS 分離、State 管理）
   • CreateJS 慣例遵循
   • 程式碼組織
   • 命名規範
3. Agent 須回傳：
   • 問題清單（信心度 ≥ 80）
   • 嚴重程度分類
   • 修復建議
4. 向用戶報告審查結果
5. 詢問用戶：立即修復 / 稍後修復 / 維持現狀

---

Phase 8: Summary

Goal: 總結完成的工作

Actions:

1. 標記所有 todo 完成
2. 總結：
   • 完成了什麼
   • 修改了哪些檔案
   • 關鍵決策
   • 建議的後續步驟
3. 更新 Project Memory（如有新發現）

---

效能優化

開發完成後，可使用 animate-performance skill 進行效能檢查（觸發語句：「優化效能」、「檢查效能」）。