Requirements Document

Introduction

期限設定機能は、TODO アイテムに期限日時を設定し、期限が近づいている、または過ぎているタスクを視覚的に識別できるようにする機能です。この機能により、ユーザーはタスクの優先順位を明確にし、時間管理を改善できます。

この機能は、product.md で示された「Future Vision」の「期限管理」に対応するものであり、ユーザーが期限を設定し、期限が近いタスクを把握できるようにすることで、生産性向上を実現します。

Alignment with Product Vision

この機能は以下の点でプロダクトビジョンに整合します：

• ユーザーエクスペリエンスの向上: 期限の可視化により、タスクの緊急度を一目で把握可能
• 生産性の向上: 期限管理によって計画的なタスク遂行をサポート
• シンプルさの維持: 複雑な機能を避け、必要最小限の期限設定機能を提供
• プライバシーファースト: すべてのデータはローカルストレージに保存

Requirements

Requirement 1: 期限日時の設定

User Story: TODO 作成・編集時にユーザーとして、タスクに期限日時を設定したい。そうすることで、いつまでにタスクを完了すべきかを明確にできる。

Acceptance Criteria

1. WHEN ユーザーが TODO 作成フォームを開く THEN システムは期限日時入力フィールドを表示する SHALL
2. WHEN ユーザーが期限日時を入力せずに TODO を作成する THEN システムは期限なしの TODO を作成する SHALL
3. WHEN ユーザーが有効な期限日時を入力して TODO を作成する THEN システムは期限付きの TODO を作成し、ローカルストレージに保存する SHALL
4. WHEN ユーザーが既存の TODO を編集する THEN システムは現在の期限日時を入力フィールドに表示する SHALL
5. WHEN ユーザーが TODO 編集時に期限日時を変更する THEN システムは新しい期限日時で TODO を更新する SHALL
6. WHEN ユーザーが TODO 編集時に期限日時をクリアする THEN システムは期限なしの状態に更新する SHALL

Requirement 2: 期限の視覚的表示

User Story: TODO 一覧を見るユーザーとして、各タスクの期限状態を視覚的に把握したい。そうすることで、優先的に取り組むべきタスクを素早く識別できる。

Acceptance Criteria

1. WHEN TODO に期限が設定されている THEN システムは TODO アイテムに期限日時を表示する SHALL
2. WHEN 期限まで 24 時間以上ある THEN システムは通常の表示スタイルで期限を表示する SHALL
3. WHEN 期限まで 24 時間未満である THEN システムは警告色（オレンジ系）で期限を表示する SHALL
4. WHEN 期限が過ぎている THEN システムは危険色（赤系）で期限を表示する SHALL
5. WHEN TODO が完了状態である THEN システムは期限の警告表示を適用しない SHALL
6. WHEN TODO に期限が設定されていない THEN システムは期限表示を省略する SHALL

Requirement 3: 期限による並び替え（オプション）

User Story: TODO 一覧を見るユーザーとして、期限が近い順にタスクを並び替えたい。そうすることで、緊急度の高いタスクに集中できる。

Acceptance Criteria

1. WHEN TODO 一覧が表示される THEN システムはデフォルトで作成日時の降順（新しい順）で表示する SHALL
2. IF 将来的にソート機能を実装する THEN システムは期限日時の昇順（期限が近い順）でソート可能にする SHALL
3. IF 期限なしの TODO が存在する AND 期限ソートが有効 THEN システムは期限なし TODO を一覧の最後に配置する SHALL

Requirement 4: 期限情報の詳細表示

User Story: TODO 詳細パネルを見るユーザーとして、期限情報を詳しく確認したい。そうすることで、残り時間や期限の状態を正確に把握できる。

Acceptance Criteria

1. WHEN ユーザーが TODO を選択する THEN システムは詳細パネルに期限日時を表示する SHALL
2. WHEN 期限が設定されている THEN システムは「残り X 日」または「X 日超過」のような人間に読みやすい形式で表示する SHALL
3. WHEN 期限まで 24 時間未満 OR 期限超過 THEN システムは詳細パネルでも警告色で表示する SHALL
4. WHEN TODO に期限が設定されていない THEN システムは「期限なし」と表示する SHALL

