Cursor講座 第6章6.2節「TodoアプリをCursorに作ってもらうためのプロンプト設計」

AIAI(人工知能)は人工的に作られた知能で、様々な技術を組み合わせて人間のような知的行動を実現できるものです。テキストエディタエディタはコンピュータ上でソフトウェア開発に使用されるツールです。「Cursor」のAI機能に指示して、Todoアプリを作りたいです。堅牢なコードを意識し、Todoアプリに必要な機能やユーザーが見やすいデザインまで、抜け漏れのないように要件定義を作成してください。また、作成する際に以下の機能を実装してください。

• -日付表示
• -優先度設定（High / Medium / Low）
• -Darkモード

ReactReactは、JavaScriptライブラリの一つです。 + TypeScriptTypeScriptはJavaScriptの欠点である型の不一致やエラー検出の難しさを解決するため、Microsoftが開発した静的型付け言語です。 + Tailwind CSSCSSはWebページを装飾するスタイルシート言語です。 を使ったTodoアプリの要件

【機能要件】

• タスクの追加、削除、完了切り替えができる
• 「未完了」「完了済み」「すべて」の3つのフィルター機能
• タスクはローカルストレージに保存され、再読み込み後も保持される
• タスクごとに以下の属性を設定可能：
• タイトル（テキスト）
• 締切日（期限付き）
• 作成日（自動設定）
• 優先度（High / Medium / Low）

【状態管理】

• useReducer を使用して状態を一元管理一元管理は企業や組織内で、情報システムやデータベース、アプリケーションなどを統一的に管理する手法です。
• 状態とアクションを型定義し、保守性と可読性を向上

【UIUIはユーザーがデバイスやアプリケーションを操作するための画面やボタン、メニューなどインターフェース全般のことです。・UXUXはユーザーエクスペリエンスの略称です。】

• Tailwind CSS を用いたスタイリッシュなデザイン
• ダークモード対応（dark: クラスの使用）
• タスクをドラッグ＆ドロップで並び替え可能（react-beautiful-dnd や sortablejs を使用）
• レスポンシブ対応でスマホでも快適に操作可能
• 優先度ごとの色分け（例：High = 赤, Medium = 黄, Low = 緑）

【UI構成イメージ】

• 入力フォーム（タイトル入力欄、締切日ピッカー、優先度セレクト、追加ボタン）
• タスクリスト（ドラッグ＆ドロップ対応）
• 各タスクには以下の要素を表示：
• 完了チェックボックス
• タイトル
• 締切日
• 優先度バッジ（色付き）
• 削除ボタン
• フィルター切替ボタン（All / Active / Completed）
• ダークモードトグルボタン