仕様駆動開発を支える Spec Kit を試してみた

curl -LsSf https://astral.sh/uv/install.sh | sh

uvx --from git+https://github.com/github/spec-kit.git specify init <PROJECT_NAME>

.
├── .claude
│   └── commands
│       ├── plan.md
│       ├── specify.md
│       └── tasks.md
├── memory
│   ├── constitution_update_checklist.md
│   └── constitution.md
├── scripts
│   ├── check-task-prerequisites.sh
│   ├── common.sh
│   ├── create-new-feature.sh
│   ├── get-feature-paths.sh
│   ├── setup-plan.sh
│   └── update-agent-context.sh
└── templates
    ├── agent-file-template.md
    ├── plan-template.md
    ├── spec-template.md
    └── tasks-template.md

/specify 新しい TODO 管理アプリケーション「TaskFlow」を作成する。プロジェクトの背景は...

新しい TODO 管理アプリケーション「TaskFlow」を作成する。
 
### 1. プロジェクトの背景と目的
 
**なぜ構築するのか：**
- **個人の生産性向上**: 日々のタスクを効率的に管理し、重要なことを忘れないようにする
- **認知的負荷の軽減**: 頭の中で覚えておく必要をなくし、創造的な作業に集中できるようにする
- **達成感の可視化**: 完了したタスクを記録し、進捗を実感できるようにする
- **優先順位の明確化**: 複数のタスクから最も重要なものを識別し、効果的な時間配分を支援する
 
### 2. 何を構築するのか
 
**コア機能要件：**
 
#### 基本的なタスク管理
- タスクの作成、編集、削除機能
- タスクのタイトルと詳細説明の記入
- タスクの完了/未完了状態の切り替え
- タスクの作成日時と更新日時の自動記録
 
#### 組織化機能
- カテゴリーまたはプロジェクトによるタスクのグループ化
- タグ付けによる柔軟な分類
- 期限日の設定と期限切れタスクの強調表示
- 優先度レベル（高・中・低）の設定
 
#### 検索とフィルタリング
- キーワードによるタスク検索
- ステータス（完了/未完了）によるフィルター
- カテゴリー、タグ、優先度によるフィルター
- 期限（今日、今週、期限切れ）によるフィルター
 
#### ユーザビリティ機能
- 一括選択と一括操作（削除、完了マーク）
- キーボードショートカット対応
- レスポンシブデザイン（PC、タブレット、スマートフォン対応）
 
### 3. 技術的要件
 
**データ管理：**
- ローカルストレージでのデータ保存
 
**アクセシビリティ：**
- WCAG 2.1 AA準拠
 
### 4. ユーザーペルソナ
 
**主要ターゲット：**
- **ビジネスプロフェッショナル**: 複数のプロジェクトを並行管理
- **学生**: 課題と試験の期限管理
- **フリーランサー**: クライアントワークとプライベートタスクの両立
- **一般ユーザー**: 日常の買い物リストや家事の管理
 
### 5. 成功指標
 
- ユーザーの70%が週3回以上アプリを使用
- タスク完了率が導入前と比較して30%向上
- ユーザー満足度スコア4.0以上（5段階評価）
- 平均セッション時間5分以内での主要タスク完了

# Feature Specification: TaskFlow TODO Management Application
 
**Feature Branch**: `001-todo-taskflow-1`  
**Created**: 2025-09-07  
**Status**: Draft  
**Input**: User description: "新しい TODO 管理アプリケーション「TaskFlow」を作成する。
 
### 1. プロジェクトの背景と目的
 
**なぜ構築するのか：**
- **個人の生産性向上**: 日々のタスクを効率的に管理し、重要なことを忘れないようにする
- **認知的負荷の軽減**: 頭の中で覚えておく必要をなくし、創造的な作業に集中できるようにする
- **達成感の可視化**: 完了したタスクを記録し、進捗を実感できるようにする
- **優先順位の明確化**: 複数のタスクから最も重要なものを識別し、効果的な時間配分を支援する
 
### 2. 何を構築するのか
 
**コア機能要件：**
 
#### 基本的なタスク管理
- タスクの作成、編集、削除機能
- タスクのタイトルと詳細説明の記入
- タスクの完了/未完了状態の切り替え
- タスクの作成日時と更新日時の自動記録
 