Non-Functional Requirements

Code Architecture and Modularity

• Single Responsibility Principle: 期限関連のロジックは専用のユーティリティ関数に分離する
• Modular Design:
  • 型定義は src/types/todo.ts に追加
  • 期限判定ロジックは src/utils/dateUtils.ts に実装（新規作成）
  • 既存コンポーネントへの影響を最小化
• Dependency Management:
  • 外部の日付ライブラリは使用しない（ネイティブ Date API のみ使用）
  • 既存の useTodos Hook を拡張
• Clear Interfaces:
  • Todo インターフェースに dueDate?: string を追加
  • 日付フォーマット関数の型定義を明確化

Performance

• レンダリングパフォーマンス: 期限判定は useMemo でメモ化し、不要な再計算を防ぐ
• ストレージ効率: 期限は ISO 8601 形式の文字列として保存（既存の createdAt、updatedAt と同じ形式）
• 初期ロード時間: 期限機能追加後も 2 秒以内の初期ロードを維持

Security

• 入力検証: ユーザー入力の日付を検証し、無効な日付を拒否
• XSS 対策: React の自動エスケープに依存（追加の対策不要）
• データ整合性: 期限日時は常に有効な ISO 8601 形式で保存

Reliability

• 下位互換性: 期限フィールドはオプショナル（dueDate?）とし、既存の TODO データとの互換性を保つ
• エラーハンドリング:
  • 無効な日付入力時は適切なエラーメッセージを表示
  • 日付パース失敗時はフォールバック表示を提供
• データ永続性: 期限情報も他のフィールドと同様に localStorage に確実に保存

Usability

• 直感的な入力: HTML5 の <input type="datetime-local"> を使用し、ブラウザネイティブの日付ピッカーを活用
• 視覚的フィードバック:
  • 期限の警告色は WCAG 2.1 AA 準拠のコントラスト比を確保
  • 色だけでなくアイコンやテキストでも状態を示す
• レスポンシブ: 期限入力フィールドはモバイルデバイスでも使いやすいサイズと配置
• アクセシビリティ:
  • 期限入力フィールドに適切な label を設定
  • スクリーンリーダー対応のための aria-label を追加
  • 期限状態をテキストでも明示（「期限超過」「あと 2 日」など）

Design Document

Overview

期限設定機能は、TODO アイテムに期限日時フィールドを追加し、期限の状態（通常、警告、超過）を視覚的に表示する機能です。この機能は既存の TODO 管理システムに最小限の変更で統合され、ローカルストレージベースのアーキテクチャを維持します。

実装は以下の主要コンポーネントで構成されます：

• 型定義の拡張: Todo インターフェースに dueDate フィールドを追加
• 日付ユーティリティ: 期限状態の判定とフォーマット機能を提供する新規モジュール
• UI コンポーネントの拡張: フォーム、リスト、詳細表示への期限フィールド追加
• 状態管理の更新: useTodos Hook での期限データの処理

Steering Document Alignment

Technical Standards (tech.md)

この設計は以下の技術標準に従います：

• TypeScript strict モード: すべての新規コードで型安全性を保証
• React 19 のベストプラクティス: useCallback、useMemo を活用したパフォーマンス最適化
• ローカルストレージ: すべてのデータはクライアントサイドに保存（tech.md の Data Storage に準拠）
• ISO 8601 形式: 期限日時は既存の createdAt、updatedAt と同じ形式で保存
• ネイティブ API 優先: 外部ライブラリを使用せず、ブラウザの Date API のみを使用

Project Structure (structure.md)

プロジェクト構造の規約に従います：

