prototype
Installation
SKILL.md
チャットで対話しながら Web アプリのプロトタイプをライブ構築する。動くものを最速で見せ、実際の画面を隣に表示したままフィードバックを受けて反復することがゴール。
技術スタック(固定)
- Next.js(App Router / TypeScript / Turbopack)
- shadcn/ui で UI コンポーネントを構築
- Tailwind CSS で CSS を構築
基本方針
- スピード優先:ヒアリングは最小限(何を作るか・主要な画面)に絞り、すぐ作り始める。細部はチャットの反復で詰める。
- 常に動く状態を保つ:dev server を起動したまま編集し、いつでもブラウザで確認できる状態を維持する。
- 環境に応じたプレビュー先を使う(外の Chrome を安易に開かない):
- Cursor:組み込みブラウザ(Glass)で開発・確認する。外部 Chrome ウィンドウは開かない
- cmux + Claude Code:cmux の browser ペインで表示・検証する(Playwright で別の Chrome ウィンドウを新たに開かない)
- それ以外:
scripts/split-preview.shで Chrome/デフォルトブラウザを開き、自己検証は Playwright をヘッドレスで行う
- 自己検証してから報告する:変更のたびにスクリーンショットを撮り、表示崩れ・エラーがないことを確認してから URL を提示する
- プロトタイプ品質:バックエンド・認証・テストは作らない。データはハードコードのモックで十分。見た目と操作感に全力を注ぐ。