jpskill.com
🛠️ 開発・MCP コミュニティ

zdev

Gitワークツリーを活用し、自動ポート転送やプレビューURLで分離された開発環境を管理するSkill。

📜 元の英語説明(参考)

Manage isolated dev environments with git worktrees, auto ports, and preview URLs

🇯🇵 日本人クリエイター向け解説

一言でいうと

Gitワークツリーを活用し、自動ポート転送やプレビューURLで分離された開発環境を管理するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o zdev.zip https://jpskill.com/download/6785.zip && unzip -o zdev.zip && rm zdev.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/6785.zip -OutFile "$d\zdev.zip"; Expand-Archive "$d\zdev.zip" -DestinationPath $d -Force; ri "$d\zdev.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して zdev.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → zdev フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

zdev Skill

zdev を使用して、機能開発時に分離された開発環境を管理します。各機能には、独自の git worktree、ポート、およびオプションの公開プレビュー URL が割り当てられます。

前提条件

  • zdev CLI がインストールされていること (bunx zdev または bun add -g zdev)
  • Vite ベースのフロントエンドプロジェクトであること (Convex バックエンドはオプションで、自動検出されます)

新しいプロジェクトの作成

# 基本的な TanStack Start プロジェクト
zdev create my-app

# Convex バックエンドを使用する場合
zdev create my-app --convex

# フラットな構造 (モノレポではない)
zdev create my-app --flat

作成されるもの:

  • クリーンなルーティングを持つ TanStack Start アプリ
  • worktree セットアップ用の .zdev/setup.sh
  • UI フィードバックのための Agentation (開発時のみ)

既存のプロジェクトの初期化

zdev init /path/to/project

プロジェクトのメタデータを含む .zdev/project.json を作成します。

設定

初回セットアップ (または設定変更) の場合:

zdev config --set devDomain=dev.example.com
zdev config --set traefikConfigDir=/etc/traefik/dynamic
zdev config --list

機能を始める前に

# 既に実行中のものを確認
zdev list

もしあなたの機能が既に存在する場合は、表示されている worktree パスに cd するだけです。

新しい機能の開始

# 公開 URL 付きで機能を開始
zdev start <feature-name> -p /path/to/project

# 公開 URL なしで開始 (ローカルのみ)
zdev start <feature-name> -p /path/to/project --local

# シードデータ付きで開始 (Convex プロジェクト)
zdev start <feature-name> -p /path/to/project --seed

# 異なるベースブランチを使用
zdev start <feature-name> -p /path/to/project --base-branch main

