🌐
AutomationDart

Web Preview

by K9i-0

Web Preview is an Automation skill for Claude Code, published by K9i-0 in ccpocket.

1K stars97 forkson K9i-0/ccpocketAdded 2026/08/21Repository updated 2026/08/20
androidapp-serverbridge-serverclaude-codeclicodexflutteriosmobileopenairemote-controltypescriptwebsocket
Install in seconds
Install Web Preview
Copy Web Preview into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview ~/.claude/skills/web-preview

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/K9i-0/ccpocket.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
.claude/skills/web-preview/SKILL.md in K9i-0/ccpocket
Installs to
~/.claude/skills/web-preview
Collection
One of 18 skills cataloged from this repository
Category
Automation1523 skills

What Web Preview does

Web Preview builds the Flutter web app, starts a local server, and checks it with Playwright before sharing the URL. Use it when you need a quick preview link and basic runtime verification.

Web Preview is cataloged under Automation on DirSkills. Web Preview comes from a repository tagged android, app-server, bridge-server, claude-code and cli.

Documentation

README

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_URL127.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

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Web Preview

  • What else does K9i-0 publish alongside Web Preview?

    Web Preview is one of 18 skills that DirSkills catalogs from K9i-0/ccpocket, the repository it ships in. Its siblings there include App Release, Branch Merge Cleanup and Codex Guide. Each one is a separate skill with its own page in this directory, installs the same way Web Preview does, and is maintained by K9i-0 in that same repository. The rest of the collection is listed on the K9i-0/ccpocket page.

  • How does Web Preview compare to other Automation skills?

    Web Preview ranks #827 by stars among the 1523 Automation skills in this catalog. The most-starred ones next to it are Autonomous Loops, Autonomous Agent Harness and Automation Audit Ops. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Web Preview against them. Open each page to compare what they document and how they install.

More from K9i-0/ccpocket

Web Preview is one of 18 skills cataloged on DirSkills from K9i-0/ccpocket.

See all 18 skills