overdrive

概覽

什麼是 overdrive？

overdrive 是一套為團隊與開發者打造的前端開發技能，專注於將網頁介面推向非凡境界。它強調技術挑戰性高的實作——例如著色器、彈簧物理、滾動驅動的揭示效果，以及流暢的 60fps 動畫。overdrive 利用瀏覽器的完整能力，創造令人驚豔、印象深刻且真正非凡的使用者體驗。

誰適合使用 overdrive？

此技能非常適合前端工程師、創意開發者與產品團隊，目標是打造出色的網頁體驗。無論你是在打造需要吸睛的作品集、能輕鬆處理龐大資料的儀表板，或是擁有電影級轉場效果的產品，overdrive 都能提供相應的工作流程與思維模式，助你達成目標。

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 技能以收集設計脈絡，避免反模式。如果尚無設計脈絡，請先執行 /teach-impeccable。
• 先提案再開發： 始終考慮多種技術方向，並驗證「非凡」在你的專案中具體意義。某些在一個情境中令人驚豔的功能，在另一個情境可能不合適。
• 利用瀏覽器自動化反覆調整： 使用瀏覽器自動化工具測試並優化你的雄心功能，確保效能與可用性。
• 靈活調整，不是照搬： 將 overdrive 工作流程視為靈感來源，根據專案獨特需求與限制做出調整。

建議預覽檔案

• SKILL.md（從這裡開始，了解核心理念與工作流程）

常見問題

什麼時候應該使用 overdrive？

當你的專案需要一個突出且非凡的前端體驗時，無論是進階動畫、即時回饋，或是技術挑戰性高的 UI 元素，都適合使用 overdrive。它最適合以「非凡」為明確目標的專案。

overdrive 僅限於視覺效果嗎？

不是。雖然 overdrive 包含像著色器和動畫等視覺上令人印象深刻的技術，但同樣重視技術卓越，例如處理大量資料、效能優化，以及提供流暢的使用者互動。

使用 overdrive 有什麼先決條件？

你應具備紮實的前端開發與 JavaScript 基礎，理想狀況下有 React 等框架經驗。熟悉瀏覽器 API 與效能優化也很推薦。

如何確保我使用 overdrive 是恰當的？

務必先收集專案脈絡。某些介面中感覺非凡的設計，在其他介面可能不合適。利用提供的脈絡收集流程，並在實作前提出多種方案。

我在哪裡可以找到更多細節？

打開此專案的 Files 標籤，瀏覽完整檔案結構，包括巢狀參考與輔助腳本，深入了解內容。