Case Study: Developing a Svelte Todo App

Project Background

This case study demonstrates how to use Superpowers' subagent-driven-development skill to build a complete web application. The project is a Svelte Todo application featuring:

• Task list display
• Add/delete/complete tasks
• Data persistence
• Responsive design

Workflow Demonstration

Phase 1: Design (brainstorming)

Trigger: Need to develop a task management application

AI Behavior:

• Explore requirements: What features are needed? Who are the users?
• Technology selection: Svelte vs React? Local storage vs backend API?
• Design document: docs/design.md

Design Document Excerpt:

# Todo App Design

## Core Features
- Add task
- Complete task (checkbox)
- Delete task
- Task count

## Tech Stack
- Svelte (lightweight reactive framework)
- LocalStorage (data persistence)

## Component Structure
- App.svelte - Main container
- TodoList.svelte - Task list
- TodoItem.svelte - Single task
- AddTodo.svelte - Add form

Phase 2: Planning (writing-plans)

AI breaks down design into independent tasks:

## Task 1: Project Initialization
- Files: `package.json`, `rollup.config.js`
- Verification: `npm run dev` starts successfully

## Task 2: Create Base Components
- Files: `src/App.svelte`
- Verification: Page displays "Todo App" title

## Task 3: Implement Task List
- Files: `src/TodoList.svelte`, `src/TodoItem.svelte`
- Verification: Displays 3 hardcoded tasks

## Task 4: Add Task Feature
- Files: `src/AddTodo.svelte`
- Verification: Can add new tasks

## Task 5: Complete and Delete
- Files: Update related components
- Verification: Check and delete functions work

## Task 6: Data Persistence
- Files: `src/stores/todos.js`
- Verification: Tasks persist after page refresh

Phase 3: Subagent-Driven Development

How the subagent-driven-development skill works:

┌─────────────┐
│  Main       │
│  Session    │
│  (Coordinator)│
└──────┬──────┘
       │
       ├──► Task 1 ──► Spec Review ──► Code Review ──► ✓
       │
       ├──► Task 2 ──► Spec Review ──► Code Review ──► ✓
       │
       ├──► Task 3 ──► Spec Review ──► ✗ ──► Fix ──► ✓
       │
       └──► ...

Each task's workflow:

1. Subagent receives task description
2. Implements functionality
3. Spec Review: Checks alignment with plan
4. Code Review: Checks code quality
5. Passes, then continue to next task

Phase 4: Verification

Verification Checklist:

• [ ] All tasks completed as planned
• [ ] Functional tests pass
• [ ] Code review has no critical issues
• [ ] Documentation updated

Phase 5: Completion

Git Worktree Usage:

# Create isolated workspace
git worktree add ../todo-feature feature/todo-app

# Develop in isolated environment
cd ../todo-feature

# Merge after completion
git worktree remove ../todo-feature

Key Code

Svelte Store (State Management)

// 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 Component

<!-- 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 Component

<!-- 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>

Key Learning Points

1. Subagent-Driven Development Flow

• Tasks automatically dispatched to subagents
• Two-stage review ensures quality
• Failed tasks automatically retry

2. Multi-Agent Collaboration

• Main session coordinates
• Subagents focus on single tasks
• Review agents validate independently

3. Git Worktree Usage

• Isolated development environments
• Parallel feature development
• Safe branch management

4. TDD Combined with Review

• Spec Review: Feature alignment
• Code Review: Code quality
• Double guarantee

Extension Exercises

1. Add Categories: Add tags/categories for tasks
2. Due Dates: Add task deadlines
3. Drag & Drop: Implement task drag-to-reorder
4. Cloud Sync: Add backend API synchronization

Related Skills

• subagent-driven-development - Subagent-driven development
• brainstorming - Requirements exploration and design
• writing-plans - Task breakdown
• using-git-worktrees - Git Worktree usage
• finishing-a-development-branch - Branch completion workflow