overdrive

概覽

什麼是 overdrive？

overdrive 技能專為想要將網頁介面推向非凡境界的前端開發者設計。它運用先進的瀏覽器功能——如著色器、彈簧物理、滾動驅動的揭示效果，以及 60fps 動畫——打造出具電影感、互動性強且技術挑戰高的使用者體驗。如果你的目標是以非凡的前端效果震撼用戶，或處理複雜的 UI 挑戰（例如渲染龐大資料表或變形對話框），overdrive 提供了實作流程與指引，助你達成目標。

誰適合使用 overdrive？

• 追求高衝擊力、視覺震撼介面的前端工程師
• 希望實現進階 UI/UX 模式的 JavaScript 開發者
• 建立創意作品集、產品展示或任何以「非凡」為目標的團隊
• 需要超越標準 UI 函式庫，打造令人難忘體驗的任何人

overdrive 解決的問題

• 創造具電影感且互動性強的介面
• 實作高效能動畫與過渡效果
• 處理具即時回饋的複雜 UI 狀態
• 避免在打造雄心勃勃的前端功能時常見的反模式

使用說明

安裝步驟

1. 使用以下指令安裝 overdrive 技能：

   npx skills add https://github.com/pbakaus/impeccable --skill overdrive

2. 從 SKILL.md 檔案開始，了解技能的理念與需求。

3. 查看輔助文件，如 README.md、AGENTS.md、metadata.json，以及任何 rules/、resources/、references/ 或 scripts/ 資料夾，獲取更多背景與實作細節。

準備清單

• 先執行 /frontend-design： overdrive 依賴穩固的設計脈絡。使用 Context Gathering Protocol 明確專案目標，避免錯誤套用效果。
• 先提案再開發： 實作前思考 2-3 種不同方案，確保解決方案符合專案風格，避免不必要的複雜度。
• 透過瀏覽器自動化反覆測試： 早期且頻繁地在真實瀏覽器中測試雄心勃勃的功能，保持效能與精緻度。

適應你的專案

• 不要照抄工作流程。請根據你的程式庫、工具與限制調整指引與模式，以達最佳效果。

重要檔案一覽

• SKILL.md（從這裡開始）
• README.md（提供更廣泛的背景）
• AGENTS.md、metadata.json，以及任何規則或腳本檔案，了解實作細節

常見問題

什麼時候該使用 overdrive？

當你的專案需要非凡的前端體驗，例如創意作品集、產品展示，或任何以技術雄心與用戶衝擊為首要目標的介面時，適合使用 overdrive。避免用於標準管理面板或以簡潔為主的情境。

overdrive 與其他前端技能有何不同？

overdrive 不僅是視覺效果，更是充分發揮瀏覽器能力，打造真正特別的介面。它強調以脈絡為導向的設計、效能與技術卓越。

如何避免在 overdrive 中過度使用效果？

始終從收集設計脈絡與提出多種方案開始。某些在特定脈絡下看來非凡的效果，在其他情境可能會分散注意力。利用 overdrive 的準備步驟，確保實作符合專案目標。

哪裡可以找到更多細節？

打開程式庫的 Files 分頁，探索完整檔案結構，包括巢狀參考與輔助腳本。從 SKILL.md 開始，獲得最相關的指引。