• ファイル配置:
  • 型定義: src/types/todo.ts に追加
  • ユーティリティ: src/utils/dateUtils.ts を新規作成
  • コンポーネント: 既存の src/components/*.tsx を拡張
  • Hook: 既存の src/hooks/useTodos.ts を拡張
• 命名規則:
  • ユーティリティ関数: camelCase (例: getDueDateStatus, formatDueDate)
  • 型定義: PascalCase (例: DueDateStatus)
  • 定数: UPPER_SNAKE_CASE
• インポート順序: React → 型定義 → コンポーネント → Hooks → ユーティリティ

Code Reuse Analysis

Existing Components to Leverage

• useTodos Hook (src/hooks/useTodos.ts):

  • createTodo、updateTodo 関数を拡張して dueDate フィールドを処理
  • 既存の localStorage 保存ロジックを再利用
  • 型定義 TodoInput を拡張

• TodoForm コンポーネント (src/components/TodoForm.tsx):

  • 既存のフォーム構造に期限入力フィールドを追加
  • useState による状態管理パターンを踏襲
  • バリデーションとサブミット処理を拡張

• TodoItem コンポーネント (src/components/TodoItem.tsx):

  • 既存の日付表示（createdAt）パターンを参考に期限表示を追加
  • 条件付きスタイリングのパターンを再利用

• TodoDetail コンポーネント (src/components/TodoDetail.tsx):

  • 既存の詳細表示レイアウトに期限情報を追加
  • 日付フォーマット処理を統一

Integration Points

• localStorage (STORAGE_KEY: "todos"):

  • 既存の JSON シリアライズ/デシリアライズ処理をそのまま使用
  • dueDate フィールドはオプショナルなので既存データとの互換性を保つ

• 型システム (src/types/todo.ts):

  • Todo インターフェースを拡張
  • TodoInput 型を更新して期限入力をサポート

Architecture

Modular Design Principles

• Single File Responsibility:
  • dateUtils.ts: 期限関連のロジックのみを担当
  • 既存コンポーネントは UI レンダリングに集中
• Component Isolation:
  • 期限表示ロジックは dateUtils.ts に集約し、コンポーネントからは呼び出すのみ
• Service Layer Separation:
  • ビジネスロジック（期限判定）: dateUtils.ts
  • データ永続化: useTodos.ts
  • プレゼンテーション: 各コンポーネント
• Utility Modularity:
  • 日付ユーティリティは独立したモジュールとして実装

Components and Interfaces

Component 1: dateUtils モジュール

• Purpose: 期限日時に関するすべてのロジックを提供
• ファイルパス: src/utils/dateUtils.ts (新規作成)
• Interfaces:

  export enum DueDateStatus {
    NONE = 'none',           // 期限なし
    NORMAL = 'normal',       // 24時間以上
    WARNING = 'warning',     // 24時間未満
    OVERDUE = 'overdue'      // 期限超過
  }
  
  export function getDueDateStatus(dueDate: string | undefined, completed: boolean): DueDateStatus
  export function formatDueDate(dueDate: string): string
  export function getRelativeTimeText(dueDate: string): string
  

• Dependencies: なし（ネイティブ Date API のみ）
• Reuses: なし（新規モジュール）

Component 2: Todo 型の拡張

• Purpose: 期限フィールドを追加した型定義
• ファイルパス: src/types/todo.ts (既存ファイルを拡張)
• Interfaces:

  export interface Todo {
    id: string;
    title: string;
    description: string;
    completed: boolean;
    createdAt: string;
    updatedAt: string;
    dueDate?: string;  // 新規追加（オプショナル）
  }
  
  export type TodoInput = Pick<Todo, "title" | "description" | "dueDate">;  // 拡張
  

• Dependencies: なし
• Reuses: 既存の Todo インターフェース

Component 3: TodoForm コンポーネントの拡張

• Purpose: 期限入力フィールドの追加
• ファイルパス: src/components/TodoForm.tsx (既存ファイルを拡張)
• 追加する State:

  const [dueDate, setDueDate] = useState<string>("");
  

• 追加する UI:
  • <input type="datetime-local"> フィールド
  • クリアボタン（オプション）
• Dependencies: Todo, TodoInput 型
• Reuses: 既存のフォーム構造、useState パターン

Component 4: TodoItem コンポーネントの拡張

• Purpose: TODO アイテムに期限表示を追加
• ファイルパス: src/components/TodoItem.tsx (既存ファイルを拡張)
• 追加する機能:
  • 期限日時の表示
  • 期限状態に応じたスタイリング（色変更）
• Dependencies: dateUtils (新規)、Todo 型
• Reuses: 既存の日付表示ロジック、条件付きスタイリング

Component 5: TodoDetail コンポーネントの拡張

• Purpose: 詳細パネルに期限情報を表示
• ファイルパス: src/components/TodoDetail.tsx (既存ファイルを拡張)
• 追加する機能:
  • 期限日時の詳細表示
  • 相対時間表示（「あと 2 日」など）
• Dependencies: dateUtils、Todo 型
• Reuses: 既存の詳細表示レイアウト

Component 6: useTodos Hook の拡張

• Purpose: 期限フィールドの保存と読み込みをサポート
• ファイルパス: src/hooks/useTodos.ts (既存ファイルを拡張)
• 変更点:
  • createTodo 関数で dueDate を受け取る
  • updateTodo 関数で dueDate の更新をサポート
  • localStorage への保存時に dueDate を含める
• Dependencies: Todo、TodoInput 型
• Reuses: 既存の localStorage ロジック

Data Models

Todo モデル（拡張）

export interface Todo {
  id: string;                 // UUID v4 形式
  title: string;              // タスクのタイトル
  description: string;        // タスクの詳細説明
  completed: boolean;         // 完了状態
  createdAt: string;          // 作成日時（ISO 8601）
  updatedAt: string;          // 更新日時（ISO 8601）
  dueDate?: string;           // 期限日時（ISO 8601、オプショナル）
}

DueDateStatus 列挙型（新規）

export enum DueDateStatus {
  NONE = 'none',              // 期限が設定されていない
  NORMAL = 'normal',          // 期限まで 24 時間以上
  WARNING = 'warning',        // 期限まで 24 時間未満
  OVERDUE = 'overdue'         // 期限超過
}

TodoInput 型（拡張）

export type TodoInput = Pick<Todo, "title" | "description" | "dueDate">;

Error Handling

Error Scenarios

1. 無効な日付形式の入力

   • Handling:
     • datetime-local input の HTML5 バリデーションに依存
     • JavaScript で Date オブジェクトの isNaN チェック
   • User Impact:
     • フォーム送信時にエラーメッセージ表示
     • 「有効な日付を入力してください」

2. 過去の日付の入力

   • Handling:
     • 警告は表示するが、入力自体は許可（ユーザーの意図を尊重）
     • 保存後、即座に「期限超過」状態として表示
   • User Impact:
     • オレンジまたは赤色で表示され、視覚的フィードバック

3. 日付パースの失敗

   • Handling:
     • try-catch で Date オブジェクト生成をラップ
     • フォールバック: 「期限情報の表示エラー」
   • User Impact:
     • エラーメッセージではなく、「-」や「不明」と表示
     • コンソールに警告ログ

4. 既存データとの互換性

   • Handling:
     • dueDate はオプショナルなので、未定義でも問題なし
     • getDueDateStatus は undefined を処理
   • User Impact:
     • 既存の TODO は「期限なし」として表示
     • シームレスな移行

Testing Strategy

Unit Testing

現在、テストフレームワークは未導入ですが、将来的に以下をテスト：

• dateUtils モジュール:

  • getDueDateStatus: 各種期限状態の正しい判定
  • formatDueDate: 日付フォーマットの正確性
  • getRelativeTimeText: 相対時間表示の正確性
  • エッジケース: undefined、無効な日付、過去/未来の日付

• useTodos Hook:

  • createTodo で dueDate が正しく保存されるか
  • updateTodo で dueDate が更新されるか
  • localStorage への保存/読み込みが正常に動作するか

Integration Testing

• フォームからの TODO 作成フロー:

  1. 期限を設定して TODO 作成
  2. localStorage に保存される
  3. 一覧に正しく表示される
  4. 期限状態（通常/警告/超過）が適切に反映される

• TODO 編集フロー:

  1. 既存 TODO の期限を変更
  2. 変更が localStorage に保存される
  3. 一覧と詳細表示が更新される

End-to-End Testing

• ユーザーシナリオ 1: 期限付き TODO の作成:

  1. フォームを開く
  2. タイトル、説明、期限を入力
  3. 送信
  4. 一覧に期限が表示されることを確認

• ユーザーシナリオ 2: 期限警告の表示:

  1. 24 時間未満の期限で TODO を作成
  2. オレンジ色で表示されることを確認
  3. 詳細パネルで「あと X 時間」と表示されることを確認

• ユーザーシナリオ 3: 期限超過の表示:

  1. 過去の日付で TODO を作成
  2. 赤色で「期限超過」と表示されることを確認

• ユーザーシナリオ 4: 期限のクリア:

  1. 期限付き TODO を編集
  2. 期限フィールドをクリア
  3. 保存後、期限表示がなくなることを確認

Implementation Notes

CSS スタイリング

期限状態に応じたスタイルを globals.css に追加：

.due-date-normal {
  color: var(--color-text-secondary);
}

.due-date-warning {
  color: #f59e0b; /* オレンジ */
  font-weight: 500;
}

