建立待辦事應用 - React Todo App 實戰範例
本範例將展示如何使用 Superpowers 的各個 skills 來完成一個完整的開發任務：從零開始建立一個 React Todo 應用程式。
專案概述
目標：建立一個功能完整的待辦事應用
核心功能：
- 新增待辦事項目
- 標記項目為完成
- 刪除項目
- 本地儲存持久化
技術棧：React + TypeScript + Tailwind CSS
完整開發流程
第 1 步：使用 Brainstorming Skill 探索設計方案
觸發：
使用 brainstorming skill 探索 Todo 應用的功能設計和技術實作方案AI 回應摘要：
功能設計探索：
核心功能設計：
1. 簡潔的 UI 設計
2. 直觀的操作流程
3. 清晰的視覺回饋
技術方案探索：
方案一：Class Component + State
- 優點：熟悉的使用方式
- 缺點：程式碼較冗長
方案二：Hooks + useState
- 優點：程式碼簡潔、現代化
- 缺點：需要熟悉 Hooks
方案三：Redux + Toolkit
- 優點：狀態管理強大
- 缺點：對簡單應用過度工程
建議：使用方案二（Hooks + useState），對 Todo 應用來說足夠。第 2 步：使用 Writing Plans Skill 制定實作計畫
觸發：
使用 writing-plans skill 制定 Todo 應用的詳細實作計畫AI 回應摘要：
## 實作計畫
### 第 1 步：專案初始化（30 分鐘）
- 使用 Vite 建立 React + TypeScript 專案
- 安裝 Tailwind CSS
- 設定專案結構
### 第 2 步：建立核心組件（2 小時）
- TodoItem 組件（顯示單一待辦項目）
- TodoList 組件（管理項目列表）
- TodoInput 組件（新增項目輸入）
- App 組件（主應用容器）
### 第 3 步：實作狀態管理（1.5 小時）
- 使用 useState 管理項目列表
- 實作新增、刪除、切換狀態功能
- 本地儲存整合
### 第 4 步：樣式和優化（1 小時）
- 使用 Tailwind CSS 設計樣式
- 響應式設計
- 使用者體驗優化
### 第 5 步：測試和部署（30 分鐘）
- 功能測試
- 建置優化
- 部署到 Vercel/Netlify
## 驗收標準
- [ ] 可以新增待辦事項目
- [ ] 可以標記項目為完成
- [ ] 可以刪除項目
- [ ] 資料在頁面重新整理後保留
- [ ] 在 mobile 和 desktop 都正常運作
## 總時間估算
5.5 小時第 3 步：使用 Executing Plans Skill 實作功能
觸發：
使用 executing-plans skill 按照計畫實作 Todo 應用AI 回應摘要：
## 開始實作
### 第 1 步：專案初始化
執行專案設定...
### 第 2 步：建立核心組件
建立 TodoItem.tsx：
```typescript
interface Todo {
id: number;
text: string;
completed: boolean;
}
export default function TodoItem({ todo, onToggle, onDelete }: {
todo: Todo;
onToggle: (id: number) => void;
onDelete: (id: number) => void;
}) {
return (
<div className="flex items-center gap-3 p-3 bg-white rounded-lg shadow">
<input
type="checkbox"
checked={todo.completed}
onChange={() => onToggle(todo.id)}
className="w-5 h-5"
/>
<span className={`flex-1 ${todo.completed ? 'line-through text-gray-400' : ''}`}>
{todo.text}
</span>
<button
onClick={() => onDelete(todo.id)}
className="px-3 py-1 text-red-500 hover:text-red-700"
>
刪除
</button>
</div>
);
}建立 TodoList.tsx…（繼續其他組件）
### 第 4 步：使用 Test-Driven Development Skill 增加測試
**觸發**：使用 test-driven-development skill 為 Todo 應用寫測試
**AI 回應摘要**：TDD 開發流程
紅燈 1：新增功能測試
describe('TodoList', () => {
it('should add new todo', () => {
// 測試新增功能
});
it('should toggle todo completion', () => {
// 測試切換功能
});
it('should delete todo', () => {
// 測試刪除功能
});
});紅燈 2：實作最小可行程式碼
實作剛好能通過測試的程式碼…
紅燈 3：重構和優化
在測試保護下重構程式碼…
### 第 5 步：使用 Verification Before Completion Skill 驗證
**觸發**：使用 verification-before-completion skill 驗證 Todo 應用的實作結果
**AI 回應摘要**：驗證結果
✅ 功能驗證
- 新增功能：正常運作 ✓
- 刪除功能：正常運作 ✓
- 切換功能：正常運作 ✓
- 本地儲存：資料正確保留 ✓
✅ 響應式設計驗證
- Desktop 視圖：版面正常 ✓
- Mobile 視圖：版面適配 ✓
✅ 程式碼品質
- TypeScript 型別：無錯誤 ✓
- 組件結構：清晰合理 ✓
- 樣式組織：Tailwind CSS 正確使用 ✓
總結
Todo 應用已成功完成所有核心功能和驗收標準！
## 技術細節
### 專案結構todo-app/ ├── src/ │ ├── components/ │ │ ├── TodoItem.tsx │ │ ├── TodoList.tsx │ │ ├── TodoInput.tsx │ │ └── types.ts │ ├── App.tsx │ ├── main.tsx │ └── vite-env.d.ts ├── public/ ├── index.html ├── package.json └── tsconfig.json
### 關鍵程式碼片段
**狀態管理**：
```typescript
const [todos, setTodos] = useState<Todo[]>([]);
const addTodo = (text: string) => {
const newTodo: Todo = {
id: Date.now(),
text,
completed: false,
};
setTodos([...todos, newTodo]);
};本地儲存：
useEffect(() => {
localStorage.setItem('todos', JSON.stringify(todos));
}, [todos]);學到的挑戰和解決方案
挑戰 1：TypeScript 型別定義
解決方案：
interface Todo {
id: number;
text: string;
completed: boolean;
}挑戰 2：本地儲存的型別處理
解決方案：
useEffect(() => {
const saved = localStorage.getItem('todos');
if (saved) {
setTodos(JSON.parse(saved));
}
}, []);挑戰 3：響應式設計
解決方案：
<div className="max-w-md mx-auto p-4">
{/* Desktop 和 Mobile 都適用的設計 */}
</div>學到的經驗
Superpowers 的優勢
- 系統化開發流程：從 brainstorming 到 verification 的完整流程
- 技能可組合性：根據需求靈活組合不同 skills
- 品質保證：TDD 和 verification 確保程式碼品質
- 持續驗證：每個階段都有明確的驗收標準
流程優化建議
對於類似 Todo 應用的專案，建議流程：
- 簡化 brainstorming：如果需求明確，可以跳過或縮短
- 加重 TDD：對於功能明確的專案，TDD 特別有效
- 早期 verification：不要等到最後才驗證，每完成一個組件就驗證
延伸學習
完成本範例後，您可以：
完整專案連結
您可以在以下位置查看完整的專案程式碼：
- GitHub Repository：（專案程式碼連結）
- Live Demo：（線上展示連結）
開始使用 Superpowers 來提升您的開發效率！