Kiro TDD workflow tool - Complete test-driven development workflow
npm install kiro-tdd-workflow🎯 基於測試驅動開發 (TDD) 的完整工作流程工具,支援多種現代前端框架。
- 📝 四階段 TDD 流程 - 設計 → 測試 → 實作 → 驗證
- 🎨 完整設計模板 - 標準化的功能設計文件
- 🧪 測試驅動開發 - 確保程式碼品質和功能正確性
- ⚙️ 開發準則整合 - DRY、KISS 原則,TypeScript 嚴格模式
- 🌍 國際化支援 - 完整的 i18n 規劃和實作
- 🎭 主題系統 - CSS 變數系統,支援 dark/light 主題
- 📱 響應式設計 - 移動端優先的設計原則
``bash在專案中初始化 TDD 工作流程
npx kiro-tdd-workflow init
$3
初始化完成後,使用
.kiro/dev/ai-initialization-guide.md 與你的 AI 助手確認設定:1. 複製
ai-initialization-guide.md 的內容
2. 貼給你的 AI 助手(如 Claude、ChatGPT、Kiro 等)
3. AI 會幫你檢查缺少的文件和配置
4. 根據建議完成剩餘設定
5. 開始使用 TDD 工作流程$3
`bash
1. 初始化工作流程
npx kiro-tdd-workflow init2. 設定框架類型(可選)
npx kiro-tdd-workflow setup
可以選擇預設模板或跳過建立空白文件
3. 與 AI 確認設定
將 .kiro/dev/ai-initialization-guide.md 內容複製給 AI 助手
4. 開始開發新功能
在你的 AI 助手中使用:
「設計 useNotification composable」5. 按照四階段流程開發
「撰寫測試」 # 階段 1
「實作功能」 # 階段 2
「執行測試」 # 階段 3
`TDD 四階段流程
$3
- 需求分析與方案討論
- 產生完整的功能設計文件
- 遵循所有開發準則和最佳實踐$3
- 根據設計文件撰寫 unit test
- 測試應該失敗(Red)
- 使用 Vitest 測試框架$3
- 根據設計文件實作功能
- 讓測試通過(Green)
- 遵循 DRY、KISS 原則$3
- 執行測試確認通過
- 重構優化程式碼(Refactor)
- 功能開發完成目錄結構
初始化後會在專案中建立以下結構:
`
.kiro/
├── dev/
│ ├── README.md # 工作流程說明
│ ├── tdd-workflow.md # 完整流程文件
│ ├── design-template.md # 設計文件模板
│ ├── ai-initialization-guide.md # AI 初始化指南
│ └── designs/ # 功能設計文件目錄
│ └── README.md
└── steering/
└── development.md # 開發準則與最佳實踐
`核心原則
$3
- 抽取共用邏輯到 composables
- 建立可重用的 UI 組件
- 統一的 API 呼叫方式
- 避免重複的樣式定義$3
- 優先選擇簡單直接的解決方案
- 避免過度抽象和複雜設計
- 組件職責單一,易於理解
- 函數長度 < 50 行,巢狀 < 3 層$3
- 避免使用 any 類型
- 完整的 Props 和 API 介面定義
- 明確的函數返回類型
- 適當的類型組織策略支援的技術棧
$3
- ✅ React + Next.js - App Router,Shadcn/ui 組件
- ✅ Vue 3 + Nuxt 3 - 組合式 API,SSR 支援
- ✅ Vue 3 + Vite - 輕量化開發環境
- ✅ TypeScript - 嚴格類型檢查,通用專案支援$3
- ✅ Shadcn/ui - React 生態系統
- ✅ Shadcn Vue - Vue 生態系統
- ✅ CSS 變數系統 - 主題化設計
- ✅ 響應式設計 - 移動端優先$3
- ✅ Vitest - Vue 專案快速測試
- ✅ Jest + Testing Library - React 專案測試
- ✅ @vue/test-utils - Vue 組件測試
- ✅ 測試驅動開發 - 完整 TDD 流程$3
- ✅ Pinia - Vue 3 官方狀態管理
- ✅ Zustand/Redux - React 狀態管理
- ✅ 組合式 API - 現代化狀態管理$3
- ✅ Vue i18n - Vue 多語言支援
- ✅ Next.js i18n - React 國際化
- ✅ 完整翻譯規劃 - 英文/中文支援使用範例
$3
`bash
階段 0: 設計
「設計一個 useNotification composable」
→ 建立 .kiro/dev/designs/use-notification-composable.md
階段 1: 測試
「撰寫測試」
→ 建立 composables/__tests__/useNotification.test.ts
階段 2: 實作
「實作功能」
→ 建立 composables/useNotification.ts
階段 3: 驗證
「執行測試」
→ 執行測試並確認通過
`$3
`bash
階段 0: 設計
「設計一個 useNotification hook」
→ 建立 .kiro/dev/designs/use-notification-hook.md
階段 1: 測試
「撰寫測試」
→ 建立 hooks/__tests__/useNotification.test.ts
階段 2: 實作
「實作功能」
→ 建立 hooks/useNotification.ts
階段 3: 驗證
「執行測試」
→ 執行測試並確認通過
`$3
`bash
階段 0: 設計
「設計一個 StatusBadge 組件」
→ 建立 .kiro/dev/designs/status-badge-component.md
階段 1: 測試
「撰寫測試」
→ React: components/__tests__/StatusBadge.test.tsx
→ Vue: components/UI/__tests__/StatusBadge.test.ts
階段 2: 實作
「實作功能」
→ React: npx shadcn-ui@latest add badge
→ Vue: npx shadcn-vue@latest add badge
→ 建立對應的組件檔案
階段 3: 驗證
「執行測試」
→ 執行測試並確認通過
`指令參考
$3
`bash
初始化專案
npx kiro-tdd-workflow init互動式設定
npx kiro-tdd-workflow setup顯示使用指南
npx kiro-tdd-workflow help-guide互動式選單
npx kiro-tdd-workflow
`$3
`bash
完整 TDD 流程
「設計 [功能名稱]」 # 階段 0: 設計規劃
「撰寫測試」 # 階段 1: 撰寫測試
「實作功能」 # 階段 2: 實作功能
「執行測試」 # 階段 3: 執行測試簡化流程(適用於簡單修復)
「修復 Bug:[問題描述]」
「調整 UI:[調整內容]」
「加入功能:[簡短描述]」其他指令
「調整設計」
「重構程式碼」
「查看設計文件」
`開發檢查清單
$3
- [ ] 遵循 DRY 原則(避免重複程式碼)
- [ ] 遵循 KISS 原則(保持簡單直觀)
- [ ] 使用 CSS 變數(禁止硬編碼顏色)
- [ ] 所有文字使用 i18n(t() 函數)
- [ ] TypeScript 類型定義完整
- [ ] 組件使用組合式 API
- [ ] 響應式設計(Media Queries)
- [ ] 函數職責單一,長度 < 50 行
- [ ] 避免過深巢狀(< 3 層)$3
- [ ] 優先檢查 Shadcn Vue 組件
- [ ] 檢查專案現有組件
- [ ] 使用 CSS 變數確保主題一致性
- [ ] 支援 dark/light 主題切換
- [ ] 組件 props < 10 個
- [ ] 可訪問性(a11y)考量貢獻指南
歡迎提交 Issue 和 Pull Request!
$3
`bash
安裝依賴
npm install開發模式
npm run dev建置
npm run build測試
npm test
`授權
MIT License - 詳見 LICENSE 文件。
相關連結
- GitHub Repository
- Issues
- 更新日誌
- 發布說明
支援
如有問題或建議:
1. 查看
.kiro/dev/tdd-workflow.md 完整流程說明
2. 參考 .kiro/dev/design-template.md 設計模板
3. 閱讀 .kiro/steering/development.md` 開發準則---
讓 TDD 成為你的開發習慣,提升程式碼品質和開發效率! 🚀