.due-date-overdue {
  color: #ef4444; /* 赤 */
  font-weight: 600;
}

アクセシビリティ考慮事項

• 期限入力フィールドに <label> を設定
• 警告・超過状態をアイコン（⚠️、🔴）とテキストで併記
• スクリーンリーダー用の aria-label を追加
• キーボード操作のみで期限設定可能

パフォーマンス最適化

• getDueDateStatus の結果を useMemo でメモ化
• 一覧表示時の日付フォーマット処理を最小化
• localStorage への保存は既存の useEffect 内で実行（追加の保存処理なし）

将来的な拡張性

この設計は将来的な機能拡張をサポートします：

• 通知機能: 期限 X 時間前に通知
• ソート機能: 期限順に並び替え
• フィルター機能: 期限超過のみ表示
• リマインダー: ブラウザ通知 API との統合
• 繰り返しタスク: 定期的な TODO の自動生成

Tasks Document

Phase 1: 型定義とユーティリティの実装

• 1. Todo 型に dueDate フィールドを追加

  • File: src/types/todo.ts
  • Todo インターフェースに dueDate?: string を追加
  • TodoInput 型を更新して "dueDate" を含める
  • Purpose: 期限データの型安全性を確保
  • Leverage: 既存の Todo インターフェース
  • Requirements: Requirement 1（期限日時の設定）
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: TypeScript Developer specializing in type systems | Task: Extend the Todo interface in src/types/todo.ts to add optional dueDate field (string in ISO 8601 format) and update TodoInput type to include dueDate, following requirement 1 (期限日時の設定) from requirements.md | Restrictions: Do not modify existing fields, maintain backward compatibility with existing Todo data, dueDate must be optional, follow existing ISO 8601 pattern used in createdAt and updatedAt | Leverage: Existing Todo interface pattern, ISO 8601 date format convention | Success: Todo interface has dueDate?: string field, TodoInput includes dueDate in Pick type, TypeScript compilation succeeds without errors, existing code remains compatible | After implementation, use log-implementation tool with detailed artifacts (types modified) and mark task as complete in tasks.md

