Agent Skills
› K9i-0/ccpocket
› web-preview
web-preview
GitHub自动化构建Flutter Web应用，启动本地服务器并通过Playwright进行访问验证和截图，最后向用户提示预览URL及缓存清理注意事项。
Trigger Scenarios
需要预览Flutter Web版本时
检查Web应用是否正常加载时
Install
npx skills add K9i-0/ccpocket --skill web-preview -g -y
SKILL.md
Frontmatter
{
"name": "web-preview",
"description": "Flutter Web版をビルドしてユーザーにプレビューURLを案内する。playwright-cliでアクセス確認も行う。",
"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
Version History
-
370a4b0
Current 2026-09-22 13:40
移除Claude特定的调用标志
- aa215a3 2026-07-25 06:59
