web-preview
web-preview automates Flutter web builds, spins up a local server, and validates the deployment with Playwright before delivering shareable preview URLs to your team. It handles port management, generates screenshots for verification, and supports both local and network-accessible URLs.
web-preview builds your Flutter web app, starts a local server, and generates a shareable preview URL for testing.
AI-generated summary based on this skill's SKILL.md
Install
K9i-0/ccpocket/web-preview · repository language: Dart
git clone https://github.com/K9i-0/ccpocket
cp -r ccpocket/.claude/skills/web-preview ~/.claude/skills/web-previewFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I build and preview a Flutter web app with web-preview?
web-preview automates the entire process: it builds your Flutter web application, starts a local preview server, and generates a shareable preview URL. The skill handles port management automatically and validates the deployment using Playwright before delivering the URL to your team, so you can share working previews instantly.
What does web-preview do to set up a Flutter web server?
web-preview automates web preview server setup with verification. It spins up a local HTTP server on a managed port (like 8888), handles all connectivity configuration, and validates that the server is running correctly before returning the preview URL. This eliminates manual server setup and configuration errors.
Can web-preview validate my Flutter web build using Playwright?
Yes. web-preview validates Flutter web builds using Playwright to test rendering and functionality. It runs automated checks on your deployed web app, generates screenshot proof of correct rendering, and verifies the build is working as expected before marking the preview as ready for sharing.
Does web-preview generate screenshots of my Flutter web app?
web-preview generates screenshot proof of web app rendering as part of its validation process. These screenshots serve as visual verification that your Flutter web build deployed correctly and is rendering properly, giving you and your team confidence in the preview before it's shared.
What happens if I can't connect to the Flutter web preview server?
web-preview includes troubleshooting for Flutter web server connectivity issues. If connection problems occur, the skill provides diagnostics and verification steps to identify port conflicts, firewall issues, or configuration problems, helping you resolve connectivity quickly.
Is web-preview free to use and what license does it have?
web-preview is released under the MIT license, making it free and open-source. You can use, modify, and distribute it freely under MIT terms, with no restrictions on commercial or personal projects.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
.claude/skills/web-preview/SKILL.md
.claude/skills/web-preview/scripts/web-preview.sh