#### 組織化機能
- カテゴリーまたはプロジェクトによるタスクのグループ化
- タグ付けによる柔軟な分類
- 期限日の設定と期限切れタスクの強調表示
- 優先度レベル（高・中・低）の設定
 
#### 検索とフィルタリング
- キーワードによるタスク検索
- ステータス（完了/未完了）によるフィルター
- カテゴリー、タグ、優先度によるフィルター
- 期限（今日、今週、期限切れ）によるフィルター
 
#### ユーザビリティ機能
- 一括選択と一括操作（削除、完了マーク）
- キーボードショートカット対応
- レスポンシブデザイン（PC、タブレット、スマートフォン対応）
 
### 3. 技術的要件
 
**データ管理：**
- ローカルストレージでのデータ保存
 
**アクセシビリティ：**
- WCAG 2.1 AA準拠
 
### 4. ユーザーペルソナ
 
**主要ターゲット：**
- **ビジネスプロフェッショナル**: 複数のプロジェクトを並行管理
- **学生**: 課題と試験の期限管理
- **フリーランサー**: クライアントワークとプライベートタスクの両立
- **一般ユーザー**: 日常の買い物リストや家事の管理
 
### 5. 成功指標
 
- ユーザーの70%が週3回以上アプリを使用
- タスク完了率が導入前と比較して30%向上
- ユーザー満足度スコア4.0以上（5段階評価）
- 平均セッション時間5分以内での主要タスク完了"
 
## Execution Flow (main)
```
1. Parse user description from Input
   → Parsed: Comprehensive TODO app with productivity focus ✓
2. Extract key concepts from description
   → Actors: Business professionals, students, freelancers, general users
   → Actions: Create, edit, delete, organize, search, filter tasks
   → Data: Tasks, categories, tags, priorities, due dates
   → Constraints: Local storage only, WCAG 2.1 AA compliance
3. For each unclear aspect:
   → [NEEDS CLARIFICATION: Keyboard shortcuts - which specific shortcuts are required?]
   → [NEEDS CLARIFICATION: Bulk operations - what is the maximum number of tasks that can be selected at once?]
4. Fill User Scenarios & Testing section ✓
5. Generate Functional Requirements ✓
6. Identify Key Entities ✓
7. Run Review Checklist
   → WARN "Spec has uncertainties" - 2 clarification items marked
8. Return: SUCCESS (spec ready for planning with minor clarifications)
```
 
---
 
## ⚡ Quick Guidelines
- ✅ Focus on WHAT users need and WHY
- ❌ Avoid HOW to implement (no tech stack, APIs, code structure)
- 👥 Written for business stakeholders, not developers
 
---
 
## User Scenarios & Testing *(mandatory)*
 
### Primary User Story
A user opens TaskFlow to manage their daily work and personal tasks. They create new tasks with titles and descriptions, organize them by categories and priorities, set due dates, and mark completed tasks as done. They can quickly find specific tasks using search and filters, and perform bulk operations to efficiently manage multiple tasks at once.
 
### Acceptance Scenarios
1. **Given** a user has no existing tasks, **When** they create a new task with title "Complete project report" and due date "2025-09-10", **Then** the task appears in their task list with the specified details and status "not completed"
 
2. **Given** a user has multiple tasks in different categories, **When** they apply a filter for "Work" category, **Then** only tasks in the Work category are displayed
 
3. **Given** a user has completed several tasks, **When** they view their task list, **Then** completed tasks are visually distinguished from incomplete tasks
 
4. **Given** a user has tasks with various priorities, **When** they sort by priority, **Then** high priority tasks appear before medium and low priority tasks
 
5. **Given** a user has overdue tasks, **When** they view their task list, **Then** overdue tasks are highlighted or marked distinctly
 
### Edge Cases
- What happens when a user tries to create a task with no title?
- How does the system handle tasks with due dates in the past?
- What occurs when local storage is full and cannot store new tasks?
- How does the system behave when a user tries to delete all tasks at once?
- What happens when search returns no results?
 
## Requirements *(mandatory)*
 
