Superpowers

简体中文

English

简体中文

English

Appearance

案例：开发 Svelte Todo 应用 ​

项目背景 ​

本案例演示如何使用 Superpowers 的 subagent-driven-development 技能开发一个完整的 Web 应用。项目是一个 Svelte Todo 应用，包含：

  • 任务列表展示
  • 添加/删除/完成任务
  • 数据持久化
  • 响应式设计

工作流程演示 ​

阶段一：设计（brainstorming） ​

触发： 需要开发一个任务管理应用

AI 行为：

  • 探索需求：需要哪些功能？用户是谁？
  • 技术选型：Svelte vs React？本地存储 vs 后端 API？
  • 设计文档：docs/design.md

设计文档片段：

markdown
# Todo 应用设计

## 核心功能
- 添加任务
- 完成任务（勾选）
- 删除任务
- 任务计数

## 技术栈
- Svelte（轻量级响应式框架）
- LocalStorage（数据持久化）

## 组件结构
- App.svelte - 主容器
- TodoList.svelte - 任务列表
- TodoItem.svelte - 单个任务
- AddTodo.svelte - 添加表单

阶段二：计划（writing-plans） ​

AI 将设计分解为独立任务：

markdown
## Task 1: 项目初始化
- 文件：`package.json`, `rollup.config.js`
- 验证：`npm run dev` 启动成功

## Task 2: 创建基础组件
- 文件：`src/App.svelte`
- 验证：页面显示 "Todo App" 标题

## Task 3: 实现任务列表
- 文件：`src/TodoList.svelte`, `src/TodoItem.svelte`
- 验证：显示 3 个硬编码任务

## Task 4: 添加任务功能
- 文件：`src/AddTodo.svelte`
- 验证：可以添加新任务

## Task 5: 完成和删除
- 文件：更新相关组件
- 验证：勾选、删除功能正常

## Task 6: 数据持久化
- 文件：`src/stores/todos.js`
- 验证：刷新页面后任务保留

阶段三：子代理驱动开发 ​

subagent-driven-development 技能的工作方式：

┌─────────────┐
│  主会话     │
│  (协调者)   │
└──────┬──────┘
       │
       ├──► Task 1 ──► Spec Review ──► Code Review ──► ✓
       │
       ├──► Task 2 ──► Spec Review ──► Code Review ──► ✓
       │
       ├──► Task 3 ──► Spec Review ──► ✗ ──► 修复 ──► ✓
       │
       └──► ...

每个任务的流程：

  1. 子代理接收任务描述
  2. 实现功能
  3. Spec Review：检查是否符合计划
  4. Code Review：检查代码质量
  5. 通过则继续下一个任务

阶段四：验证 ​

验证清单：

  • [ ] 所有任务按计划完成
  • [ ] 功能测试通过
  • [ ] 代码审查无严重问题
  • [ ] 文档更新

阶段五：完成 ​

Git Worktree 使用：

bash
# 创建隔离工作区
git worktree add ../todo-feature feature/todo-app

# 在隔离环境中开发
cd ../todo-feature

# 完成后合并
git worktree remove ../todo-feature

关键代码 ​

Svelte Store（状态管理） ​

javascript
// src/stores/todos.js
import { writable } from 'svelte/store';
import { browser } from '$app/environment';

const initial = browser
  ? JSON.parse(localStorage.getItem('todos') || '[]')
  : [];

export const todos = writable(initial);

todos.subscribe(value => {
  if (browser) {
    localStorage.setItem('todos', JSON.stringify(value));
  }
});

export function addTodo(text) {
  todos.update(list => [...list, {
    id: Date.now(),
    text,
    completed: false
  }]);
}

export function toggleTodo(id) {
  todos.update(list => list.map(todo =>
    todo.id === id
      ? { ...todo, completed: !todo.completed }
      : todo
  ));
}

export function deleteTodo(id) {
  todos.update(list => list.filter(todo => todo.id !== id));
}

TodoList 组件 ​

svelte
<!-- src/lib/TodoList.svelte -->
<script>
  import { todos, toggleTodo, deleteTodo } from '../stores/todos.js';
  import TodoItem from './TodoItem.svelte';
</script>

<div class="todo-list">
  {#each $todos as todo (todo.id)}
    <TodoItem
      {todo}
      on:toggle={() => toggleTodo(todo.id)}
      on:delete={() => deleteTodo(todo.id)}
    />
  {:else}
    <p class="empty">No tasks yet. Add one above!</p>
  {/each}
</div>

<style>
  .todo-list {
    margin-top: 1rem;
  }
  .empty {
    color: #888;
    text-align: center;
  }
</style>

TodoItem 组件 ​

svelte
<!-- src/lib/TodoItem.svelte -->
<script>
  export let todo;
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>

<div class="todo-item" class:completed={todo.completed}>
  <input
    type="checkbox"
    checked={todo.completed}
    on:change={() => dispatch('toggle')}
  />
  <span>{todo.text}</span>
  <button on:click={() => dispatch('delete')}>×</button>
</div>

<style>
  .todo-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
  }
  .completed span {
    text-decoration: line-through;
    color: #888;
  }
  button {
    margin-left: auto;
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.5rem;
    cursor: pointer;
  }
</style>

关键学习点 ​

1. subagent-driven-development 流程 ​

  • 任务自动分发到子代理
  • 两阶段审查确保质量
  • 失败任务自动重试

2. 多代理协作 ​

  • 主会话负责协调
  • 子代理专注单一任务
  • 审查代理独立验证

3. Git Worktree 使用 ​

  • 隔离开发环境
  • 并行处理多个功能
  • 安全的分支管理

4. TDD 与审查结合 ​

  • Spec Review：功能对齐
  • Code Review：代码质量
  • 双重保障

扩展练习 ​

  1. 添加分类：为任务添加标签/分类功能
  2. 到期日期：添加任务截止日期
  3. 拖拽排序：实现任务拖拽重排
  4. 云同步：添加后端 API 同步

相关技能 ​