docyrus-app-dev-react

Docyrus App Dev React

エンドツーエンドで Docyrus の React TypeScript アプリケーションを構築します。このスキルでは、アプリのアーキテクチャ、認証、データアクセス、クエリパターン、本番環境向けの UI ガイダンスをまとめて紹介します。

推奨テックスタック

• React 19 + TypeScript + Vite
• TanStack Router（コードベース）、TanStack Query（サーバー状態）、TanStack Form
• Tailwind CSS v4、shadcn/ui コンポーネント
• @docyrus/api-client + @docyrus/signin + @docyrus/app-utils
• @docyrus/devtools — 開発中はすべての Docyrus アプリで使用を推奨する、アプリ内開発者パネル（ネットワーク、エラー、問題、コンソール、iframe メッセージ、OpenAPI リクエストエクスプローラー、DOM 要素ピッカー）。本番環境以外のビルドでのみ有効にしてください。
• OpenAPI 仕様から自動生成されたコレクション
• 推奨 UI ライブラリ：shadcn、diceui、animate-ui、docyrus-ui、reui

このスキルを使用する場面

次のような作業を行う場合に、このスキルを使用してください。

• Docyrus を利用する React アプリを構築または変更する
• @docyrus/signin で認証を設定する
• @docyrus/app-utils でテナント対応のランタイムユーティリティを初期化する
• 自動生成されたコレクションまたは @docyrus/api-client でデータを取得または変更する
• AppConfig、UserAppConfig、DataViews でアプリレベルの設定、ユーザーレベルの設定、保存済みのグリッドビューを永続化する
• レコード共有、ロール管理、ACL 主導の UI フローを構築する
• ダッシュボード、フォーム、テーブル、レイアウト、ダイアログ、分析、詳細ページなどの機能 UI を設計する
• shadcn、diceui、animate-ui、docyrus-ui、reui のコンポーネントから選択する
• データアクセスと洗練された UI を組み合わせた完全な機能フローを実装する

エンドツーエンドの機能ワークフロー

1. アプリの認証、ルーティング、クエリプロバイダーを設定します。@docyrus/signin は /v1/users/me からサインイン済みユーザーをすでに取得します。ユーザー情報は useDocyrusAuth().user から参照し、独自のユーザー呼び出しを追加しないでください。
2. @docyrus/devtools をルート付近にマウントし（開発ビルドのみ）、認証済みクライアントを登録して、最初からリクエスト、エラー、コンソールを計測できるようにします。
3. サインイン後、共有の InventoryClient を 1 つ 作成し（createInventoryClient）、プログレスバーの背後で load() を実行して、アプリ、データソース、ユーザー、ブランド、設定、このアプリの設定をウォームアップします。
4. @docyrus/app-utils から TenantPreferences、日付・数値ユーティリティ、共有アプリランタイムヘルパーを初期化し、すべての app-utils クライアントに共有の inventory を接続します。
5. 生成された Docyrus コレクションフックまたは REST クライアントを使ってデータにアクセスします。
6. columns、フィルター、数式、子クエリ、ミューテーションを正しく定義します。
7. アプリごとの永続化設定には AppConfig、ユーザーごと・アプリごとの設定には UserAppConfig、保存済みのグリッドビューには DataViews を使用します。
8. 独自のものを構築する前に、推奨 UI コンポーネントを確認します。
9. 作成、編集、アイテム詳細、編集可能なグリッドの各フローには、Docyrus のフォームおよび詳細パターンを使用します。
10. UI アクションを TanStack Query のミューテーションに接続し、関連するクエリを無効化します。

クイックスタート：アプリの初期化

ルートプロバイダーの設定

import { DocyrusAuthProvider } from '@docyrus/signin'

<DocyrusAuthProvider
  apiUrl={import.meta.env.VITE_API_BASE_URL}
  clientId={import.meta.env.VITE_OAUTH2_CLIENT_ID}
  redirectUri={import.meta.env.VITE_OAUTH2_REDIRECT_URI}
  scopes={['offline_access', 'Read.All', 'DS.ReadWrite.All', 'Users.Read']}
  callbackPath="/auth/callback"