### Functional Requirements
- **FR-001**: System MUST allow users to create tasks with title and optional description
- **FR-002**: System MUST allow users to edit existing task titles and descriptions
- **FR-003**: System MUST allow users to delete tasks individually or in bulk
- **FR-004**: System MUST track and display task completion status (completed/not completed)
- **FR-005**: System MUST automatically record creation and last modified timestamps for each task
- **FR-006**: System MUST allow users to assign categories to tasks for organization
- **FR-007**: System MUST allow users to add multiple tags to tasks for flexible classification
- **FR-008**: System MUST allow users to set due dates for tasks
- **FR-009**: System MUST highlight or mark tasks that are past their due date
- **FR-010**: System MUST allow users to assign priority levels (high, medium, low) to tasks
- **FR-011**: System MUST provide keyword search functionality across task titles and descriptions
- **FR-012**: System MUST allow filtering tasks by completion status
- **FR-013**: System MUST allow filtering tasks by category, tags, and priority level
- **FR-014**: System MUST allow filtering tasks by due date ranges (today, this week, overdue)
- **FR-015**: System MUST support bulk selection of tasks for mass operations
- **FR-016**: System MUST support keyboard navigation and shortcuts for task operations [NEEDS CLARIFICATION: which specific shortcuts are required?]
- **FR-017**: System MUST display properly on desktop computers, tablets, and mobile phones
- **FR-018**: System MUST persist all task data using local browser storage
- **FR-019**: System MUST meet WCAG 2.1 AA accessibility standards
- **FR-020**: System MUST limit bulk operations to prevent performance issues [NEEDS CLARIFICATION: what is the maximum number of tasks that can be selected at once?]
 
### Key Entities
- **Task**: Represents a single item to be completed, with title, description, completion status, creation date, modification date, due date, priority, category, and tags
- **Category**: Represents a grouping mechanism for related tasks (e.g., "Work", "Personal", "Shopping")
- **Tag**: Represents flexible labels that can be applied to tasks for cross-category organization
- **Priority Level**: Enumerated value representing task importance (High, Medium, Low)
 
---
 
## Review & Acceptance Checklist
*GATE: Automated checks run during main() execution*
 
### Content Quality
- [x] No implementation details (languages, frameworks, APIs)
- [x] Focused on user value and business needs
- [x] Written for non-technical stakeholders
- [x] All mandatory sections completed
 
### Requirement Completeness
- [ ] No [NEEDS CLARIFICATION] markers remain (2 items need clarification)
- [x] Requirements are testable and unambiguous  
- [x] Success criteria are measurable
- [x] Scope is clearly bounded
- [x] Dependencies and assumptions identified
 
---
 
## Execution Status
*Updated by main() during processing*
 
- [x] User description parsed
- [x] Key concepts extracted
- [x] Ambiguities marked
- [x] User scenarios defined
- [x] Requirements generated
- [x] Entities identified
- [ ] Review checklist passed (pending clarification resolution)
 
---

キーボードショートカットは具体的に以下のようにしてください。
- 新しいタスクの作成: Ctrl+N (Windows) / Cmd+N (Mac)
- タスクの保存: Ctrl+S (Windows) / Cmd+S (Mac)
- 編集のキャンセル: Esc
- タスクの完了/未完了切り替え: Ctrl+D (Windows) / Cmd+D (Mac)
- タスクの削除: Ctrl+Del (Windows) / Cmd+Del (Mac)

一括操作で選択可能なタスクの最大数は 50 件としてください。

レビューと承認チェックリストを読み、機能仕様が基準を満たしている場合はチェックリストの各項目にチェックを入れてください。満たしていない場合は空欄のままにしておいてください。

⏺ ✅ レビューチェックリスト完了
 
  📋 チェック結果
 
  Content Quality:
  - ❌ No implementation details - 実装詳細が含まれています
    - Line 46: "ローカルストレージでのデータ保存"
    - Line 143: "System MUST persist all task data using local browser storage"
  - ✅ Focused on user value and business needs
  - ✅ Written for non-technical stakeholders
  - ✅ All mandatory sections completed
 
  Requirement Completeness:
  - ✅ No [NEEDS CLARIFICATION] markers remain
  - ✅ Requirements are testable and unambiguous
  - ✅ Success criteria are measurable
  - ✅ Scope is clearly bounded
  - ✅ Dependencies and assumptions identified
 
  🔧 修正が必要な項目
 
  実装詳細（ローカルストレージ）を削除し、データ永続化の要件をより抽象的に記述する必要があります。