開始後:

  1. .zdev/setup.sh が自動的に実行されます (依存関係のインストールなど)。
  2. worktree パス (例: ~/.zdev/worktrees/project-feature) をメモします。
  3. ローカル URL (例: http://localhost:5173) をメモします。
  4. 利用可能な場合は公開 URL (例: https://project-feature.dev.example.com) をメモします。
  5. worktree パスに cd して作業を開始します。

作業中

あなたは、独自の以下の要素を持つ分離された git worktree にいます:

  • ブランチ (feature/<name>)
  • Node モジュール
  • Convex 開発インスタンス (該当する場合)
  • ポート割り当て

通常通り作業してください。頻繁にコミットし、レビューの準備ができたらプッシュしてください。

git add .
git commit -m "description"
git push -u origin feature/<name>

作業の停止 (セッション終了時)

# サーバーを停止するが worktree は保持 (後で再開)
zdev stop <feature-name> -p /path/to/project --keep

# または、すぐに戻る予定がある場合は実行したままにする

作業の再開

# ステータスを確認
zdev list

# 停止している場合は再起動
zdev start <feature-name> -p /path/to/project

# 既に実行中の場合は、worktree に cd するだけ
cd ~/.zdev/worktrees/project-feature

出力の表示

zdev の出力をユーザーに表示する際は、以下の点に注意してください:

  • URL を Markdown テーブルやコードブロック内に入れないでください — クリックできなくなります。
  • URL はプレーンテキストとして独自の行に配置してください。
  • URL の前にインライン書式設定ではなく、太字のラベルを使用してください。

例:

**Local:** http://localhost:5185
**Public:** https://project-feature.dev.example.com

以下のようにしないでください:

| Local | `http://localhost:5185` |  ← URL はクリックできません!

プルリクエストの作成

# 自動生成されたタイトルとプレビュー URL で PR を作成
zdev pr -p /path/to/project

# カスタムタイトルで PR を作成
zdev pr -p /path/to/project --title "Add user authentication"

# ドラフト PR を作成
zdev pr -p /path/to/project --draft

# CLI ではなくブラウザで PR を開く
zdev pr -p /path/to/project --web

PR の本文にはプレビュー URL が自動的に含まれます。

PR マージ後

# 完全にクリーンアップ
zdev clean <feature-name> -p /path/to/project

これにより、worktree、Traefik ルート、およびポート割り当てが削除されます。

クイックリファレンス

タスク コマンド
新しいプロジェクトを作成 zdev create NAME
既存のプロジェクトを初期化 zdev init PATH
設定 zdev config --list
実行中のものを確認 zdev list
機能を開始 zdev start NAME -p PATH
PR を作成 zdev pr -p PATH
停止 (ファイルを保持) zdev stop NAME -p PATH --keep
停止 (完全) zdev stop NAME -p PATH
マージ後に削除 zdev clean NAME -p PATH

トラブルシューティング

"Feature already exists" → 既に実行中です。zdev list を使用して worktree パスを見つけてください。

"Failed to create worktree: invalid reference"--base-branch master または正しいブランチ名を使用してください。

ポート競合 → ポートを指定してください: zdev start NAME --port 5200

公開 URL がない → まず zdev config --set devDomain=dev.example.com を実行してください。

Convex が動作しない → まずメインプロジェクトで bunx convex dev を一度実行し、Convex プロジェクトを選択してください。

Vite "host not allowed" / プレビュー URL で 403 エラーzdev start は、設定された devDomain を使用して server.allowedHostsvite.config.ts を自動的にパッチします。もし機能しない場合は、zdev config --listdevDomain が設定されていること、および Vite 設定が defineConfig({}) または export default {} を使用していることを確認してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

zdev Skill

Use zdev to manage isolated development environments when working on features. Each feature gets its own git worktree, ports, and optional public preview URL.

Prerequisites

  • zdev CLI installed (bunx zdev or bun add -g zdev)
  • Vite-based frontend project (Convex backend is optional, auto-detected)

Creating a New Project

# Basic TanStack Start project
zdev create my-app

# With Convex backend
zdev create my-app --convex

# Flat structure (no monorepo)
zdev create my-app --flat

Creates:

  • TanStack Start app with clean routes
  • .zdev/setup.sh for worktree setup
  • Agentation for UI feedback (dev only)

Initializing an Existing Project

zdev init /path/to/project

Creates .zdev/project.json with project metadata.

Configuration

First-time setup (or to change settings):

zdev config --set devDomain=dev.example.com
zdev config --set traefikConfigDir=/etc/traefik/dynamic
zdev config --list

Before Starting Any Feature

# Check what's already running
zdev list

If your feature already exists, just cd to the worktree path shown.

Starting a New Feature

# Start feature with public URL
zdev start <feature-name> -p /path/to/project

# Start without public URL (local only)
zdev start <feature-name> -p /path/to/project --local

# Start with seed data (Convex projects)
zdev start <feature-name> -p /path/to/project --seed

# Use different base branch
zdev start <feature-name> -p /path/to/project --base-branch main

After starting:

  1. .zdev/setup.sh runs automatically (installs deps, etc.)
  2. Note the worktree path (e.g., ~/.zdev/worktrees/project-feature)
  3. Note the local URL (e.g., http://localhost:5173)
  4. Note the public URL if available (e.g., https://project-feature.dev.example.com)
  5. cd to the worktree path to begin work

While Working

You're in an isolated git worktree with its own:

  • Branch (feature/<name>)
  • Node modules
  • Convex dev instance (if applicable)
  • Port allocation

Work normally. Commit often. Push when ready for review.

git add .
git commit -m "description"
git push -u origin feature/<name>

Stopping Work (End of Session)

# Stop servers but keep worktree (resume later)
zdev stop <feature-name> -p /path/to/project --keep

# Or just leave it running if you'll be back soon

Resuming Work

# Check status
zdev list

# If stopped, restart
zdev start <feature-name> -p /path/to/project

# If already running, just cd to the worktree
cd ~/.zdev/worktrees/project-feature

Presenting Output

When showing zdev output to users:

  • Never put URLs inside markdown tables or code blocks — they won't be clickable
  • Place URLs on their own line as plain text
  • Use bold labels before URLs, not inline formatting

Example:

**Local:** http://localhost:5185
**Public:** https://project-feature.dev.example.com

NOT like this:

| Local | `http://localhost:5185` |  ← URLs not clickable!

Creating a Pull Request

# Create PR with auto-generated title and preview URL
zdev pr -p /path/to/project

# Create PR with custom title
zdev pr -p /path/to/project --title "Add user authentication"

# Create draft PR
zdev pr -p /path/to/project --draft

# Open PR in browser instead of CLI
zdev pr -p /path/to/project --web

The PR body automatically includes the preview URL.

After PR is Merged

# Clean up completely
zdev clean <feature-name> -p /path/to/project

This removes the worktree, Traefik route, and port allocation.

Quick Reference

Task Command
Create new project zdev create NAME
Init existing project zdev init PATH
Configure zdev config --list
See what's running zdev list
Start feature zdev start NAME -p PATH
Create PR zdev pr -p PATH
Stop (keep files) zdev stop NAME -p PATH --keep
Stop (full) zdev stop NAME -p PATH
Remove after merge zdev clean NAME -p PATH

Troubleshooting

"Feature already exists" → It's already running. Use zdev list to find the worktree path.

"Failed to create worktree: invalid reference" → Use --base-branch master or the correct branch name.

Port conflict → Specify a port: zdev start NAME --port 5200

No public URL → Run zdev config --set devDomain=dev.example.com first.

Convex not working → Run bunx convex dev once in the main project first to select a Convex project.

Vite "host not allowed" / 403 on preview URLzdev start auto-patches vite.config.ts with server.allowedHosts using the configured devDomain. If it didn't work: check zdev config --list has devDomain set, and that your vite config uses defineConfig({}) or export default {}.