appbuilder-ui-scaffolder

App Builder UI スキャフォルダー

Adobe Experience Cloud Shell の SPA 向けに React Spectrum UI を生成します。これはリファレンスベースのスキルです。エージェントはパターンを読み取り、静的なテンプレートをコピーするのではなく、状況に適したコードを生成します。

Workfront 拡張 UI を構築していますか？Workfront の拡張ポイント（メインメニュー、オブジェクトごとの左パネル、カスタムフォームウィジェット）と Workfront の共有コンテキストは、workfront-ui-extension にあります。このスキルは、そこで呼び出す汎用的な Spectrum コンポーネントのパターン（ページ、フォーム、テーブル、ダイアログ、ナビゲーション）に使用してください。

パターンのクイックリファレンス

ユーザーの意図を特定し、参照先のセクションを読んで、要望に合わせたコードを生成します。

ユーザーの要望	リファレンス	主なコンポーネント
シェルコンテキストを含む新しいページ	references/ui-patterns.md § Page + references/shell-integration.md	View、Heading、Content
検証機能付きフォーム	references/ui-patterns.md § Form	Form、TextField、NumberField、Picker、Button
データテーブル（並べ替え、ページネーション対応）	references/ui-patterns.md § Table	TableView、TableHeader、Column、TableBody、Row、Cell
確認ダイアログ／モーダル	references/ui-patterns.md § Dialog	DialogTrigger、AlertDialog、Dialog
ナビゲーションレイアウト	references/ui-patterns.md § Navigation	Tabs、Breadcrumbs、Flex
ExC Shell のセットアップ	references/shell-integration.md	@adobe/exc-app、Provider、defaultTheme
UI をバックエンドのアクションに接続	references/action-integration.md	IMS トークンを使用した fetch()
AEM UI Extension（CF Console、CF Editor、Universal Editor、Assets View）	references/aem-extensions.md	@adobe/uix-guest、register()、sharedContext
Content Hub 拡張機能（パネル、カードアクション、一括アクション）	references/aem-extensions.md § Content Hub	@adobe/uix-guest、register()、attach()、assetDetails／card／selectionBar 名前空間、host.modal.openDialog
UI の問題をデバッグ	references/debugging.md	シェルのスピナー、CORS、空白画面、認証

最短手順（明確なリクエストの場合）

ユーザーのリクエストが上記の単一パターンに明確に当てはまる場合（特定のコンポーネントタイプを指定している、UI パターンに言及している、またはいずれかの項目に明確に一致するユースケースを説明している場合）は、そのまま作業を進めます。

1. ユーザーの既存のプロジェクト構成（web-src/src/）を確認し、規約（ファイル名、インポートスタイル、既存のコンポーネント）を把握します
2. 該当する references/ ファイルを読み、コンポーネントのガイダンスと注釈付きの例を確認します
3. ユーザーの既存の規約に沿ったコードを生成します
4. React Router がある場合は、既存のルーティングに組み込みます
5. references/checklist.md に照らして検証します

最短手順を適用できるリクエストの例：

• 「データテーブルのページを追加して」→ references/ui-patterns.md § Table を読み、そのまま生成します

• 「データ送信用のフォームを作成して」→ references/ui-patterns.md § Form を読み、そのまま生成します

• 「確認ダイアログを追加して」→ references/ui-patterns.md § Dialog を読み、そのまま生成します

• 「シェル統合をセットアップして」→ references/shell-integration.md を読み、そのまま生成します

• 「Content Fragment Console 拡張機能を構築して」→ references/aem-extensions.md § CF Console を読み、そのまま生成します

• 「Universal Editor にヘッダーメニューボタンを追加して」→ references/aem-extensions.md § Universal Editor を読み、そのまま生成します

• 「uix-guest を使って AEM 拡張機能を作成して」→ references/aem-extensions.md § Core Registration を読み、そのまま生成します

• 「Content Hub のパネル／カードアクション／一括アクションを追加して」→ references/aem-extensions.md § Content Hub を読み、そのまま生成します

• 「新しい拡張機能を一から作成／スキャフォールドして」→ appbuilder-project-init スキルに案内します（Console のセットアップ、テンプレートの選択、ファイルの生成、開発サーバー）

曖昧な点がある場合（複数のパターンが当てはまる可能性がある、制約が不明確、またはユーザーの指定が不十分な場合）は、以下の完全なワークフローに進みます。

クイックリファレンス

• UI のエントリーポイント： コンポーネントは web-src/src/components/ に配置します。これは標準的な App Builder の SPA レイアウトです。
• シェルとの統合： 必ず @adobe/exc-app で初期化し、runtime.done() を呼び出して読み込みスピナーを閉じます。references/shell-integration.md を参照してください。
• Spectrum のインポート： すべてのコンポーネントは @adobe/react-spectrum からインポートします。カタログ全体については、references/spectrum-components.md を参照してください。
• ルーティング： シェル内での SPA ナビゲーションには react-router-dom を使用します。references/routing-patterns.md を参照してください。
• バックエンド呼び出し： App Builder アクションを呼び出す際は、シェルの IMS トークンを渡します。references/action-integration.md を参照してください。
• テーマ設定： Spectrum のスタイルを適用するため、アプリを <Provider theme={defaultTheme}> でラップします。
• アクセシビリティ： すべての Spectrum コンポーネントには、ARIA サポートが組み込まれています。インタラクティブな要素にはラベルを追加します。references/checklist.md を参照してください。
• デバッグ： よくある問題（画面が真っ白になる、CORS エラー、認証の失敗、読み込みが遅いなど）については、references/debugging.md を参照してください。