データ永続化の要件をより抽象的に記述し、実装詳細（ローカルストレージ）を削除してください。デバイス間でデータを同期する必要はありません。

/plan 以下の技術スタックで実装計画を作成してください。
- Next.js（App Router）
- TypeScript
- Tailwind CSS
- LocalStorage

フェーズ 0 - 調査：
 
/specs/001-todo-taskflow-1/research.md - 技術スタック分析とアーキテクチャの決定
 
フェーズ 1 - 設計：
 
/specs/001-todo-taskflow-1/data-model.md - 検証ルール付きの完全なTypeScriptデータモデル
/specs/001-todo-taskflow-1/contracts/task-service.ts - タスク管理サービスインターフェース
/specs/001-todo-taskflow-1/contracts/storage-service.ts - LocalStorage永続化インターフェース
/specs/001-todo-taskflow-1/contracts/ui-hooks.ts - UIコンポーネント用Reactフックインターフェース
/specs/001-todo-taskflow-1/quickstart.md - 包括的テストおよび検証ガイド
 
フェーズ 2 - タスク計画：
 
plan.mdに記録された実装戦略

- Tailwind CSS のバージョンは 4.0 以降を使用し、CSS ファイルで設定管理を行う CSS First Configurations を採用してください。
- テスティングフレームワークは Jest ではなく Vitest を使用してください。

今度は実装計画と実装詳細ファイルを監査してもらいたいと思います。
これらを読み通して、読むことで明らかになる、あなたが行う必要のあるタスクの順序があるかどうかを判断する視点で確認してください。ここに十分な情報があるかどうか分からないからです。例えば、コア実装を見ると、コア実装や改良の各ステップを進める際に、情報を見つけることができる実装詳細の適切な場所を参照できると有用でしょう。

ページ構造を明確にするために、以下のページを追加してください。
- / (ホームページ): アプリの概要とナビゲーション
- /tasks (タスク一覧ページ): すべてのタスクのリスト
- /tasks/[id] (タスク詳細ページ): 個々のタスクの詳細

/tasks

# Tasks: TaskFlow TODO Management Application
 
**Input**: Design documents from `/Users/xxx/sandbox/spec-driven-todo-app/specs/001-todo-taskflow-1/`
**Prerequisites**: plan.md, research.md, data-model.md, contracts/, page-structure.md, quickstart.md
 
...
 
## Phase 3.1: Setup
- [ ] **T001** Create Next.js 14+ project with App Router and TypeScript at repository root
- [ ] **T002** Install and configure dependencies: Tailwind CSS 4.0+, uuid, @types/uuid, Vitest, @testing-library/react, @testing-library/jest-dom, jsdom
- [ ] **T003** [P] Configure Tailwind CSS 4.0 with CSS First Configurations in `app/globals.css`
- [ ] **T004** [P] Configure Vitest testing environment with `vitest.config.ts` and `test-setup.ts`
- [ ] **T005** [P] Set up basic Next.js App Router structure: `app/layout.tsx`, `app/page.tsx`
 
## Phase 3.2: Tests First (TDD) ⚠️ MUST COMPLETE BEFORE 3.3
**CRITICAL: These tests MUST be written and MUST FAIL before ANY implementation**
 
### Contract Tests (Parallel Execution)
- [ ] **T006** [P] Contract test for TaskService interface in `tests/contract/task-service.test.ts`
- [ ] **T007** [P] Contract test for StorageService interface in `tests/contract/storage-service.test.ts` 
- [ ] **T008** [P] Contract test for UI hooks interfaces in `tests/contract/ui-hooks.test.ts`

 
> タスクを実行してください
 
⏺ タスクの実行を開始します。まず最初の設定フェーズ（T001-T0
  05）から始めます。
 
⏺ Update Todos
  ⎿  ☐ T001: Create Next.js 14+ project with App Router and
       TypeScript
     ☐ T002: Install and configure dependencies
     ☐ T003: Configure Tailwind CSS 4.0 with CSS First
       Configurations
     ☐ T004: Configure Vitest testing environment
     ☐ T005: Set up basic Next.js App Router structure