umbraco-quickstart

Umbraco クイックスタート

Umbraco 拡張機能の開発に必要なものをすべて 1 つのコマンドでセットアップします。

使用方法

# Full setup with custom credentials
/umbraco-quickstart MyUmbracoSite MyExtension --email [email protected] --password Admin123456

# With default credentials ([email protected] / SecurePass1234)
/umbraco-quickstart MyUmbracoSite MyExtension

# Just Umbraco instance name (will prompt for extension name)
/umbraco-quickstart MyUmbracoSite

# No arguments (will detect existing or prompt for names)
/umbraco-quickstart

ワークフロー

1. 引数を解析する

• 第 1 引数: Umbraco プロジェクト名 (例: "MyUmbracoSite")
• 第 2 引数: 拡張機能名 (例: "MyExtension")
• --email (任意): 管理者メールアドレス (デフォルト: [email protected])
• --password (任意): 管理者パスワード (デフォルト: SecurePass1234)

引数が指定されていない場合は、存在するものを確認し、不足している名前を入力するよう促します。

2. 存在するものを確認する

バージョンガード (最初に実行): 何かをビルドする前に、umbraco-version-guard を呼び出して、サイトの Umbraco メジャーバージョンがこれらのスキルが対象とするメジャーバージョンと一致することを確認します。一致しない場合は停止し、一致するスキルラインをユーザーに示してください — コードを生成しないでください。

Umbraco インスタンスを確認:

find . -name "*.csproj" -exec grep -l "Umbraco.Cms" {} \; 2>/dev/null | head -5

拡張機能プロジェクトを確認:

find . -name "umbraco-package.json" 2>/dev/null | head -10

3. アクションを実行する

Umbraco インスタンスがない場合:

• 指定された名前 (第 1 引数) を使用するか、名前を入力するよう促します
• /package-script-writer [ProjectName] で作成します

拡張機能がない場合:

• 指定された名前 (第 2 引数) を使用するか、名前を入力するよう促します
• /umbraco-extension-template [ExtensionName] で作成します

拡張機能が登録されていない場合:

• /umbraco-add-extension-reference [ExtensionName] で登録します

4. 任意のリソースについて警告する

拡張ワークスペース (/add-dir ディレクトリを含む) を確認し、不足している場合は警告します:

CMS ソースが見つからない場合:

⚠ Umbraco CMS source not found in extended workspace.
  For better code generation, add it:
  git clone https://github.com/umbraco/Umbraco-CMS
  /add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client

UUI ソースが見つからない場合:

⚠ UUI library source not found in extended workspace.
  For UI component reference, add it:
  git clone https://github.com/umbraco/Umbraco.UI
  /add-dir /path/to/Umbraco.UI/packages/uui

テストスキルがインストールされていない場合:

⚠ Testing skills not installed.
  To add testing capabilities:
  /plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace

5. 必須: プランモードに入る

このステップが完了するまでビルドに進まないでください。

1. セットアップが完了したことをユーザーに伝え、ログイン認証情報を表示します
2. umbraco-backoffice スキルから PRE-BUILD-PLANNING.md を読み込みます
3. 何をビルドしたいかをユーザーに尋ねます

✅ Setup complete! Your extension is ready.

Login: [email protected] / SecurePass1234

What would you like to build? Describe your idea and I'll help you plan the implementation.

Examples:
- "A dashboard that shows recent content changes"
- "A property editor for picking colours"
- "A tree in Settings for managing custom data"

ユーザーがやりたいことを説明したら:

1. /plan でプランモードに入ります
2. PRE-BUILD-PLANNING.md のワークフローに従います:
   • UI の ASCII ワイヤーフレームを描画します
   • 必要な拡張機能の種類 (セクション、ダッシュボード、ワークスペースなど) をラベル付けします
   • UUI コンポーネントを特定します
   • データフロー (コンテキスト、API) をマッピングします
3. 呼び出すべきサブスキルを特定します
4. プラン文書にこれらの必須セクションを含めます (プラン承認後に実行されます):

## Pre-Build Setup
- [ ] Load `/umbraco-backoffice` skill for best practices and examples

## Implementation
[Your implementation steps here - skills to invoke, files to create]

## Post-Build Validation (REQUIRED - DO NOT SKIP)

### Step 1: Initial Build
- [ ] Run `npm run build` in extension directory
- [ ] Verify build completes without errors

### Step 2: Code Review
- [ ] Spawn `umbraco-extension-reviewer` agent
- [ ] Fix all Critical/High severity issues

### Step 3: Rebuild (if fixes were made)
- [ ] Run `npm run build` again
- [ ] Verify build still succeeds

### Step 4: Restart Umbraco
- [ ] Stop the running Umbraco instance
- [ ] Run `dotnet run` to restart
- [ ] Wait for startup to complete

### Step 5: Browser Validation
Check if browser automation is available (any of: `dev-browser` skill, Playwright MCP, Claude computer use).

If validating with **Claude-in-Chrome** (`mcp__claude-in-chrome` tools): load the
`umbraco-chrome-navigation` skill first — the backoffice is Lit/shadow-DOM, so the built-in
find/read_page tools and raw screenshots are unreliable; that skill provides the
shadow-DOM-piercing helpers and navigation playbook needed to validate it.

If browser automation IS available:
- [ ] Navigate to backoffice login (http://localhost:5000/umbraco)
- [ ] Login with credentials
- [ ] Navigate to extension location
- [ ] Verify: no console errors, UI renders, interactions work
- [ ] Take screenshot of working extension

If NO browser automation available, output manual testing steps for user.

5. ワイヤーフレーム AND すべての検証セクションがプランに含まれている場合のみ、プランモードを終了します

⚠️ プランニングが完了し、ユーザーに承認されるまでコードを生成しないでください。

ゴール

ユーザーを動作する検証済みの拡張機能に導きます。ワークフローに従ってください: プラン → ビルド → 検証。報告するだけでなく、アクションを実行してください。

デフォルトの認証情報

Umbraco インスタンスを作成する際、以下のデフォルトが使用されます:

• メールアドレス: [email protected]
• パスワード: SecurePass1234

これらはローカル開発に安全であり、エスケープの問題を引き起こす特殊文字を含んでいません。

例

/umbraco-quickstart MyUmbracoSite MyDashboard

これにより以下が実行されます:

1. Umbraco インスタンス (例: "MyUmbracoSite") が存在しない場合に作成します
2. 拡張機能 (例: "MyDashboard") を作成します
3. 拡張機能を Umbraco プロジェクトに登録します
4. 該当する場合、不足している CMS/UUI ソースについて警告します
5. 拡張機能を設計するためにプランモードに入ります (ワイヤーフレーム、拡張機能の種類、検証ステップ)
6. 特定されたサブスキルを使用してビルドします
7. npm run build を実行します
8. umbraco-extension-reviewer を実行し、問題を修正します
9. 修正が行われた場合は再ビルドします
10. Umbraco を再起動します
11. ブラウザー検証 (ブラウザー自動化が利用可能な場合は自動、それ以外の場合は手動ステップ)

ログイン: [email protected] / SecurePass1234