By name: web-preview description: Flutter Web版をビルドしてユーザーにプレビューURLを案内する。playwright-cliでアクセス確認も行う。 disable-model-invocation: true allowed-tools: Bash(bash:), Bash(playwright-cli:)
Web Preview
Flutter Web版をビルド → サーバー起動 → Playwright でアクセス確認 → URLをユーザーに案内する。
手順
1. ビルド & サーバー起動（スクリプト）
bash .claude/skills/web-preview/scripts/web-preview.sh .
スクリプトが以下を一括で行う:
flutter build web --release- ポート8888の既存プロセスを停止（PIDファイル優先）
nohup python3 -m http.serverで安定してバックグラウンド起動curlで起動完了を待機・検証LOCAL_URL（127.0.0.1）と共有用URL（Tailscale優先）を出力
出力例:
PID: 12345
LOCAL_URL: http://127.0.0.1:8888
URL: http://<tailscale-ip>:8888
2. Playwright でアクセス確認
Playwright検証は LOCAL_URL を優先して実施する:
playwright-cli open <LOCAL_URL>
playwright-cli eval "document.title"
playwright-cli screenshot --filename=web-preview.png
playwright-cli close
document.titleがccpocketであることを確認する- スクリーンショットを取得してページが正常に表示されることを確認する
- エラーがあればユーザーに報告する
3. ユーザーへの案内
以下の情報をユーザーに伝える:
- ローカル確認URL（
LOCAL_URL） - 共有用URL（
URL。通常はTailscale） - スクリーンショット（確認用）
- ⚠️ ブラウザキャッシュクリア（Cmd+Shift+R）してからリロードすること
トラブルシュート
ERR_CONNECTION_REFUSEDが出る場合:curl -I <LOCAL_URL>でサーバー生存確認lsof -nP -iTCP:8888 -sTCP:LISTENで待受確認/tmp/ccpocket-web-preview-8888.logを確認
- 一部の実行環境では、コマンド終了時にバックグラウンドプロセスが回収されることがある。 その場合は別ターミナルで以下を起動してから Playwright を実行する:
cd apps/mobile/build/web
python3 -m http.server 8888