Agent skill

Sim Preview

by K9i-0 in K9i-0/ccpocket

iOSシミュレーターで動くFlutterアプリをExpo Device HubとTailscale HTTPSでスマホのブラウザへ配信・操作するときに使う。

MITAuto-check passedMobile

Install Sim Preview

skills CLI
$ npx skills add K9i-0/ccpocket --skill sim-preview -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install K9i-0/ccpocket sim-preview --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/sim-preview .claude/skills/sim-preview && rm -rf skills-src

Use ~/.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/

Facts

Skill name
sim-preview
GitHub stars
1.1k
Token cost
~711 tokens
SKILL.md length
119 words
Files
2 (incl. scripts)
Skills in repo
17
Repo updated
First seen
Licence
MIT

At a glance

iOSシミュレーターで動くFlutterアプリをExpo Device HubとTailscale HTTPSでスマホのブラウザへ配信・操作するときに使う。

  • Works in 5 steps: シミュレーターとアプリ → Device Hubを起動 → Tailscale内限定のHTTPSを設定 → …
  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers 1. シミュレーターとアプリ, 2. Device Hubを起動, 3. Tailscale内限定のHTTPSを設定 and 4. 配信確認とユーザーへの案内, plus 2 more sections
  • Runs Shell scripts from its folder; calls xcrun, bash and npm

What it does

Sim Preview is an agent skill from K9i-0/ccpocket. iOSシミュレーターで動くFlutterアプリをExpo Device HubとTailscale HTTPSでスマホのブラウザへ配信・操作するときに使う。

Its SKILL.md is about 710 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including scripts (for example `scripts/sim-preview.sh`).

It sits in Mobile, covering Cross-platform mobile apps. It works with Expo, Flutter and iOS. 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

Example prompts

  • “/sim-preview”

Requirements

  • Node.js
  • A Bash shell

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. シミュレーターとアプリ
  2. Device Hubを起動
  3. Tailscale内限定のHTTPSを設定
  4. 配信確認とユーザーへの案内
  5. 継続・終了

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 nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    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:

    • xcrun
    • bash
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    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

Sim Preview loads about 711 tokens when it runs. Until then it costs about 23 tokens; SKILL.md has 119 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~23
When it runs · the whole SKILL.md, loaded when a task matches
~711

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). 119 words, ~711 tokens.

Download SKILL.mdSave it as .claude/skills/sim-preview/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
sim-preview
description
iOSシミュレーターで動くFlutterアプリをExpo Device HubとTailscale HTTPSでスマホのブラウザへ配信・操作するときに使う。

Simulator Preview (Expo Device Hub)

MacのiOSシミュレーターを Expo Device Hub → Tailscale Serve (HTTPS) → スマホのブラウザ で配信する。Expoプロジェクトは不要。Flutterアプリをそのまま確認・操作できる。

既定はH.264・30fps・最大1000px・2.5Mbps。Device Hub 0.10.1でccpocketの配信を確認し、ユーザーから旧VNC方式より快適との評価を得た設定。TrollVNC / noVNCを既定に戻さない。

1. シミュレーターとアプリ

bash
xcrun simctl list devices booted

対象アプリが既に動いていれば再利用する。起動が必要な場合やhot reloadには mobile-automation を使う。テスト用Bridgeが必要なら8766を使い、本番8765を停止・再起動しない。

前提はMac + Xcode、Node.js/npm、MacとスマホのTailscale接続。CoreSimulatorへのアクセスがサンドボックスで拒否された場合は、シミュレーターの故障と判断せず適切な実行権限で再確認する。

2. Device Hubを起動

既存のDevice HubとTailscale Serveの状態を確認し、目的の配信が動いていれば再利用する。

bash
lsof -nP -iTCP:3400 -sTCP:LISTEN
tailscale serve status

新規起動には以下を使う。スクリプトはDevice Hubのみを起動し、アプリ起動やTailscale設定は別に行う。

bash
bash .claude/skills/sim-preview/scripts/sim-preview.sh
  • ローカル待受は 127.0.0.1:3400。npm経由で検証済みバージョンを取得し、リポジトリの依存関係は変更しない。
  • 長時間実行できるツールセッションで起動し、停止用のセッションID / PIDとログを控える。
  • 3400が使用中ならプロセスを勝手に停止せず、既存配信を確認するか SIM_PREVIEW_PORT=3401 などの空きポートを選ぶ。起動ログの実際のポートを確認する。
  • 更新時は対象バージョンの --help を確認する。配信設定の変更はブラウザの「Stream options」からも試せる。