>
  <QueryClientProvider client={queryClient}>
    <RouterProvider router={router} />
  </QueryClientProvider>
</DocyrusAuthProvider>

認証ゲートと現在のユーザーへのアクセス

const { status, user, hasRole, hasPermission } = useDocyrusAuth()

if (status === 'loading') return <Spinner />
if (status === 'unauthenticated') return <SignInButton />

// user is auto-fetched from /v1/users/me after authentication
// hasRole('super_admin') — check role by slug or uid
// hasPermission('edit', dataSourceId) — check ACL permission on a data source

@docyrus/signin はサインイン済みユーザーをすでに取得します。 認証時に /v1/users/me を 1 回呼び出し、結果（ロール、権限、aclRules、ID）を useDocyrusAuth().user として公開します。現在のユーザーを参照し、認証・ロール・権限の確認はすべてそこから行ってください。独自の /v1/users/me リクエストは絶対に追加しないでください。 ロールの変更後に再取得するには、refreshUser() を呼び出します。認証ユーザーに含まれないプロフィール項目が必要な場合に限り、useUsersCollection().getMyInfo() を使用してください。

サインイン後のインベントリーキャッシュのウォームアップ

@docyrus/signin が認証済みセッションを報告した直後に、@docyrus/app-utils から共有の InventoryClient を1つ作成し、プログレスバーを表示しながら load() を実行します。インベントリーは、アプリ、データソース（ビュー／フォーム／フィールドを内包）、ユーザー、ブランド、テナント設定、およびこのアプリの設定／ユーザー設定を保持する、テナント全体のメモリー内キャッシュです。一度ウォームアップすると、その後のアプリ内でのメタデータ読み取りのほとんどがキャッシュヒット（ネットワークアクセスなし）になり、同じインスタンスが、それを渡すすべての app-utils クライアントで共有されます。

ブートストラップ時にインスタンスを1つ作成し、すべての app-utils クライアントに設定します。

// services/docyrus.ts — one cache, shared by every client
import {
  createInventoryClient,
  createDataSourceClient,
  createBrandClient,
  createAppConfigClient,
  createUserAppConfigClient,
  createDataViewClient,
} from '@docyrus/app-utils'

const appId = import.meta.env.VITE_APP_ID

export const inventory = createInventoryClient(apiClient)

export const dataSources = createDataSourceClient(apiClient, { inventory })
export const brands = createBrandClient(apiClient, { inventory })
export const appConfig = createAppConfigClient(apiClient, appId, { inventory })
export const userAppConfig = createUserAppConfigClient(apiClient, appId, { inventory })

// View/form clients are per data source — construct on demand, always sharing `inventory`
export const viewsFor = (appSlug: string, dsSlug: string) =>
  createDataViewClient(apiClient, appSlug, dsSlug, { inventory })

サインイン後、ホームページへルーティングする前に、キャッシュを一度ウォームアップします。

// Runs after useDocyrusAuth() reports an authenticated session.
async function bootstrapAfterSignIn(setProgress: (p: { label: string; value: number }) => void) {
  await inventory.load({
    // Drop 'users' from `include` if the signed-in user may lack the Users.Read.All scope.
    onProgress: ({ message, ratio, phase }) => {
      setProgress({ label: message, value: Math.round(ratio * 100) })
      if (phase === 'complete') setProgress({ label: 'Ready', value: 100 })
    },
  })
}

• 認証済みの apiClient が必要なため、インベントリーはサインイン後に作成します。
• すべての app-utils クライアントに同じ inventory を渡し、キャッシュを共有させます。これらのクライアントを通じた変更は、キャッシュに自動的に反映されます。
• load() は、アプリ、データソース、ユーザー、ブランド、設定に加え、VITE_APP_ID が設定されている場合はこのアプリの設定／ユーザー設定をウォームアップします。また、サインイン後のプログレスバー用に進捗イベントを発行します。
• ページを完全に再読み込みすると、キャッシュは空の状態から始まります。そのため、サインインのたびに load() を実行します。再読み込みせずにテナントを切り替える場合は、inventory.refresh() を呼び出して、新しいテナントのデータで古いデータを置き換えます。

