mcpField
U
umbraco-backoffice

umbraco-backoffice

github.com/umbraco開発27437 回インストール6 週間前に更新
リポジトリ

umbraco-backoffice について

Umbraco CMS のバックオフィスをカスタマイズする開発者向けのスキルです。拡張機能の設計図やサンプルを提供し、実装前の計画と完了後の検証を定めています。

主な機能

  1. 01拡張タイプの計画ガイド
  2. 02実用的な拡張設計図
  3. 03初級からフルスタックまでのサンプル
  4. 04実装前のワイヤーフレーム作成
  5. 05実装後の検証ワークフロー

活用シーン

  1. 01カスタム管理エリアの計画
  2. 02ツリー型ナビゲーションの構築
  3. 03バックエンド API 付き拡張の作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-backoffice

インストール後、Claude Code で/umbraco-backofficeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/Blueprint/
Blueprint.csproj
examples/Blueprint/Client/
package-lock.json
package.json
examples/Blueprint/Client/public/
umbraco-package.json
examples/Blueprint/Client/scripts/
generate-openapi.js
examples/Blueprint/Client/src/
bundle.manifests.ts
examples/Blueprint/Client/src/api/
client.gen.ts
index.ts
sdk.gen.ts
types.gen.ts
examples/Blueprint/Client/src/api/client/
client.gen.ts
index.ts
types.gen.ts
utils.gen.ts
examples/Blueprint/Client/src/api/core/
auth.gen.ts
bodySerializer.gen.ts
params.gen.ts
pathSerializer.gen.ts
serverSentEvents.gen.ts
types.gen.ts
utils.gen.ts
examples/Blueprint/Client/src/dashboards/
dashboard.element.ts
manifest.ts
examples/Blueprint/Client/src/entrypoints/
entrypoint.ts
manifest.ts
examples/Blueprint/Client/src/sections/
manifest.ts
examples/Blueprint/Client/src/workspaces/
context-token.ts
context.ts
manifest.ts
examples/Blueprint/Client/src/workspaces/views/
anotherWorkspace.element.ts

詳細

Umbraco バックオフィス拡張の概要

このスキルの目的

バックオフィスのカスタマイズは、複数の拡張タイプの組み合わせが連携して動作するものです:

  • 「カスタム管理エリア」= セクション + メニュー + ダッシュボード
  • 「データ管理ツール」= セクション + メニュー + ワークスペース
  • 「階層ブラウザー」= セクション + メニュー + ツリー + ワークスペース

このスキルは、すぐに動作する完全なブループリントを提供します。ソースコードは ./examples/ にあります - コピーしてニーズに合わせて調整してください。

個々の拡張タイプの詳細については、参照されているサブスキルを呼び出してください。

TIP: Umbraco CMS のソースコードがワークスペースで利用可能な場合は、参照およびインスピレーションのために使用してください。src/Umbraco.Web.UI.Client/src/packages/ にあるバックオフィスクライアントのコードは、すべての拡張タイプの本番実装を示しています - コアチームがセクション、ワークスペース、ツリー、その他のパターンをどのように構成しているかを研究してください。

必須ワークフロー

重要: このワークフローは、すべての拡張開発において必須です。

ステップ 0 — バージョンガード: 計画を立てる前に、umbraco-version-guard を呼び出して、 サイトの Umbraco メジャーバージョンがこれらのスキルが対象とするメジャーバージョンと一致することを確認してください。 不一致の場合は停止してください — バックオフィス API は Umbraco のメジャーバージョン間で異なり、これらのスキルは誤ったコードを生成します。

1. PLAN ──► Read PRE-BUILD-PLANNING.md FIRST
   │        Draw wireframe, label extension types, identify UUI components
   │        ⚠️ DO NOT write code until wireframe is approved
   ↓
2. BUILD ──► Use examples and sub-skills to create extension
   │
   │        ⛔ STOP - Do not skip validation
   ↓
3. VALIDATE ──► MANDATORY post-build steps:
               • npm run build (must pass)
               • Spawn umbraco-extension-reviewer agent
               • Fix High/Medium issues without asking
               • Browser test per POST-BUILD-VALIDATION.md

計画をスキップした場合: 誤った拡張タイプを構築することになります。 検証をスキップした場合: バグがユーザーに到達することになります。

このワークフローは、/umbraco-quickstart 経由で呼び出された場合でも、直接呼び出された場合でも適用されます。

重要: すべての拡張開発において、このワークフローに従ってください:

1. PLAN ──► Read PRE-BUILD-PLANNING.md, draw wireframes, identify extension types
      ↓
2. BUILD ──► Use examples and sub-skills to create extension
      ↓
3. VALIDATE ──► Read POST-BUILD-VALIDATION.md, run umbraco-extension-reviewer
  • 計画を絶対にスキップしない - ワイヤーフレームは誤った拡張タイプの構築を防ぎます
  • 検証を絶対にスキップしない - レビュアーは問題がユーザーに到達する前にキャッチします

利用可能なサンプル

各サンプルには、完全なドキュメントを記載した詳細な README.md があります。examples/ フォルダーを参照してください。

サンプル複雑さ内容
Blueprint入門セクション + メニュー + ダッシュボード + ワークスペース - 基本的なパターン
tree-example中級Settings セクションにおけるワークスペース付きツリーナビゲーション
TimeDashboard上級Header Apps、モーダル、プロパティエディターを含む 13 以上の拡張タイプ
notes-wikiフルスタックCRUD、階層ツリー、複数のワークスペースを備えた完全な C# バックエンド
クイックリファレンス
  • 新しいセクションが必要? Blueprint から始めてください
  • ツリーナビゲーションが必要? tree-example を参照してください
  • 特定の拡張タイプが必要? 例については TimeDashboard を確認してください
  • API を備えたフルスタックが必要? notes-wiki を研究してください

サンプルの使用方法

  1. examples/ フォルダーを閲覧し、各サンプルの README.md を読んでください
  2. ニーズに最も近いサンプルをプロジェクトにコピーしてください
  3. サンプルの名前空間から自分の名前空間にエイリアスを名前変更してください (例: Blueprint.* から MyApp.*)
  4. entityType の値をドメインに合わせて更新してください
  5. ユースケースに合わせて UI コンポーネントをカスタマイズしてください
  6. umbraco-package.json を介して Umbraco に登録してください
  7. メインの Umbraco インスタンスにプロジェクト参照を追加してください - スキル umbraco-add-extension-reference を使用してください

リファレンスドキュメント

詳細なリファレンス資料は、オンデマンドで読み込むために別のファイルで利用可能です:

リファレンス読むタイミング
PRE-BUILD-PLANNING.md拡張を構築する前 - ビジュアル計画、ワイヤーフレーム、UUI コンポーネント
EXTENSION-MAP.md「拡張タイプ X は UI のどこに表示される?」 - すべての拡張の配置を示す ASCII 図
SUB-SKILLS-REFERENCE.md「X にはどのスキルが必要?」 - カテゴリ別のすべてのサブスキルの完全なインデックス
POST-BUILD-VALIDATION.md構築後 - 完全な検証ワークフロー、ブラウザーテスト、デバッグ

コメント

Markdown 対応