3. Tailscale内限定のHTTPSを設定

リモートのH.264 / WebRTCにはHTTPSが必要。 http://<Tailscale IP>:3400 ではMJPEGへフォールバックする。localhostでH.264が動くだけではスマホ向け検証の完了にならない。

tailscale serve status に今回のHubを指す設定があれば再利用する。未設定なら、起動ログのポートに合わせて設定する。

bash
tailscale serve --bg --https=443 http://127.0.0.1:3400
  • 443に別サービスの設定がある場合は上書きせず、未使用のHTTPSポート(例: --https=8443)を選ぶ。
  • Serveが未有効なら、CLIが出力した有効化URLを案内する。ログインが必要ならユーザーに操作を依頼し、完了後に上記コマンドを再実行する。有効化だけでは転送設定が作成されないことがある。
  • 出力された https://<MacのDNS名>.ts.net[:port]/ を使う。ホスト名を固定値で書かない。
  • tailscale がPATHにない環境では /Applications/Tailscale.app/Contents/MacOS/Tailscale を確認する。
  • インターネット公開の tailscale funnel は使用しない。

4. 配信確認とユーザーへの案内

実際のHTTPS URLをブラウザで開き、以下を確認する。

  • 対象シミュレーターが Live になり、ccpocketの映像が表示される。
  • 「Stream options」でHTTP codecが H.264、Video FPSが 30 FPS、Max sizeが 1000 px、Video bitrateが 2.5 Mbps になっている(意図して調整した場合はその値)。

スマホのTailscaleをONにして開くHTTPSリンクを案内する。ユーザーにタップ・スクロール・文字入力の体感を試してもらい、Mac側の表示確認とスマホ側の確認結果を区別して報告する。遅延が残る場合は同画面で解像度やビットレートを調整して比較する。

初回のページ遷移がタイムアウトしても、再度画面状態を確認すると Live になっている場合がある。MJPEGになる場合はHTTPS URLとコーデック設定を確認する。

5. 継続・終了

プレビュー依頼中はDevice HubとHTTPS転送を残す。コード変更後のhot reloadはFlutter側で行い、配信画面で結果を確認する。

停止を依頼されたら、自分が起動したHubのセッションまたはPIDだけを停止する。今回追加したServe設定も不要になった場合のみ、対象HTTPSポートの転送を解除する。

bash
# 今回443に追加した転送を終了する場合。別ポートなら置き換える。
tailscale serve --https=443 off

既存の共有設定を巻き込む tailscale serve reset やプロセス名による一括killは使わない。

参照

  • Expo Device Hub: standalone起動と配信方式。
  • 起動オプション: npm exec --yes --package=expo-device-hub@0.10.1 -- expo-device-hub --help

© 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/sim-preview of K9i-0/ccpocket.

  • SKILL.md
  • scripts/sim-preview.sh

Open the folder on GitHubat commit 8354ffd

Compare with similar skills

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

Sim Preview compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Sim Preview this skillK9i-0/ccpocket1.1k—~711Automated safety check: PassMIT
Revyl CLI Auth BypassRevylAI/revyl-cli522—~2.5kAutomated safety check: PassNone
Mobile Appww-w-ai/bkit-claude-code601—~2.9kAutomated safety check: NotesApache-2.0
Pulsar Hapticssoftware-mansion-labs/skills291—~2.6kAutomated safety check: PassNone
Web3authWeb3Auth/web3auth-examples144—~1.4kAutomated safety check: PassMIT
Engine Whats Newflutter/flutter179k—~978Automated safety check: PassBSD-3-Clause