load() のオプション、スコープの処理、キャッシュ無効化ヘルパーについては、references/app-utils-readme.md の「createInventoryClient」セクションを参照してください。

テナント対応のアプリユーティリティ

テナントレベルのフォーマット処理と、永続化されるアプリ／グリッド設定には、@docyrus/app-utils をデフォルトのランタイムレイヤーとして使用します。

import {
  createAppConfigClient,
  createUserAppConfigClient,
  createDataViewClient,
  createDateUtils,
  createNumberUtils,
  getTenantPreferences,
} from '@docyrus/app-utils'

function useAppRuntime(appId: string) {
  const client = useDocyrusClient()
  const { getMyInfo } = useUsersCollection()

  return useQuery({
    queryKey: ['app-runtime', appId],
    enabled: !!client && !!appId,
    queryFn: async () => {
      const [preferences, me] = await Promise.all([
        getTenantPreferences(client!),
        getMyInfo(),
      ])

      return {
        preferences,
        me,
        dateUtils: createDateUtils({
          preferences,
          userTimezone: me.timeZone?.id,
        }),
        numberUtils: createNumberUtils({ preferences }),
        appConfig: createAppConfigClient(client!, appId),
        userConfig: createUserAppConfigClient(client!, appId),
        dataViews: createDataViewClient(client!, appId),
      }
    },
  })
}

このランタイムを使用して、次の処理を行います。

• テナントの書式文字列とユーザーのタイムゾーンを使用して、日付と日時をフォーマットします。
• テナントの区切り文字と精度を使用して、数値、通貨に類する値、小数をフォーマットします。
• アプリで永続化される唯一の AppConfig ドキュメントを読み込み、アップサートします。
• 現在のユーザーの UserAppConfig ドキュメント（ユーザーごと、アプリごとの設定）を読み込み、アップサートします。
• DataViews を通じて、保存済みグリッドビューを読み込み、永続化します。

共有インベントリーをウォームアップした場合（上記を参照）は、これらの各クライアントに { inventory } を渡し、新たに getTenantPreferences(client) を呼び出す代わりに inventory.getPreferences() から preferences を読み込みます。こうすることで、すべての読み取りがウォームアップ済みのキャッシュから解決されます。

生成されたコレクションを使ったデータ取得

const { list } = useBaseProjectCollection()

const { data: projects } = useQuery({
  queryKey: ['projects'],
  queryFn: () =>
    list({
      columns: ['name', 'status', 'record_owner(firstname,lastname)'],
      filters: { rules: [{ field: 'status', operator: '!=', value: 'archived' }] },
      orderBy: 'created_on DESC',
      limit: 50,
    }),
})

ACL、ロール、レコード共有

ACL 機能には、useDocyrusClient() を直接呼び出して使用します。これらのルートは、生成された OpenAPI の出力から除外されている場合があるため、通常は生成されたコレクションフックから利用できません。

const client = useDocyrusClient()

const { data: roles } = useQuery({
  queryKey: ['acl', 'roles'],
  queryFn: () => client!.get('/v1/users/acl/roles'),
})

const replaceUserRoles = useMutation({
  mutationFn: ({ userId, roleIds }: { userId: string; roleIds: string[] }) =>
    client!.put(`/v1/users/acl/users/${userId}/roles`, { roleIds }),
})

const createRoleQuery = useMutation({
  mutationFn: (payload: Record<string, unknown>) =>
    client!.post('/v1/users/acl/role-queries', payload),
})

ユーザーロールの更新やロールクエリのペイロードで roleIds を送信する場合は、API から返されたロールの uid 値を優先して使用します。

保存済みデータグリッドビュー

