Specialist Integration Test Generator
HoangNguyen0403/agent-skills-standard
Generates one integration/E2E test from an approved test case spec using existing project patterns.
Flutter Web版をビルドしてユーザーにプレビューURLを案内する。playwright-cliでアクセス確認も行う。
Install Web Preview
$ npx skills add K9i-0/ccpocket --skill web-preview -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install K9i-0/ccpocket web-preview --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/web-preview .claude/skills/web-preview && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "web-preview" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview into .claude/skills/web-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-preview", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-previewType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add K9i-0/ccpocket --skill web-preview -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install K9i-0/ccpocket web-preview --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/web-preview .agents/skills/web-preview && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-preview" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview into .agents/skills/web-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-preview", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add K9i-0/ccpocket --skill web-preview -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install K9i-0/ccpocket web-preview --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/web-preview .cursor/skills/web-preview && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "web-preview" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview into .cursor/skills/web-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-preview", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/K9i-0/ccpocket.git --path .claude/skills/web-preview--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add K9i-0/ccpocket --skill web-preview -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install K9i-0/ccpocket web-preview --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/web-preview .gemini/skills/web-preview && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "web-preview" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview into .gemini/skills/web-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-preview", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install K9i-0/ccpocket web-previewInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add K9i-0/ccpocket --skill web-preview -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/web-preview .github/skills/web-preview && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "web-preview" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview into .github/skills/web-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-preview", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add K9i-0/ccpocket --skill web-preview -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install K9i-0/ccpocket web-preview --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/web-preview .opencode/skills/web-preview && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "web-preview" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview into .opencode/skills/web-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-preview", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
web-preview- GitHub stars
- 1.1k
- Token cost
- ~359 tokens
- SKILL.md length
- 65 words
- Files
- 2 (incl. scripts)
- Skills in repo
- 17
- Repo updated
- First seen
- Licence
- MIT
At a glance
Flutter Web版をビルドしてユーザーにプレビューURLを案内する。playwright-cliでアクセス確認も行う。
- Works in 3 steps: ビルド & サーバー起動（スクリプト） → Playwright でアクセス確認 → ユーザーへの案内
- Tasks that involve Cross-platform mobile apps
- SKILL.md covers 手順 and トラブルシュート
- Runs Shell scripts from its folder; calls python3, bash and flutter
What it does
Web Preview is an agent skill from K9i-0/ccpocket. Flutter Web版をビルドしてユーザーにプレビューURLを案内する。playwright-cliでアクセス確認も行う。
Its SKILL.md is about 360 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including scripts (for example `scripts/web-preview.sh`).
It sits in Mobile, covering Cross-platform mobile apps and Browser testing. It works with Playwright and Flutter. The repository describes itself as: Mobile client for Codex and Claude — control coding agents from your phone via WebSocket bridge. The licence is MIT.
When your agent uses it
- Tasks that involve Cross-platform mobile apps
- Tasks that involve Browser testing
Example prompts
- “/web-preview”
Requirements
- Python 3
- A Bash shell
- Pre-approved tools (allowed-tools): Bash(bash:*), Bash(playwright-cli:*)
Workflow steps
3 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 8354ffd. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
Bash(bash:*)Bash(playwright-cli:*)
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
python3bashfluttercurl
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Web Preview loads about 359 tokens when it runs. Until then it costs about 19 tokens; SKILL.md has 65 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from K9i-0/ccpocket at commit 8354ffd, republished under its MIT licence (© K9i-0). 65 words, ~359 tokens.
Download SKILL.mdSave it as
.claude/skills/web-preview/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- 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>:88882. Playwright でアクセス確認
Playwright検証は LOCAL_URL を優先して実施する:
playwright-cli open <LOCAL_URL>
playwright-cli eval "document.title"
playwright-cli screenshot --filename=web-preview.png
playwright-cli closedocument.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© K9i-0, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (scripts) in .claude/skills/web-preview of K9i-0/ccpocket.
- SKILL.md
- scripts/web-preview.sh
Open the folder on GitHubat commit 8354ffd
Compare with similar skills
Web Preview next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Preview this skillK9i-0/ccpocket | 1.1k | — | ~359 | Automated safety check: Pass | MIT | |
| Specialist Integration Test GeneratorHoangNguyen0403/agent-skills-standard | 571 | — | ~548 | Automated safety check: Pass | MIT | |
| Awt E2E Testingsickn33/agentic-awesome-skills | 47k | 2 repos | ~556 | Automated safety check: Pass | MIT | |
| Flutter MCP Toolkit Maintain WebArenukvern/mcp_flutter | 386 | — | ~1.6k | Automated safety check: Pass | MIT | |
| WebsiteMelbourneDeveloper/dart_node | 113 | — | ~387 | Automated safety check: Notes | None | |
| QA TesterJocysCom/FocusLogger | 213 | — | ~12k | Automated safety check: Pass | GPL-3.0 |
Similar skills
Awt E2E Testing
sickn33/agentic-awesome-skills
AI-powered E2E web testing — eyes and hands for AI coding tools.
Flutter MCP Toolkit Maintain Web
Arenukvern/mcp_flutter
Maintains showcase/fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify, Chrome DevTools MCP).
Website
MelbourneDeveloper/dart_node
Build, serve, and test the dartnode documentation website (Eleventy + Playwright)
QA Tester
JocysCom/FocusLogger
Create and maintain automated tests in Microsoft-native/.NET projects with a minimal stack — MSTest runner, System.Windows.Automation for Windows desktop, Playwright for real browser smoke.
Cross Browser Testing
petrkindlmann/qa-skills
Design analytics-driven browser test matrices and execute cross-browser tests.
More from K9i-0/ccpocket
All 17 skills in this repoSim Preview
K9i-0/ccpocket
iOSシミュレーターで動くFlutterアプリをExpo Device HubとTailscale HTTPSでスマホのブラウザへ配信・操作するときに使う。
Codex Guide
K9i-0/ccpocket
Codex の使い方、CLI/app/IDE、rules・hooks・AGENTS.md・skills・subagents・config などを案内する。Codex や OpenAI 製品の仕様を答える前に必ず公式ドキュメントを確認し、rules/approval は codex execpolicy check で実検証すること。
Submit Store Review
K9i-0/ccpocket
既存の安定ビルドをApp Store / Google Playの審査へ提出・再提出する。新規ビルドはrelease-appを使う。
Flutter UI Design
K9i-0/ccpocket
Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）. An agent skill from K9i-0/ccpocket.
Flutter Upgrade
K9i-0/ccpocket
Flutter SDKのアップグレード、または指定バージョンへの移行影響を調査するときに使う. An agent skill from K9i-0/ccpocket.
Release App
K9i-0/ccpocket
ccpocketアプリのバージョン更新と、指定プラットフォーム向けリリースを行う. An agent skill from K9i-0/ccpocket.
Related
Works with
Categories
Questions about Web Preview
What does Web Preview do?
Flutter Web版をビルドしてユーザーにプレビューURLを案内する。playwright-cliでアクセス確認も行う。. Web Preview is an agent skill from K9i-0/ccpocket.
When should I use Web Preview?
Web Preview fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve Browser testing.
How do I install Web Preview in Claude Code?
Run `npx skills add K9i-0/ccpocket --skill web-preview -a claude-code`. Or copy the skill folder (.claude/skills/web-preview in K9i-0/ccpocket) into .claude/skills/web-preview in your project. Claude Code loads it when a task matches its description.
How do I install Web Preview in Codex?
Run `npx skills add K9i-0/ccpocket --skill web-preview -a codex`. Or copy the skill folder (.claude/skills/web-preview in K9i-0/ccpocket) into .agents/skills/web-preview in your project. Codex loads it when a task matches its description.
Can I use Web Preview in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add K9i-0/ccpocket --skill web-preview -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-preview, .gemini/skills/web-preview, .github/skills/web-preview and .opencode/skills/web-preview in your project.
What does Web Preview need to run?
Going by SKILL.md and its folder, Web Preview needs a shell for the scripts in its folder and the command-line tools its instructions call (python3, bash, flutter and curl). Our summary lists: Python 3; A Bash shell. Its frontmatter pre-approves these tools: Bash(bash:*), Bash(playwright-cli:*).
Does Web Preview access the network?
SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Web Preview safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Web Preview use?
Web Preview is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Web Preview use?
About 359 tokens (SKILL.md is roughly 1.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Web Preview?
Skills that share tags, products or a category with Web Preview: Specialist Integration Test Generator (HoangNguyen0403/agent-skills-standard, 571 stars), Awt E2E Testing (sickn33/agentic-awesome-skills, 47k stars), Flutter MCP Toolkit Maintain Web (Arenukvern/mcp_flutter, 386 stars) and Website (MelbourneDeveloper/dart_node, 113 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Preview?
K9i-0 (a GitHub user) maintains it in K9i-0/ccpocket, which has 1,083 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 3, 2026.
Source: K9i-0/ccpocket on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.