Similar skills

  • Revyl CLI Auth Bypass

    RevylAI/revyl-cli

    Set up test-only auth bypass for Revyl runs across Expo, React Native, native iOS, native Android, and Flutter apps.

    522 GitHub stars~2.5k tokensUpdated today
    MobileAuto-check passed
  • Mobile App

    ww-w-ai/bkit-claude-code

    Mobile app development guide — React Native, Flutter, Expo for cross-platform.

    601 GitHub stars~2.9k tokensUpdated 11 days ago
    MobileAuto-check: notes
  • Pulsar Haptics

    software-mansion-labs/skills

    Implement, migrate, design, review, and troubleshoot haptic feedback with Software Mansion Pulsar across React Native, iOS, Android, Kotlin Multiplatform, Flutter, and Web.

    291 GitHub stars~2.6k tokensUpdated 10 days ago
    MobileAuto-check passed
  • Web3auth

    Web3Auth/web3auth-examples

    Integrates MetaMask Embedded Wallets (Web3Auth) for non-custodial wallets via social login or custom JWT (Firebase, Auth0, Cognito).

    144 GitHub stars~1.4k tokensUpdated 4 days ago
    Backend & APIsAuto-check passed
  • Engine Whats New

    flutter/flutter

    Generates the "what's new" release summary and diff file for changes in the Flutter engine (//engine/src/flutter) between two releases (e.g., 3.47 vs 3.44).

    179k GitHub stars~978 tokensUpdated today
    MobileAuto-check passed
  • Building Native UI

    CherryHQ/cherry-studio-app

    Complete guide for building beautiful apps with Expo Router.

    4k GitHub starsUsed in 8 repos~2.6k tokens
    MobileAuto-check passed

More from K9i-0/ccpocket

All 17 skills in this repo
  • Codex Guide

    K9i-0/ccpocket

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

    1.1k GitHub stars~475 tokensUpdated 5 days ago
    Auto-check passed
  • Submit Store Review

    K9i-0/ccpocket

    既存の安定ビルドをApp Store / Google Playの審査へ提出・再提出する。新規ビルドはrelease-appを使う。

    1.1k GitHub stars~1.8k tokensUpdated 5 days ago
    Auto-check passed
  • Web Preview

    K9i-0/ccpocket

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

    1.1k GitHub stars~359 tokensUpdated 5 days ago
    Auto-check passed
  • Flutter UI Design

    K9i-0/ccpocket

    Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド(Bloc/Cubit版). An agent skill from K9i-0/ccpocket.

    1.1k GitHub stars~1.2k tokensUpdated 5 days ago
    Auto-check passed
  • Flutter Upgrade

    K9i-0/ccpocket

    Flutter SDKのアップグレード、または指定バージョンへの移行影響を調査するときに使う. An agent skill from K9i-0/ccpocket.

    1.1k GitHub stars~789 tokensUpdated 5 days ago
    Auto-check passed
  • Release App

    K9i-0/ccpocket

    ccpocketアプリのバージョン更新と、指定プラットフォーム向けリリースを行う. An agent skill from K9i-0/ccpocket.

    1.1k GitHub stars~1.1k tokensUpdated 5 days ago
    Auto-check passed

Works with

Categories

Questions about Sim Preview

What does Sim Preview do?

iOSシミュレーターで動くFlutterアプリをExpo Device HubとTailscale HTTPSでスマホのブラウザへ配信・操作するときに使う。. Sim Preview is an agent skill from K9i-0/ccpocket.

When should I use Sim Preview?

Sim Preview fits situations like: tasks that involve Cross-platform mobile apps.

How do I install Sim Preview in Claude Code?

Run `npx skills add K9i-0/ccpocket --skill sim-preview -a claude-code`. Or copy the skill folder (.claude/skills/sim-preview in K9i-0/ccpocket) into .claude/skills/sim-preview in your project. Claude Code loads it when a task matches its description.

How do I install Sim Preview in Codex?

Run `npx skills add K9i-0/ccpocket --skill sim-preview -a codex`. Or copy the skill folder (.claude/skills/sim-preview in K9i-0/ccpocket) into .agents/skills/sim-preview in your project. Codex loads it when a task matches its description.

Can I use Sim 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 sim-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/sim-preview, .gemini/skills/sim-preview, .github/skills/sim-preview and .opencode/skills/sim-preview in your project.

What does Sim Preview need to run?

Going by SKILL.md and its folder, Sim Preview needs a shell for the scripts in its folder and the command-line tools its instructions call (xcrun, bash and npm). Our summary lists: Node.js; A Bash shell.

Does Sim Preview access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Sim 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 Sim Preview use?

Sim 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 Sim Preview use?

About 711 tokens (SKILL.md is roughly 2.8k 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 Sim Preview?

Skills that share tags, products or a category with Sim Preview: Revyl CLI Auth Bypass (RevylAI/revyl-cli, 522 stars), Mobile App (ww-w-ai/bkit-claude-code, 601 stars), Pulsar Haptics (software-mansion-labs/skills, 291 stars) and Web3auth (Web3Auth/web3auth-examples, 144 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sim 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.