Docyrus グリッドのデフォルトの保存済みビュー UI として DataGridViewSelect を使用し、createDataViewClient(client, appId) でビューを永続化します。

• DataGridViewSelect は、保存済みグリッドビューの表示と編集に使用するデフォルトのコンポーネントです。
• セレクター／エディターが列定義を読み込めるよう、TanStack のテーブルインスタンスを table として渡します。
• エディターで組み込みのフィルタービルダーを有効にする場合は、fields を渡します。
• views、onViewCreate、onViewSave、onViewDelete、onViewHide、onViewUnhide は、DataViews の CRUD を使用して実装します。
• セレクターの外部で単独のエディターが必要な場合に限り、DataGridViewEditor を別途使用します。

@docyrus/devtools を使用した開発ツール

すべての Docyrus アプリに @docyrus/devtools を組み込みます。これにより、フローティングトリガーとドッキングパネルが表示され、Network、Errors、Issues、Explore、Console、Messages のタブが利用できます。@docyrus/api-client のリクエスト（重複や遅延の検出を含む）、TanStack Query の問題、コンソール出力、iframe とホスト間の postMessage 通信を計測できるほか、OpenAPI 駆動のリクエストエクスプローラーで、アプリの認証済みクライアントを通じてエンドポイントを再実行できます。

import { DocyrusDevtools, useRegisterDocyrusClient } from '@docyrus/devtools'
import { DocyrusAuthProvider, useDocyrusClient } from '@docyrus/signin'

function RegisterDevtoolsClient() {
  // Register the auth-managed client once it exists so requests are instrumented.
  useRegisterDocyrusClient(useDocyrusClient())
  return null
}

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* enabled gates ALL instrumentation — keep devtools out of production */}
      <DocyrusDevtools enabled={import.meta.env.DEV} queryClient={queryClient} openApiSpecPath="/openapi-spec.json">
        <DocyrusAuthProvider apiUrl={/* … */} clientId={/* … */}>
          <RegisterDevtoolsClient />
          <YourRoutes />
        </DocyrusAuthProvider>
      </DocyrusDevtools>
    </QueryClientProvider>
  )
}

• enabled={import.meta.env.DEV} で有効化します（または、本番環境でオンデマンドに使用できるよう、activationShortcut を指定して無効状態で組み込みます）。enabled が false の場合、子要素のみがレンダリングされ、リスナーも UI も表示されません。
• 既存の queryClient を渡すと、TanStack Query の問題が Issues タブに表示されます。
• マウント後に useRegisterDocyrusClient(useDocyrusClient()) を呼び出すと、認証管理下のクライアントが利用可能になり次第、計測が開始されます。
• openApiSpecPath に配信されている仕様ファイルを指定すると、リクエストエクスプローラーが有効になります。

すべてのプロパティ、ホストブリッジ、iframe メッセージの監視、DOM 要素ピッカー、CDP／エージェント向けのインページ API については、references/devtools-readme.md を参照してください。

重要なアプリ／データのルール

