はじめに
社内のAI勉強会で知ったので、試してみました。
Superpowers の真価は 「AIに勝手な推測をさせないこと」らしいです。
Superpowers のインストール
前提
- Claude Codeはインストール済み
- 作業ディレクトリ作成済
mkdir superpowers
cd superpowers
Claude Code のセッション内で以下のコマンドを実行
/plugin install superpowers@claude-plugins-official
※インストールが完了したら、一度 /exit で終了し、再度 claude を起動して反映
Superpowers を有効にして起動
Superpowers は、プロジェクト開始時に「今からこのワークフローを使うぞ」と明示するのがベストプラクティス!
claude /using-superpowers
ブレインストーミング
/superpowers:brainstorming
とりあえず、簡単なWebのTODOリストを作ってみる
ブレスト
スペック
- /specs/todo-list-design.md
# TODO リスト — デザインドキュメント
**日付:** 2026-04-XX
**用途:** 個人タスク管理
**ステータス:** 承認済み
---
## 概要
ブラウザで直接開いて使えるシンプルな個人用TODOリスト。サーバー・ビルドツール不要。単一HTMLファイルで完結し、データはブラウザのlocalStorageに永続化する。
---
## アーキテクチャ
- **ファイル構成:** `index.html` 1ファイルのみ
- **HTML:** 入力フォームとリスト表示の構造
- **CSS:** インライン `<style>` タグでスタイリング
- **JS:** インライン `<script>` タグでロジック管理
- **データ永続化:** `localStorage` のキー `todos` にJSON配列で保存
¥```
localStorage["todos"] = [
{ "id": 1745071200000, "text": "牛乳を買う", "done": false },
{ "id": 1745071260000, "text": "メール返信", "done": true }
]
¥```
- `id` は追加時の `Date.now()` を使用（重複リスクが無視できるシングルユーザー用途のため）
---
## 機能一覧
| 機能 | 説明 |
|------|------|
| タスク追加 | テキスト入力＋「追加」ボタン（Enterキーでも追加可） |
| 完了チェック | チェックボックスでtoggle、完了済みはテキストに取り消し線 |
| タスク削除 | 各行に削除ボタン（×） |
| フィルター | 全件 / 未完了 / 完了済み の3タブ切り替え |
| 残件数表示 | 未完了タスクの件数を「N件残っています」で表示 |
| 完了済み一括削除 | ボタン1つで完了済みをまとめて削除 |
---
## データフロー
1. **ページ読み込み時:** `localStorage["todos"]` を読み込んでリストを復元
2. **追加時:** 入力値をtrim → 空なら無視 → 新アイテムを配列に追加 → localStorage保存 → UI更新
3. **完了toggle時:** 対象アイテムの`done`を反転 → localStorage保存 → UI更新
4. **削除時:** 対象アイテムを配列から除去 → localStorage保存 → UI更新
---
## エラーハンドリング
- 空のタスク名は追加しない（trim後に空チェック）
- `localStorage` が使用不可（プライベートブラウジング等）の場合はメモリ上のみで動作（サイレントフォールバック）
---
## 対象外（スコープ外）
- 複数デバイス間の同期
- 期限・優先度・カテゴリ
- チーム共有・コラボレーション
- バックエンドサーバー
実行計画
- /plans/todo-list.md
# TODO リスト 実装計画
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** ブラウザで直接開いて使えるシンプルな個人用TODOリストを単一HTMLファイルで実装する。
**Architecture:** `index.html` 1ファイルにHTML構造・CSSスタイル・JSロジックをインラインで記述する。データは `localStorage["todos"]` にJSON配列として永続化し、ページ再読み込み後も復元される。
**Tech Stack:** HTML5, CSS3, Vanilla JavaScript (ES6+), localStorage API
---
## ファイル構成
- **Create:** `index.html` — HTML構造・CSS・JSをすべて含む単一ファイル
---
### Task 1: HTML骨格とCSSスタイルの作成
**Files:**
- Create: `index.html`
- [ ] **Step 1: `index.html` を作成する**
¥```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO リスト</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f0f2f5;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 40px 16px;
}
.container {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
width: 100%;
max-width: 480px;
padding: 32px 24px;
height: fit-content;
}
h1 {
font-size: 1.8rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 24px;
text-align: center;
}
/* 入力フォーム */
.input-row {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.input-row input {
flex: 1;
padding: 10px 14px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
outline: none;
transition: border-color 0.2s;
}
.input-row input:focus { border-color: #4a90e2; }
.input-row button {
padding: 10px 18px;
background: #4a90e2;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.input-row button:hover { background: #357abd; }
/* フィルタータブ */
.filters {
display: flex;
gap: 4px;
margin-bottom: 16px;
}
.filters button {
flex: 1;
padding: 7px;
border: 2px solid #e0e0e0;
border-radius: 6px;
background: #fff;
font-size: 0.875rem;
cursor: pointer;
color: #666;
transition: all 0.2s;
}
.filters button.active {
border-color: #4a90e2;
color: #4a90e2;
font-weight: 600;
}
/* TODOリスト */
.todo-list {
list-style: none;
margin-bottom: 16px;
}
.todo-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
border-bottom: 1px solid #f0f0f0;
}
.todo-item:last-child { border-bottom: none; }
.todo-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #4a90e2;
}
.todo-item .text {
flex: 1;
font-size: 1rem;
color: #333;
}
.todo-item.done .text {
text-decoration: line-through;
color: #aaa;
}
.todo-item .delete-btn {
background: none;
border: none;
color: #ccc;
font-size: 1.2rem;
cursor: pointer;
padding: 0 4px;
transition: color 0.2s;
}
.todo-item .delete-btn:hover { color: #e74c3c; }
/* フッター */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
color: #888;
}
.footer .clear-btn {
background: none;
border: none;
color: #e74c3c;
font-size: 0.875rem;
cursor: pointer;
padding: 0;
}
.footer .clear-btn:hover { text-decoration: underline; }
.empty-message {
text-align: center;
color: #bbb;
padding: 24px 0;
font-size: 0.95rem;
}
</style>
</head>
<body>
<div class="container">
<h1>TODO リスト</h1>
<div class="input-row">
<input type="text" id="new-todo" placeholder="タスクを入力..." />
<button id="add-btn">追加</button>
</div>
<div class="filters">
<button class="active" data-filter="all">全件</button>
<button data-filter="active">未完了</button>
<button data-filter="done">完了済み</button>
</div>
<ul class="todo-list" id="todo-list"></ul>
<div class="footer">
<span id="count-label">0件残っています</span>
<button class="clear-btn" id="clear-done-btn">完了済みを削除</button>
</div>
</div>
<script>
// ここにJSを追加していく
</script>
</body>
</html>
¥```
- [ ] **Step 2: ブラウザで `index.html` を開いて外観を確認する**
¥```
open index.html # macOS
# または File > Open でブラウザに直接ドラッグ&ドロップ
¥```
期待: 白いカード、タイトル「TODO リスト」、入力フォーム、フィルタータブ、フッターが表示される。JSはまだ動かない。
- [ ] **Step 3: git リポジトリを初期化してコミット**
¥```bash
cd /Users/tazawa/AddMyArea/ai/claude/superpowers
git init
git add index.html
git commit -m "feat: add HTML skeleton and CSS styles"
¥```
---
### Task 2: データモデルとlocalStorage永続化
**Files:**
- Modify: `index.html` (`<script>` タグ内)
- [ ] **Step 1: `<script>` ブロックにデータ管理コードを追加する**
`// ここにJSを追加していく` を以下で置き換える:
¥```javascript
const STORAGE_KEY = 'todos';
function loadTodos() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
} catch {
return [];
}
}
function saveTodos(todos) {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
} catch {
// localStorage が使えない環境ではメモリのみで動作
}
}
let todos = loadTodos();
let currentFilter = 'all';
¥```
- [ ] **Step 2: ブラウザのコンソールで動作確認する**
ブラウザで `index.html` を開き、DevTools コンソール (F12) で確認:
¥```javascript
// コンソールに貼り付けて実行
console.log('todos:', todos);
// 期待: todos: []
¥```
- [ ] **Step 3: コミット**
¥```bash
git add index.html
git commit -m "feat: add data model and localStorage persistence"
¥```
---
### Task 3: タスク追加機能
**Files:**
- Modify: `index.html` (`<script>` タグ内)
- [ ] **Step 1: `render` 関数と `addTodo` 関数を追加する**
Task 2 のコードの後に追加:
¥```javascript
function render() {
const list = document.getElementById('todo-list');
const filtered = todos.filter(t => {
if (currentFilter === 'active') return !t.done;
if (currentFilter === 'done') return t.done;
return true;
});
if (filtered.length === 0) {
list.innerHTML = '<li class="empty-message">タスクがありません</li>';
} else {
list.innerHTML = filtered.map(t => `
<li class="todo-item ${t.done ? 'done' : ''}" data-id="${t.id}">
<input type="checkbox" ${t.done ? 'checked' : ''} onchange="toggleTodo(${t.id})">
<span class="text">${escapeHtml(t.text)}</span>
<button class="delete-btn" onclick="deleteTodo(${t.id})">×</button>
</li>
`).join('');
}
const activeCount = todos.filter(t => !t.done).length;
document.getElementById('count-label').textContent =
`${activeCount}件残っています`;
document.querySelectorAll('.filters button').forEach(btn => {
btn.classList.toggle('active', btn.dataset.filter === currentFilter);
});
}
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
function addTodo(text) {
const trimmed = text.trim();
if (!trimmed) return;
todos.push({ id: Date.now(), text: trimmed, done: false });
saveTodos(todos);
render();
}
// 追加ボタンとEnterキーのイベント
document.getElementById('add-btn').addEventListener('click', () => {
const input = document.getElementById('new-todo');
addTodo(input.value);
input.value = '';
input.focus();
});
document.getElementById('new-todo').addEventListener('keydown', e => {
if (e.key === 'Enter') document.getElementById('add-btn').click();
});
// 初回描画
render();
¥```
- [ ] **Step 2: ブラウザでタスク追加を確認する**
ブラウザをリロードし、以下を確認:
1. 入力欄にテキストを入力して「追加」ボタンをクリック → リストに表示される
2. Enterキーでも追加できる
3. 空のテキストは追加されない
4. ページをリロードしてもタスクが残っている（localStorage）
- [ ] **Step 3: コミット**
¥```bash
git add index.html
git commit -m "feat: add task creation with Enter key support"
¥```
---
### Task 4: 完了トグルと削除機能
**Files:**
- Modify: `index.html` (`<script>` タグ内)
- [ ] **Step 1: `toggleTodo` と `deleteTodo` 関数を追加する**
`render` 関数の前に追加:
¥```javascript
function toggleTodo(id) {
todos = todos.map(t => t.id === id ? { ...t, done: !t.done } : t);
saveTodos(todos);
render();
}
function deleteTodo(id) {
todos = todos.filter(t => t.id !== id);
saveTodos(todos);
render();
}
¥```
- [ ] **Step 2: ブラウザで完了・削除を確認する**
1. タスクのチェックボックスをクリック → テキストに取り消し線がつく
2. チェックボックスを再度クリック → 取り消し線が消える
3. 「×」ボタンをクリック → タスクが削除される
4. ページリロード後も状態が保持されている
- [ ] **Step 3: コミット**
¥```bash
git add index.html
git commit -m "feat: add toggle complete and delete task"
¥```
---
### Task 5: フィルター・件数表示・完了済み一括削除
**Files:**
- Modify: `index.html` (`<script>` タグ内)
- [ ] **Step 1: フィルター切り替えと完了済み一括削除のイベントを追加する**
`render()` の呼び出し（最終行）の前に追加:
¥```javascript
document.querySelectorAll('.filters button').forEach(btn => {
btn.addEventListener('click', () => {
currentFilter = btn.dataset.filter;
render();
});
});
document.getElementById('clear-done-btn').addEventListener('click', () => {
todos = todos.filter(t => !t.done);
saveTodos(todos);
render();
});
¥```
- [ ] **Step 2: ブラウザでフィルターと一括削除を確認する**
1. 複数のタスクを追加し、いくつかを完了にする
2. 「未完了」タブ → 未完了タスクのみ表示される
3. 「完了済み」タブ → 完了済みタスクのみ表示される
4. 「全件」タブ → すべて表示される
5. フッターの件数が未完了タスク数と一致する
6. 「完了済みを削除」ボタン → 完了済みがすべて削除される
- [ ] **Step 3: コミット**
¥```bash
git add index.html
git commit -m "feat: add filter tabs, count display, and clear completed"
¥```
---
### Task 6: 最終動作確認
**Files:**
- Read: `index.html`（変更なし）
- [ ] **Step 1: エッジケースを手動テストする**
ブラウザで以下をすべて確認:
| テストケース | 期待する動作 |
|---|---|
| 空文字を追加 | 追加されない |
| スペースのみを追加 | 追加されない |
| `<script>alert(1)</script>` を追加 | タグがエスケープされてテキストとして表示される |
| 全タスクを完了 → 「未完了」タブ | 「タスクがありません」と表示される |
| タスク0件のときフッター | 「0件残っています」と表示される |
| localStorage無効環境（シークレットモード等） | エラーなく動作する（メモリのみ） |
- [ ] **Step 2: コミット（変更があった場合のみ）**
¥```bash
git add index.html
git commit -m "fix: edge case handling"
¥```
---
## 完成後のファイル構成
¥```
index.html # アプリ本体（単一ファイル）
docs/
superpowers/
specs/todo-list-design.md
plans/todo-list.md
¥```
成果物
おわりに
MDファイルだけでは無法地帯になりがちなAIエージェントのフレームワークとして利用できそうです！
ただ、他のAIエージェントと同様にレビューする力が無いと、「想定とは違うモノ」が出来上がってリカバリーが大変になりそうですね。
さっそくプロジェクトでも「お試し」してみたいと思います！
参考（感謝）
- AIに聴きながら