Run any Skill in Manus with one click

Get Started

web-preview

Stars925

Forks81

UpdatedFebruary 14, 2026 at 09:21

Flutter Web版をビルドしてユーザーにプレビューURLを案内する。playwright-cliでアクセス確認も行う。

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

K9i-0

K9i-0/ccpocket

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

2 files

SKILL.md

readonly

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

More from this repository

same repository

release-app

K9i-0/ccpocket

アプリのリリース（バージョンbump + CHANGELOG + タグ → GH Actions で自動ビルド・配布）。iOS / Android / macOS / Linux / Windows の任意の組み合わせでリリースできる。「リリース」「バージョン上げて」「リリースして」と言われたときに使う。

2026-05-22925

release-card

K9i-0/ccpocket

ccpocket の X 向けリリース告知カード画像を作成・更新する。最新の iOS/Android/macOS リリースタグ、App Store release_notes、既存の scripts/release-card/generate.mjs を使って英語・日本語の告知PNGを生成し、画像を目視確認して不備があれば生成スクリプトを修正する。「リリースカード」「X告知画像」「リリース報告用画像」「release-card」と言われたときに使用する。

2026-05-02925

update-store

K9i-0/ccpocket

ストア情報の更新自動化 — スクリーンショット撮影（シミュレーター × モック画面 × Marionette MCP）とメタデータテキスト更新。ストア更新、スクショ更新、App Store / Google Play のメタデータ更新、リリースノート作成の際に使用すること。

2026-04-21925

codex-guide

K9i-0/ccpocket

Codex の使い方、CLI/app/IDE、rules・hooks・AGENTS.md・skills・subagents・config などを案内する。Codex や OpenAI 製品の仕様を答える前に必ず公式ドキュメントを確認し、rules/approval は `codex execpolicy check` で実検証すること。

2026-04-16925

mobile-automation

K9i-0/ccpocket

MCP (dart-mcp + Marionette) を使ったFlutterアプリのE2E自動化・UI検証ガイド。シミュレーターでのUI動作確認、モックプレビュー検証、Bridge経由のE2Eテスト、スクリーンショット撮影など、アプリの動作検証が必要なときに使う。「動作確認して」「UIを検証して」「E2Eテスト」「シミュレーターで確認」「モックで確認」と言われたときや、UI変更後の検証フェーズで使用すること。

2026-04-10925

triage

K9i-0/ccpocket

GitHub Issue・PRのトリアージ。番号を渡すと、要望の要約・実現難易度・既存機能との重複チェック・対応判断を調査してレポートする。Issue/PRの番号が出てきたとき、トリアージ、優先度判断、対応判断と言われたときに使用する。

2026-04-01925

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