• 2. 日付ユーティリティモジュールを作成

  • File: src/utils/dateUtils.ts (新規作成)
  • DueDateStatus enum を定義（NONE, NORMAL, WARNING, OVERDUE）
  • getDueDateStatus(dueDate, completed) 関数を実装
  • formatDueDate(dueDate) 関数を実装
  • getRelativeTimeText(dueDate) 関数を実装
  • Purpose: 期限判定とフォーマット処理のロジックを集約
  • Leverage: ネイティブ Date API
  • Requirements: Requirement 2（期限の視覚的表示）, Requirement 4（期限情報の詳細表示）
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: Frontend Developer with expertise in date handling and utility functions | Task: Create dateUtils module at src/utils/dateUtils.ts implementing DueDateStatus enum and date utility functions (getDueDateStatus, formatDueDate, getRelativeTimeText) following requirements 2 and 4 from requirements.md and design.md Component 1 specification | Restrictions: Use only native Date API (no external libraries like date-fns or moment), handle undefined/invalid dates gracefully, completed todos should always return NONE status, times within 24 hours should be WARNING, past dates should be OVERDUE | _Leverage: Native Date API, ISO 8601 format from existing codebase | Requirements: Requirement 2, Requirement 4 | Success: DueDateStatus enum with 4 values defined, getDueDateStatus correctly categorizes dates based on 24-hour threshold and completion status, formatDueDate returns human-readable Japanese format, getRelativeTimeText returns "あとX日" or "X日超過" format, all functions handle edge cases (undefined, invalid dates) | After implementation, use log-implementation tool with detailed artifacts (functions created with signatures and purpose) and mark task as complete in tasks.md

