wildematt/phone-preview-skill

phone-preview-skill は何をしますか？

📱 Craft Agent スキル: ローカルのライブリロード開発サーバーを起動し、モバイルプレビュー用のQRコードを生成します。

使い方

このスキルは、Craft Agent またはコマンドラインから直接実行できます。

# Craft Agent からの使用例 (エージェントが自動呼び出し)
/phone-preview

または、以下のように直接スクリプトを実行します。

./start-preview.sh

動作

1. 指定されたディレクトリ（デフォルト: カレントディレクトリ）で HTTP サーバーを起動します。
2. ライブリロード機能を有効にし、ファイル変更時に自動でリロードします。
3. サーバーのURL（例: http://localhost:3000）をQRコードに変換して表示します。
4. ターミナルにQRコードが表示されるので、スマートフォンでスキャンしてアクセスします。

必要なツール

• Node.js (npm)
• 以下の npm パッケージが自動インストールされます:
  • live-server（ライブリロードサーバー）
  • qrcode-terminal（QRコード表示）

環境変数

• PHONE_PREVIEW_PORT: サーバーのポート番号（デフォルト: 3000）
• PHONE_PREVIEW_DIR: 公開するディレクトリ（デフォルト: カレントディレクトリ）

例

export PHONE_PREVIEW_PORT=8080
./start-preview.sh

注意事項

• スマートフォンと同じネットワークにデスクトップが接続されている必要があります。
• ファイアウォールで指定ポートがブロックされていないことを確認してください。
• ローカル開発用途のみを想定しており、本番環境では使用しないでください。