1. .list() と .get() の呼び出しでは、必ず columns を指定してください。指定しない場合、id のみが返されます。
2. コレクションは React フックです — useBaseProjectCollection()、useUsersCollection() などのフックは、React コンポーネント内で呼び出してください。
3. データソースのエンドポイントは動的です — テナントの OpenAPI 仕様でデータソースが定義されている場合にのみ存在します。
4. count の計算には id を使用してください。sum、avg、min、max には実際のフィールドスラッグを使用してください。
5. 子クエリのキーは columns に含める必要があります。
6. 数式のキーは columns に含める必要があります。
7. サインイン中のユーザーは useDocyrusAuth().user から取得してください — @docyrus/signin はサインイン時に /v1/users/me からユーザー情報（ロール、権限、aclRules、ID）をすでに取得しています。独自に /v1/users/me を呼び出さないでください。ロール変更後は refreshUser() を使用し、認証ユーザーにないプロフィールフィールドに限り useUsersCollection().getMyInfo() を使用してください。
8. TenantPreferences はアプリの実行環境ごとに一度だけ初期化し、@docyrus/app-utils から共有の dateUtils／numberUtils インスタンスを作成してください。
9. @docyrus/app-utils の書式設定関数は地域設定に対応しています — テナント設定で指定される場合、ロケール、日付形式、小数点記号、桁区切り記号、小数桁数をハードコードしないでください。
10. アプリの永続化される単一の設定ドキュメントには createAppConfigClient(client, appId) を使用してください。デフォルトの書き込み方法は upsert です。
11. アプリにスコープされた、現在のユーザーの永続化される設定ドキュメント（例：テーマ、レイアウト設定、サイドバーの状態）には createUserAppConfigClient(client, appId) を使用してください。デフォルトの書き込み方法は upsert です。
12. 保存済みグリッドビューの CRUD には createDataViewClient(client, appId) を使用してください。
13. 保存済みデータグリッドビューの表示、作成、編集、並べ替え、非表示、再表示、論理削除、完全削除には DataGridViewSelect とともに DataViews を使用してください。
14. DataGridViewSelect には TanStack テーブルのインスタンスが必要です。組み込みのフィルタービルダー／エディター機能を使用する場合は、fields を渡してください。
15. データビューの作成には name と tenant_data_source_id が必要です。
16. 論理削除には dataViews.update(viewId, { archived: true }) を使用し、取り消しできない完全削除の場合にのみ dataViews.remove(viewId) を使用してください。
17. スキーマ変更後はコレクションを再生成してください。テナントの OpenAPI 仕様を再ビルドし、最新の openapi.json をダウンロードして、コレクションジェネレーターを再実行してください。
18. ACL エンドポイントは通常、raw-client 統合です — ロール、ユーザーとロールの割り当て、ロールクエリ、レコード共有、所有権移管には useDocyrusClient() または RestApiClient を使用してください。
19. ACL のロール書き込み、ユーザーロールの roleIds、ロールクエリの roleIds には、ロールの uid 値を優先してください。
20. PUT /v1/users/acl/users/:userId/roles は全置換、POST /v1/users/acl/users/:userId/roles は追加として扱ってください。
21. ロールクエリの query には加工していない JSON を渡し、dataSourceId がある場合は tenantAppId を省略してください。バックエンドが値を導出します。
22. ロール削除後は、ロール一覧、ユーザーロール一覧、ロールクエリ一覧、およびプライマリロールのラベルを表示する UI に関する依存先アプリクエリを無効化してください。
23. サインイン後に共有 InventoryClient を1つ作成して load() を呼び出してください — すべてのアプリユーティリティクライアントに同じインスタンスを渡し、キャッシュを事前に読み込んだ状態で共有させてください。テナント切り替え時には inventory.refresh() を呼び出してください。
24. 開発ビルドでは @docyrus/devtools をマウントし、enabled={import.meta.env.DEV} で有効化を制御し、アプリの queryClient を渡して、useRegisterDocyrusClient(useDocyrusClient()) で認証クライアントを登録してください。

重要な UI/UX ルール

1. カスタムのものを作成する前に、必ず優先コンポーネントを確認してください。
2. ユーザーから別のカードスタイルを明示的に指定されない限り、ダッシュボードには AwesomeCard を使用してください。
3. 別のレイアウトが指定されない限り、アプリのレイアウトには animate-ui の Sidebar を使用してください。
4. 一般的な機能 UI のチャートには、Recharts を優先してください。例外 — ダッシュボード／分析／レポート： docyrus-dashboard-design スキルを使用してください。このスキルでは、Bklit UI のチャート、AwesomeCard パネル、AwesomeStats KPI カードが必須です。
5. アイコンは次の順に使用してください：hugeicons、次に fontawesome light、最後に lucide。
6. 項目作成フォームには AwesomeDialog を使用してください。
   • 小規模／シンプルなフォーム：container="sheet" と side="right"
   • 長い／複雑なフォーム：container="modal" または container="drawer"