Phase 2: 状態管理の拡張

• 3. useTodos Hook を拡張して期限をサポート
  • File: src/hooks/useTodos.ts
  • createTodo 関数で dueDate を受け取り保存
  • updateTodo 関数で dueDate の更新をサポート
  • localStorage への保存時に dueDate を含める
  • Purpose: 期限データの永続化を実現
  • Leverage: 既存の localStorage ロジック、TodoInput 型
  • Requirements: Requirement 1（期限日時の設定）
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: React Developer with expertise in custom hooks and state management | Task: Extend useTodos hook in src/hooks/useTodos.ts to handle dueDate field in createTodo and updateTodo functions following requirement 1 and design.md Component 6 specification | Restrictions: Do not change existing localStorage key or format structure, maintain backward compatibility with existing todos without dueDate, preserve existing useCallback dependencies, follow existing patterns for createdAt/updatedAt | _Leverage: Existing localStorage logic in useEffect, existing createTodo/updateTodo patterns, TodoInput type from task 1 | Requirements: Requirement 1 | Success: createTodo accepts and saves dueDate field to new todos, updateTodo can modify dueDate including setting to undefined (clearing), localStorage correctly persists dueDate, existing todos load without errors (backward compatible) | After implementation, use log-implementation tool with detailed artifacts (functions modified, integration with localStorage) and mark task as complete in tasks.md

Phase 3: UI コンポーネントの拡張

• 4. TodoForm に期限入力フィールドを追加

  • File: src/components/TodoForm.tsx
  • useState で dueDate 状態を追加
  • <input type="datetime-local"> フィールドを追加
  • フォーム送信時に dueDate を含める
  • 編集モード時に既存の dueDate を表示
  • Purpose: ユーザーが期限を入力できるようにする
  • Leverage: 既存のフォーム構造、useState パターン
  • Requirements: Requirement 1（期限日時の設定）
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: Frontend Developer specializing in React forms and user input | Task: Add due date input field to TodoForm component in src/components/TodoForm.tsx following requirement 1 and design.md Component 3 specification | Restrictions: Follow existing form structure and styling patterns, use HTML5 datetime-local input type, ensure proper label and accessibility (aria-label), maintain existing form validation patterns, support both create and edit modes | _Leverage: Existing useState pattern for title/description, existing useEffect for editingTodo, existing form structure and CSS classes | Requirements: Requirement 1 | Success: Form displays datetime-local input field with proper label "期限", dueDate state syncs with editingTodo prop in edit mode, form clears dueDate on successful submit (create mode), onSubmit passes dueDate in TodoInput object, input follows project styling conventions, accessible with keyboard navigation | After implementation, use log-implementation tool with detailed artifacts (component modified, UI fields added) and mark task as complete in tasks.md