全体的なワークフロー（曖昧または複雑なリクエストの場合）

1. ユーザーのプロジェクトを確認します。web-src/ の構造、React のバージョン、既存のインポート、ルーティング設定、拡張機能の種類を示す app.config.yaml を確認してください
2. 目標とする成果、制約、受け入れ条件をユーザーに確認します
3. 上記のクイックリファレンス表から、必要な UI パターンを特定します
4. 対応する references/ ファイルを読み、コンポーネントのガイダンスと注釈付きの例を確認します
5. 汎用的なテンプレートではなく、ユーザーの既存の規約に合ったコードを生成します
6. React Router がある場合は、既存のルーティングに組み込みます（references/routing-patterns.md）
7. データ取得が必要な場合は、バックエンドアクションに接続します（references/action-integration.md）
8. 完了とする前に、references/checklist.md に照らして検証します
9. ユーザーから問題の報告があった場合は、よくある SPA のデバッグシナリオについて references/debugging.md を参照します
10. 判断内容、コンポーネントの選択、今後必要な対応をまとめます

ユーザーのプロンプト例

• 「データテーブルを表示するページを App Builder の SPA に追加してください。」
• 「App Builder アプリで顧客データを送信するフォームを作成してください。」
• 「App Builder アプリに Experience Cloud Shell との統合を設定してください。」
• 「レコードを削除する前に確認ダイアログを追加してください。」
• 「App Builder の SPA にナビゲーションサイドバーを構築してください。」
• 「App Builder アプリにフォームフィールドを含む設定ページが必要です。」
• 「アクションバーボタンを備えた Content Fragment Console 拡張機能を構築してください。」
• 「Content Fragment Editor にカスタム RTE ツールバーボタンを追加してください。」
• 「ヘッダーメニューボタンを備えた Universal Editor 拡張機能を作成してください。」
• 「Content Hub Asset Details Dialog にカスタムパネルを追加してください。」
• 「Content Hub 拡張機能を構築してください。」
• 「Content Hub のアセットカードにアクションボタンを追加してください。」
• 「Content Hub の選択バーに一括アクションを追加してください。」
• 「Content Hub 拡張機能の UI をカスタマイズしてください。」

依頼する情報

• 現在のリポジトリパスと web-src/ の構造
• 対象となる UI パターンと具体的なデータ要件
• 既存のルーティング設定（ある場合）
• データ取得に使用するバックエンドアクションの URL（該当する場合）
• 非機能要件：アクセシビリティ要件、レスポンシブのブレークポイント

成果物

• ユーザーのプロジェクト規約に沿った React Spectrum コンポーネントファイル
• 更新されたルーティング設定（該当する場合）
• バックエンドアクションとの統合（該当する場合）
• 品質チェックリストに照らした検証

品質基準

• 生成されるすべてのコンポーネントで React Spectrum を使用します。標準的なパターンにカスタム CSS は使用しません
• シェルとの統合には runtime.done() の呼び出しを含めます
• インタラクティブな要素にアクセシブルなラベルを設定します
• 読み込み状態とエラー状態に対応します
• バックエンドアクションの呼び出しに IMS トークンを正しく渡します

参考資料

• 注釈付きの UI パターンの例（ページ、フォーム、テーブル、ダイアログ、ナビゲーション）については、references/ui-patterns.md を使用してください。
• React Spectrum v3 のコンポーネントカタログ（インポート、プロパティ、アクセシビリティ）については、references/spectrum-components.md を使用してください。
• ExC Shell との統合（@adobe/exc-app、runtime.done()、IMS トークン）については、references/shell-integration.md を使用してください。
• ExC Shell での React Router を使った SPA ルーティングについては、references/routing-patterns.md を使用してください。
• SPA からバックエンドアクションを呼び出す方法については、references/action-integration.md を使用してください。
• 引き継ぎ前の UI 品質検証については、references/checklist.md を使用してください。
• AEM UI Extension パターン（@adobe/uix-guest）については、references/aem-extensions.md を使用してください。Content Fragment Console／Editor、Universal Editor、Assets View、Content Hub が対象です。
• よくある SPA のデバッグシナリオ（シェルのスピナー、CORS、認証、空白画面、パフォーマンス）については、references/debugging.md を使用してください。

連携

• appbuilder-project-init から連携します。拡張機能のスキャフォールディングが完了し、ローカルで動作するようになったら、このスキルで UI のカスタマイズと React Spectrum のパターンに対応します。
• フルスタック機能（UI からバックエンドアクションを呼び出す機能）では、appbuilder-action-scaffolder と併用します。
• appbuilder-testing と連携して、生成された UI コンポーネントをテストします。
• appbuilder-cicd-pipeline と連携して、フロントエンドの変更をデプロイします。