zdev
Gitワークツリーを活用し、自動ポート転送やプレビューURLで分離された開発環境を管理するSkill。
📜 元の英語説明(参考)
Manage isolated dev environments with git worktrees, auto ports, and preview URLs
🇯🇵 日本人クリエイター向け解説
Gitワークツリーを活用し、自動ポート転送やプレビューURLで分離された開発環境を管理するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
zdev.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
zdevフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
zdev Skill
zdev を使用して、機能開発時に分離された開発環境を管理します。各機能には、独自の git worktree、ポート、およびオプションの公開プレビュー URL が割り当てられます。
前提条件
zdevCLI がインストールされていること (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
開始後:
.zdev/setup.shが自動的に実行されます (依存関係のインストールなど)。- worktree パス (例:
~/.zdev/worktrees/project-feature) をメモします。 - ローカル URL (例:
http://localhost:5173) をメモします。 - 利用可能な場合は公開 URL (例:
https://project-feature.dev.example.com) をメモします。 - 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.allowedHosts で vite.config.ts を自動的にパッチします。もし機能しない場合は、zdev config --list で devDomain が設定されていること、および 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
zdevCLI installed (bunx zdevorbun 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.shfor 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:
.zdev/setup.shruns automatically (installs deps, etc.)- Note the worktree path (e.g.,
~/.zdev/worktrees/project-feature) - Note the local URL (e.g.,
http://localhost:5173) - Note the public URL if available (e.g.,
https://project-feature.dev.example.com) cdto 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 URL → zdev 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 {}.