7. 項目の複雑さに応じて詳細表示用のコンテナを選択してください。
   • 大きな項目：専用ページ
   • 小さな項目：AwesomeDialog の右側シート
8. すべてのフォームで TanStack Form と Docyrus フォームシステムを使用してください。機能フォームをプレーンな HTML フォームや React Hook Form で直接作成しないでください。
9. 項目の詳細表示でインライン編集を行う場合は、EditableRecordDetail を使用してください。
10. 編集可能な詳細表示とグリッドでは、必ず trackChanges を有効にしてください。
11. 保存済みのグリッドビューには DataGridViewSelect を使用し、@docyrus/app-utils の DataViews を使って実装してください。
12. セレクターコンポーネントの外部で、単独のグリッドビューエディターが必要な場合に限り、DataGridViewEditor を優先してください。

UI のデフォルト選択

用途	デフォルトコンポーネント	ライブラリ
項目作成フォーム	AwesomeDialog	docyrus
レコードの簡易作成	CreateRecordDialog	docyrus
項目の詳細表示（小）	AwesomeDialog の右側シート	docyrus
項目の詳細表示（大）	専用ページ	—
インライン編集	EditableRecordDetail	docyrus
ダッシュボードカード	AwesomeCard	docyrus
統計ダッシュボード	AwesomeStats	docyrus
アプリのナビゲーション	Sidebar	animate-ui
データテーブル	DataTable	diceui
編集可能なグリッド	Data Grid	docyrus
グリッドの保存済みビュー	DataGridViewSelect + DataViews	docyrus + @docyrus/app-utils
フォーム	Docyrus フォームフィールド + TanStack Form	docyrus
チャート（一般）	shadcn chart + Recharts	shadcn
ダッシュボード／分析／KPI	Bklit charts + AwesomeCard + AwesomeStats（docyrus-dashboard-design を参照）	bklit + docyrus
ファイルのアップロード	File Upload	diceui
ガントチャート／プロジェクトスケジュール	Gantt	docyrus
リソースのスケジュール	ResourceSchedulerPanel	docyrus
チームチャット	TeamChatChannel	docyrus
AI インターフェース	DocyrusAgent	docyrus
価格設定／見積もり	PricingEnginePanel	docyrus
分析／ピボット	PivotGrid	docyrus

UI のクイックパターン

項目作成フォーム

<AwesomeDialog open={open} onOpenChange={setOpen} container="sheet" side="right" size="default">
  <AwesomeDialogHeader title="Create Task" icon="far-plus" />
  <AwesomeDialogBody>
    <form.Field name="title">{(field) => <TextFormField field={field} label="Title" />}</form.Field>
    <form.Field name="status">{(field) => <SelectFormField field={field} label="Status" />}</form.Field>
  </AwesomeDialogBody>
  <AwesomeDialogFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={handleSubmit}>Create</Button>
  </AwesomeDialogFooter>
</AwesomeDialog>

インライン編集に対応した項目の詳細表示

<AwesomeDialog open={open} onOpenChange={setOpen} container="sheet" side="right" size="lg" fullscreenable>
  <AwesomeDialogHeader
    title="Task Detail"
    description="Review and edit task fields inline"
    headerButtons={<Button variant="outline" size="sm" onClick={switchToFullForm}>Edit All</Button>}
  />
  <AwesomeDialogBody>
    <EditableRecordDetail fields={fields} record={record} onSave={handleSave} trackChanges>
      <EditableRecordDetailField slug="title" />
      <EditableRecordDetailField slug="status" />
      <EditableRecordDetailField slug="assignee" />
      <EditableRecordDetailField slug="due_date" />
    </EditableRecordDetail>
  </AwesomeDialogBody>
</AwesomeDialog>

TanStack Query パターン

function useProjects(params?: ICollectionListParams) {
  const { list } = useBaseProjectCollection()
  return useQuery({
    queryKey: ['projects', 'list', params],
    queryFn: () => list({ columns: PROJECT_COLUMNS, ...params }),
  })
}