• 5. TodoItem に期限表示を追加

  • File: src/components/TodoItem.tsx
  • 期限が設定されている場合に期限日時を表示
  • dateUtils の getDueDateStatus と formatDueDate を使用
  • 期限状態に応じて色を変更（通常/警告/超過）
  • Purpose: 一覧で期限を視覚的に確認できるようにする
  • Leverage: dateUtils モジュール、既存の日付表示パターン
  • Requirements: Requirement 2（期限の視覚的表示）
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: Frontend Developer with expertise in React components and conditional styling | Task: Add due date display to TodoItem component in src/components/TodoItem.tsx following requirement 2 and design.md Component 4 specification | Restrictions: Use dateUtils functions from task 2, follow existing date display pattern (see createdAt display), apply conditional CSS classes based on DueDateStatus (normal/warning/overdue), do not show due date if undefined, do not apply warning styles if todo is completed | _Leverage: dateUtils.getDueDateStatus and formatDueDate from task 2, existing date display pattern with toLocaleDateString, existing conditional className pattern | Requirements: Requirement 2 | Success: Due date displays in Japanese format when set, color changes based on status (normal: default, warning: orange #f59e0b, overdue: red #ef4444), completed todos show due date without warning colors, no display when dueDate is undefined, follows existing component styling | After implementation, use log-implementation tool with detailed artifacts (component modified, integration with dateUtils) and mark task as complete in tasks.md

• 6. TodoDetail に期限詳細表示を追加

  • File: src/components/TodoDetail.tsx
  • 期限日時の詳細表示を追加
  • dateUtils の getRelativeTimeText を使用して相対時間表示
  • 期限状態に応じたスタイリング
  • Purpose: 詳細パネルで期限情報を詳しく確認できるようにする
  • Leverage: dateUtils モジュール、既存の詳細表示レイアウト
  • Requirements: Requirement 4（期限情報の詳細表示）
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: Frontend Developer specializing in React and detailed information display | Task: Add due date details section to TodoDetail component in src/components/TodoDetail.tsx following requirement 4 and design.md Component 5 specification | Restrictions: Use dateUtils functions (formatDueDate, getRelativeTimeText, getDueDateStatus), follow existing detail panel layout structure, show "期限なし" when dueDate is undefined, apply warning/overdue styling consistently with TodoItem, maintain existing component organization | _Leverage: dateUtils from task 2, existing detail section structure with labeled information, existing conditional styling pattern | Requirements: Requirement 4 | Success: Detail panel shows formatted due date with label "期限", displays relative time text ("あと2日" or "3日超過"), applies appropriate color styling based on status, shows "期限なし" when undefined, integrates seamlessly with existing detail layout | After implementation, use log-implementation tool with detailed artifacts (component modified, UI enhancements) and mark task as complete in tasks.md

Phase 4: スタイリングと最終調整

• 7. 期限表示用の CSS スタイルを追加

  • File: src/app/globals.css
  • .due-date-normal, .due-date-warning, .due-date-overdue クラスを定義
  • WCAG 2.1 AA 準拠のコントラスト比を確保
  • レスポンシブ対応
  • Purpose: 期限状態を視覚的に区別できるようにする
  • Leverage: 既存の CSS Variables とスタイリングパターン
  • Requirements: Requirement 2（期限の視覚的表示）
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: Frontend Developer with expertise in CSS and accessibility | Task: Add due date status styling classes to globals.css following requirement 2 and design.md Implementation Notes CSS Styling specification | Restrictions: Follow existing CSS pattern and naming conventions, ensure WCAG 2.1 AA contrast ratio compliance, use colors specified in design (warning: #f59e0b, overdue: #ef4444), make responsive for mobile devices, integrate with existing theme variables if available | _Leverage: Existing CSS structure in globals.css, existing color scheme and styling patterns | Requirements: Requirement 2 | Success: Three CSS classes defined (.due-date-normal, .due-date-warning, .due-date-overdue), warning and overdue classes have accessible color contrast, styles work on mobile and desktop, integrates with existing design system | After implementation, use log-implementation tool with detailed artifacts (CSS classes added) and mark task as complete in tasks.md

• 8. 動作確認と最終調整

  • Files: 全体の動作確認
  • 期限付き TODO の作成・編集・削除をテスト
  • 期限状態の視覚的表示を確認（通常/警告/超過）
  • 既存データとの互換性を確認
  • エッジケースのテスト（無効な日付、過去の日付など）
  • Purpose: 機能が要件通りに動作することを確認
  • Leverage: 全実装コンポーネント
  • Requirements: All
  • _Prompt: Implement the task for spec due-date-feature, first run spec-workflow-guide to get the workflow guide then implement the task: Role: QA Engineer with expertise in manual testing and edge case identification | Task: Perform comprehensive manual testing of due date feature covering all requirements, test user workflows and edge cases following all requirements from requirements.md | Restrictions: Test all acceptance criteria from requirements 1-4, verify backward compatibility with existing todos without dueDate, check mobile responsiveness, validate accessibility (keyboard navigation, screen reader), identify and document any bugs found | _Leverage: All implemented components from tasks 1-7, requirements.md acceptance criteria | Requirements: All requirements (1, 2, 3, 4) | Success: All acceptance criteria pass, create/edit/delete workflows work smoothly, visual indicators (colors) display correctly for all states, existing todos load without issues, no console errors, mobile and desktop display correctly, keyboard accessible | After implementation, use log-implementation tool with detailed artifacts (testing results, any bug fixes applied) and mark task as complete in tasks.md