Theme / v1.12.0
OpenSpec
規格驅動開發
Case studies
實戰範例
- 實戰範例 001:新增使用者註冊功能入門在現有會員系統中加入 Email 與密碼註冊功能,包含密碼強度驗證與資料庫寫入。
- 實戰範例 002:修復登入超時無提示錯誤中階修復當後端 Session 或 Token 超時後,使用者在前端操作無任何提示、介面卡死,且未自動跳轉至登入頁的體驗錯誤。
- 實戰範例 003:Class 轉 Hooks 語法重構中階將老舊的 React Class Component 重構為現代 Functional Component,使用 Hooks 重新實作生命週期,確保功能無損並優化效能。
- 實戰範例 004:新增天氣 API 與快取機制中階串接第三方天氣服務的 API,將結果快取以提升查詢效能,並在 API 失敗時提供降級策略。
- 實戰範例 005:為訂單資料表建立時間加上索引中階在 SQLite 資料庫的 orders 表中的 created_at 欄位上加上索引,以優化分頁查詢的效能。
- 實戰範例 006:圖片懶載入與響應式圖片優化進階實作圖片懶載入與響應式圖片,以大幅提升網頁的載入效能,改善 LCP 與 FCP 指標。
- 實戰範例 007:響應式導覽列與行動選單改版中階將專案的導覽列改版為響應式設計,在行動裝置上摺疊為漢堡選單,點擊展開為滑出式抽屜。
- 實戰範例 008:API 速率限制與安全防護進階為 API 路由實作速率限制 (Rate Limiting) 防護,阻擋惡意暴力破解或 DDoS 攻擊。
- 實戰範例 009:多語系切換與國際化實作進階為網站實作多語系支持(中文/英文),能自動偵測瀏覽器語言偏好,並提供手動語系切換。
- 實戰範例 010:為核心工具方法補上單元測試中階為專案的工具方法補上單元測試,提升測試覆蓋率,並整合至 Vitest 測試框架中。
- 實戰範例 011:以 opsx:new 漸進式新增 CLI --upper 旗標入門第一次使用 /opsx:new 與 /opsx:continue 漸進式工作流,為 Node.js CLI 工具新增把輸出轉大寫的 --upper 旗標,再用 /opsx:verify 逐條驗收。
- 實戰範例 012:在 CI 只輸出 OpenSpec Findings中階使用 v1.12.0 的 openspec validate --report findings,讓 PR CI 只顯示需要處理的問題,又保留原本的 exit-code 判定。