function useCreateProject() {
  const { create } = useBaseProjectCollection()
  const qc = useQueryClient()
  return useMutation({
    mutationFn: (data: Record<string, unknown>) => create(data),
    onSuccess: () => {
      void qc.invalidateQueries({ queryKey: ['projects'] })
    },
  })
}

コレクションの CRUD メソッド

const { list, get, create, update, delete: deleteOne, deleteMany } = useBaseProjectCollection()

list(params?: ICollectionListParams)
get(id, { columns })
create(data)
update(id, data)
deleteOne(id)
deleteMany({ recordIds })

API エンドポイントのパターン：/v1/apps/{appSlug}/data-sources/{slug}/items

クエリ機能の概要

.list() メソッドでは、次の機能を使用できます。

• columns
• filters
• filterKeyword
• orderBy
• limit と offset
• fullCount
• calculations
• formulas
• childQueries
• pivot
• expand

コンポーネントのインストールパターン

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add @diceui/data-table
pnpm dlx shadcn@latest add @animate-ui/sidebar
pnpm dlx @docyrus/cli add @docyrus/ui-awesome-card
pnpm dlx shadcn@latest add @reui/file-upload-default

参考資料

詳しくは、以下をお読みください。

• references/README.md — アプリ開発と UI 設計の統合リファレンスマップ
• references/api-client-and-auth.md
• references/collections-and-patterns.md
• references/signin-readme.md — @docyrus/signin パッケージの README 全文（認証プロバイダー、フック、iframe／ホストブリッジ、SSR、ロールと権限）。npm では @docyrus/signin として公開されています。ソースは docyrus-devkit/packages/signin にあります
• references/host-communication-integration.md — 埋め込みアプリとホストシェル間の postMessage 統合。Guidy は対象外です。ホストからアプリへのナビゲーション（useDocyrusHostNavigation）と通知（useDocyrusHostNotification）、アプリからホストへのルート同期（syncRouteToHost／useDocyrusHostRouteSync／notifyRouteChange）とナビゲーション要求（requestHostNavigation）、オリジン検証、Vue での同等機能について説明します
• references/guidy-integration.md — 埋め込みアプリを Guidy と互換にする方法（ホスト AI アシスタントがアプリの UI を操作）：enableGuidyBridge、ターゲット指定可能なコントロール（安定した ID とアクセシブルなラベル）、宣言済みルート（guidyRoutes／useDocyrusGuidyRoutes）。ルートには、ホスト通信に関するリファレンスにある useDocyrusHostNavigation も必要です
• references/app-utils-readme.md — @docyrus/app-utils パッケージの README 全文（テナント設定、日付／数値の書式設定、アプリ／ユーザー設定、データビュー／フォーム、データソースのメタデータ、Inventory Cache）。npm では @docyrus/app-utils として公開されています。ソースは docyrus-devkit/packages/app-utils にあります
• references/devtools-readme.md — @docyrus/devtools パッケージの README 全文（アプリ内開発パネル、リクエスト／コンソール／メッセージの計測、OpenAPI エクスプローラー、要素ピッカー、CDP／エージェント API）。npm では @docyrus/devtools として公開されています。ソースは docyrus-devkit/packages/devtools にあります
• docyrus-app-settings スキル — createAppConfigClient／createUserAppConfigClient を使用した、アプリ単位（AppConfig）およびユーザー単位（UserAppConfig）の設定ドキュメントの設計と使用方法：スコープの選択、全置換や空のドキュメントに関する注意点、REST／CLI コントラクト
• docyrus-acl-design スキル — ACL のロール、権限、ロールクエリ（docyrus acl）、および docyrus-api-dev の SKILL.md にある ACL REST エンドポイント
• ../docyrus-api-dev/references/data-source-query-guide.md
• ../docyrus-api-dev/references/formula-design-guide-llm.md
• ../docyrus-api-dev/references/query-guide.md
• references/preferred-components-catalog.md
• references/component-selection-guide.md
• references/icon-usage-guide.md