AntigravityでToDoアプリを作ってみた【Rails】（近道プロンプトも紹介）

ユーザーは「Docker環境でrailsでtodoアプリを作成してください」と依頼しています。日本語で、Docker環境でRailsを使ったTODOアプリケーションを作成することを求めています。

これは複雑なタスクなので、task_boundaryを使用し、タスクの計画と実装を行う必要があります。

まず、以下のステップが必要です：

タスクの計画（task.md）を作成
Docker + Railsの環境をセットアップ
Railsアプリケーションを作成
TODOアプリの機能を実装
動作確認
task_boundaryを使用し、まずはPLANNINGモードで開始し、実装計画を立てる必要があります。

まず、task.mdを作成し、その後task_boundaryを設定します。

プロジェクトセットアップ
 プロジェクト構造の確認
 Dockerファイルの作成（Dockerfile, docker-compose.yml）
 Rails環境のセットアップ
TODOアプリケーション実装
 TODOモデルとコントローラーの作成
 データベースのセットアップとマイグレーション
 ビューの作成（一覧、作成、編集、削除）
 ルーティングの設定
動作確認
 Docker環境でのアプリケーション起動確認
 CRUD機能の動作確認
 ドキュメントの作成

TODOアプリ デザイン改善計画
現在のRails scaffoldデフォルトデザインを、ビジネスで使える洗練されたUIに改善します。

User Review Required
デザインフレームワークとしてTailwind CSSを使用します：

IMPORTANT

Tailwind CSSの選定理由

モダンで柔軟なユーティリティファーストCSS
Rails 7.1との統合が容易
カスタマイズ性が高く、プロフェッショナルなデザインを実現可能
レスポンシブデザインのサポートが強力
Proposed Changes
デザインシステム
[NEW] 
app/assets/stylesheets/application.tailwind.css
Tailwind CSSの設定ファイルを作成：

カスタムカラーパレット（ビジネス向けのブルー・グレー基調）
タイポグラフィの設定
カスタムコンポーネントクラス
[MODIFY] 
Gemfile
Tailwind CSS関連のgemを追加：

tailwindcss-rails gem
レイアウトとビュー
[MODIFY] 
app/views/layouts/application.html.erb
アプリケーション全体のレイアウトを刷新：

モダンなヘッダーナビゲーション
レスポンシブコンテナ
フッター追加
グラデーション背景
[MODIFY] 
app/views/todos/index.html.erb
TODO一覧画面の改善：

カード型レイアウト
グリッドシステムで整理
完了状態の視覚的表現（バッジ、カラー）
ホバーエフェクト
アイコン付きアクションボタン
[MODIFY] 
app/views/todos/new.html.erb & edit.html.erb
フォーム画面の改善：

カード型フォームコンテナ
スタイリッシュな入力フィールド
プライマリーアクションボタン
[MODIFY] 
app/views/todos/_form.html.erb
フォームパーシャルの改善：

ラベルとフィールドのスタイリング
エラーメッセージの視覚的表現
チェックボックスのカスタムスタイル
[MODIFY] 
app/views/todos/show.html.erb
詳細画面の改善：

カード型詳細表示
ステータスバッジ
アクションボタンの配置改善
デザインの特徴
カラースキーム：

プライマリー: ディープブルー（#1e40af）
アクセント: インディゴ（#4f46e5）
成功: グリーン（#10b981）
警告: アンバー（#f59e0b）
背景: グラデーション（グレー系）
コンポーネント：

カード: シャドウ、丸角、ホワイト背景
ボタン: グラデーション、ホバーエフェクト、アイコン
バッジ: ステータス別カラー
フォーム: フォーカスリング、検証スタイル
レスポンシブ：

モバイルファースト設計
タブレット・デスクトップ対応
グリッドレイアウトの自動調整

あなたは熟練したRuby on Railsエンジニアです。
DockerとDocker Composeを使用して、以下の要件を満たすRailsアプリケーション開発環境を構築してください。

### 要件
- **Rubyバージョン**: 4.0.1
- **Railsバージョン**: 7.1系
- **データベース**: PostgreSQL
- **プロジェクト名**: `todo_app`

### タスク
1. `Dockerfile`を作成してください。
   - ベースイメージ: `ruby:4.0.1`
   - 必要なパッケージ: `build-essential`, `libpq-dev`, `nodejs`, `yarn`, `libyaml-dev` (psych gemエラー回避のため重要)
2. `docker-compose.yml`を作成してください。
   - `web`サービス（Rails）と`db`サービス（PostgreSQL 13以降）を定義
   - `web`サービスはポート3000を公開
   - データベース接続情報は環境変数で管理
   - `RAILS_ENV`は`development`に設定
3. `Gemfile`を作成し、Rails 7.1を指定してください。
4. `database.yml`をDocker環境（ホスト: `db`, ユーザー: `postgres`）に合わせて設定してください。
5. `rails new . --database=postgresql --skip-bundle`コマンドをコンテナ内で実行してアプリを初期化してください。
6. `Gemfile`に`tailwindcss-rails`を追加して`bundle install`を実行してください。

出力として、作成・修正が必要な各ファイルの内容を提示してください。

ありがとうございます。次にTODO機能を実装し、ビジネス向けの洗練されたデザインを適用してください。

### 機能要件
1. **Scaffold生成**: `Todo`モデルを作成してください。
   - `title`: string
   - `description`: text
   - `completed`: boolean (デフォルト値: `false`を設定すること)
2. **ルーティング**: ルートパス（`/`）を`todos#index`に設定してください。
3. **マイグレーション**: データベースを作成し、マイグレーションを実行してください。

### デザイン要件（重要）
デフォルトのScaffoldデザインではなく、以下の「ビジネス向けモダンデザイン」を適用してください。
`app/assets/stylesheets/custom.css`を作成し、レイアウトと各ビューに適用してください。

**デザイン仕様**:
- **テーマカラー**: 
  - メイン: ディープブルー (#1e40af)
  - アクセント: インディゴ (#4f46e5)
  - 背景: 全体にブルー・パープル系のグラデーション (#667eea → #764ba2 )
- **レイアウト**:
  - ヘッダー: 「Business Todo」ロゴと「New Todo」ボタンを含む白背景のヘッダー
  - コンテナ: 最大幅1200px、中央揃え
- **UIコンポーネント**:
  - **カード**: 白背景、角丸、シャドウ付きのカードデザイン
  - **ボタン**: グラデーション背景、ホバーエフェクト付き
  - **バッジ**: 完了/未完了ステータスを表示するピル型バッジ（緑/黄色）
- **ビュー構成**:
  - `index`: レスポンシブなグリッドレイアウト（カードをタイル状に配置）
  - `show`, `new`, `edit`: カードコンテナ内にフォームや詳細を表示

### タスク
1. `Todo`のScaffold生成コマンドとマイグレーションファイルの修正（デフォルト値設定）。
2. `config/routes.rb`の修正。
3. `app/assets/stylesheets/custom.css`の作成（上記のデザイン仕様をCSS変数を使って実装）。
4. `app/views/layouts/application.html.erb`の修正（カスタムCSS読み込み、共通ヘッダー追加）。
5. `index`, `show`, `new`, `edit`, `_form`の各ビューファイルを、指定されたデザインに合わせて完全に書き換えてください。

コードを示し、適用手順を説明してください。