Name: lzhbhlrPython/antd-admin-template
Author: コミュニティスキル

Ant Design Web アプリケーション設計システム（中管理画面優先）

このスキルは、実証済みの React 19 + TypeScript + Ant Design 6 実装方法と、すぐに実行可能な完全なテンプレートを提供します。その核心は特定のページセットではなく、次の点にあります：

Ant Design公式のDesign Tokenを参照した設定可能な設計システムの層
切り替え可能な2種類のアプリケーションシェル（サイド / トップ）
実証済みのページレシピセット。中管理画面、ポータル、ドキュメント、ダッシュボード、AIワークベンチなど36種類の形式をカバー
強制されるコンポーネント再利用優先ルール：antd / 既存ライブラリ / 既存コンポーネントを最初に探し、その後で自作する。

目標は「ネイティブ antd」の外観です。コンポーネント、間隔、状態、テーマはすべてAnt Designから取得し、antdの上に別の設計システムを構築しません。

スキル読み込み時に、リソースブロックがこのスキルの絶対パスを提供します。以下では <SKILL_DIR> で表し、コマンド実行前に実際のパスに置き換えてください。スキルディレクトリには次のものが含まれます：

SKILL.md
design.md                               # 機械可読な設計言語（公式 design.md のテンプレート適用）
scripts/scaffold.mjs                    # ワンクリックでプロジェクト生成（名前変更 + オプションインストール）
scripts/scan-ui.mjs                     # 既存のコンポーネント/依存関係/antd使用状況をスキャン。UIコードより先に実行
scripts/fetch-antd-docs.mjs             # プロジェクトのantdバージョンに合わせてコンポーネントドキュメントスナップショットを一括更新
scripts/check-antd-docs.mjs             # 初期化セルフチェック：プロジェクトのantdバージョン vs ドキュメントスナップショット
assets/template/                        # 完全な実行可能テンプレート（node_modules / dist なし）
assets/preview/                         # プレビュー画像
references/antd-official.md            # Ant Design 公式設計言語と基本情報（直接内蔵）
references/for-agents.md                # 公式 For Agents プロンプト、CLI / MCP / LLMs ワークフロー
references/ecosystem.md                 # 公式エコシステムライブラリとコミュニティ推奨、選定順序
references/antd-design-language.md      # 公式設計言語、Token、設定マッピング
references/component-reuse.md           # 強制：再利用検索、antdコンポーネントマッピング、カスタムルール
references/app-patterns/README.md       # 形態インデックス：最初にこれを読む。1つだけ選択
references/app-patterns/_common.md      # 共通シェル/幅/密度/状態/受け入れ基準
references/app-patterns/*.md            # 36個のタイプファイル。タスクごとにヒットしたものだけ読む
references/architecture.md              # Provider、認証、シェル、サービス層
references/fullstack-design.md          # フロントエンド/バックエンド分離、API契約、データモデル、React状態の帰属
references/backend-design.md            # バックエンドパラダイム：レイヤー化、認証、トランザクション、冪等性、監査、セキュリティ
references/ant-motion.md                # Ant Motion アニメーション仕様、コンポーネント組み込み、パフォーマンスとアクセシビリティ
references/code-quality.md              # Alibaba フロントエンド規約 + React 19/TS コード品質とレビューチェックリスト
references/components/README.md         # 36個のよく使うコンポーネントドキュメントスナップショットインデックス（必要に応じて1～2個読む）
references/components/manifest.json     # スナップショットバージョン、ファイルサイズとSHA-256、セルフチェックの根拠
references/components/*.md              # antd 6.7.0 中国語コンポーネントドキュメントスナップショット
references/ux-scenarios.md              # ローディング/空/エラー/バッチ/長時間タスク/権限などのUI/UXシナリオ
references/page-recipes.md              # リスト/モーダル/詳細/権限/ダッシュボードレシピ
references/design-rules.md              # ビジュアルとインタラクション仕様

呼び出し境界（以下のレシピより優先）

グローバルに明示的にのみ使用：ユーザーがAnt Design / antd設計言語を明示的に要求した場合、または $antd-admin-template を指名した場合のみ、このスキルを読み込み実行できます。ユーザーが特定のプロジェクトに対して「設計作業ではこのスキルを使用する必要がある」と明確に設定した場合、プロジェクトのAGENTS.mdにその継続的な許可を記録できます。そのプロジェクトの設計作業ではこのスキルを読み込み使用する必要があります。他のプロジェクトはこの例外を継承しません。
通常のフロントエンド設計、管理画面、ドキュメント、ポータル、ダッシュボード、CRUD、テーマ設定、「Tailwindを使わない」、プロジェクトがすでにantdに依存している場合も、呼び出し許可にはなりません。これらのキーワードが原因でこのスキルを自分で選択してはいけません。
許可は現在のタスク範囲に基づいて判断されます。1回の呼び出しが、将来のすべての設計タスクでantdを使用することを意味するわけではありません。プロジェクトの継続的な許可は、その明示された範囲内でのみ有効です。このスキルに言及、インストール、レビューしても、それを使ってインターフェースを設計するよう要求することにはなりません。
既存のプロジェクトの製品ポジション、DESIGN.md、AGENTS.md、コンポーネントシステム、パッケージマネージャーを尊重します。許可された範囲内でのみ必要な参考情報を使用し、設計言語を自動的に移行したり、テンプレート全体をコピーしたりしません。
以下のページレシピと新プロジェクトの受け入れ項目は、実際のニーズに基づいて採用します。既存プロジェクトの部分的な変更には、ログイン、RBAC、複数のビジネスページ、設計設定、管理画面シェルを強制しません。ポータルやマーケティングページにはBasicLayoutを強制しません。
agents/openai.yaml で policy.allow_implicit_invocation: false を設定します。自動呼び出しに変更したり、ツール間で共有されるスキルディレクトリにインストールしたりしないでください。

インスピレーションとソース

このスキルのAIフレンドリーな設計組織方法は、Ant Design 公式 For Agents に触発されています。エージェントが実際のバージョンのコンポーネント知識をクエリできるようにし、トレーニングメモリだけに頼ってAPIを推測しないようにします。また、LLMs.txt と design.md を参考に、コンポーネント知識、セマンティック構造、設計言語を必要に応じて読み取れる資料として提供します。

これは独立して整理されたコミュニティスキルであり、Ant Design公式スキルや公式推奨プロジェクトではありません。スナップショットはアーカイブ参照であり、現在の最新バージョンを表すものではありません。使用時はターゲットプロジェクトの実際の依存関係と照合してください。内蔵された公式ドキュメント資料とライセンスについては THIRD_PARTY_NOTICES.md を参照してください。

納品基準

以下は、完全な新規アプリケーション作成のための参考受け入れ項目です。許可されたアプリケーションの形態と範囲に基づいて選択し、既存プロジェクトは自身の制約を優先します：

pnpm typecheck と pnpm build の両方が成功すること。
アプリケーションの形態とシェルが一致していること：中管理画面にはサイドナビゲーション、ポータル/ツールタイプにはトップナビゲーション、コンテンツの幅と密度が適切であること。
身分認証と権限管理が必要な完全な管理画面の場合、必要に応じてログイン、保護されたレイアウト、ビジネスページ、および403/404を提供すること。公開コンテンツや部分的な変更にはこれらの構造を強制しない。
1440px と 390px の幅で正常に使用できること。モバイルではサイドバーがドロワーになること。
ライト/ダークテーマ、ブランドカラー、ナビゲーションレイアウト、コンテンツ幅、密度、角丸が設定可能で持続化されていること。
Tailwind、shadcn、または第二のコンポーネントライブラリを導入しないこと。色はTokenから取得すること。
ページの文案がユーザーの言語と一致していること（デフォルトは中国語）。
新しいドメインを追加する場合、フロントエンド/バックエンドの境界、API契約、データモデルを説明すること。モックを使用する場合は、置き換えるポイントを明確に記述すること。
非同期ページはloading / empty / error / forbidden状態をカバーすること。危険な操作は確認を求め、長時間タスクは追跡可能にすること。
ページを作成する前に design.md を読んでいること。コンポーネントAPIは公式CLIまたは対応するバージョンのドキュメントで確認すること（CLIがない場合はバージョンを明記）。
既存プロジェクトに入る場合は、まずコンポーネントドキュメントスナップショットのセルフチェックを実行すること。バージョンが一致しない場合は、最初に更新するか、差異を明確に説明すること。古いスナップショットを現在のAPIとして偽装してはいけない。
コードは references/code-quality.md に準拠していること：any の怠惰な使用なし、Hooksの依存関係が完全、状態/エラー/権限処理が完備、深い .ant-* のオーバーライドなし。lintスクリプトがある場合は lint が成功すること。
アニメーションは references/ant-motion.md に準拠していること：管理画面のコンポーネントレベルは ≤300ms、prefers-reduced-motion をサポート。装飾のために古い rc-* アニメーションライブラリを導入しない。

Ant Design 公式ベースライン（直接内蔵）

antd はAnt Design設計システムに基づくReact UIコンポーネントライブラリで、エンタープライズ向け中管理画面とデスクトップWebサイトに適しています。現在のテンプレートは antd 6.7 + @ant-design/icons 6.3 + React 19 を使用しています。antd 6 はReact >= 18を必要とし、モダンブラウザのみをサポートし、デフォルトでCSS Variablesを有効にし、SSRとElectronをサポートします。

4つの設計価値観：

自然：直感的で、認知コストを低減。発明を減らし、装飾を減らす。
確実性：統一されたコンポーネント、Token、ページパターン、ページ間での一貫性。
意味性：各インターフェースは明確な作業目標に役立ち、主要な操作は一意で、フィードバックは即時。
成長性：組み合わせ可能で拡張可能、ビジネスとユーザーの成長に伴い進化。

ビジュアルベースライン（公式仕様）：

項目	ベースライン
アートボード / グリッド	1440px；4px ベースグリッド、8px メインリズム；24 グリッド
メインフォント	14px / 22px；システムフォントスタック；フォントウェイト 400/600
ブランドカラー	`#1677ff`（基本ブルーパレットの6番目）
機能色	成功 `#52c41a` / 警告 `#faad14` / エラー `#ff4d4f`
ニュートラルカラー	88% / 65% / 45% / 25%；境界線 `#d9d9d9`；背景 `#f5f5f5`
角丸	2 / 4 / 6 / 8；基本 6
間隔	4 / 8 / 16 / 24 / 32（4px グリッド）
レイアウト	左右レイアウト（ナビ固定）または上下レイアウト（中央が拡大縮小）
アニメーション	控えめ、0.1–0.3秒；中管理画面では装飾アニメーションなし

Token 3層：Seed（ブランド/角丸/フォントサイズ）→ Map（派生色/テキスト/境界線）→ Alias（コンポーネントレベル）。ページは theme.useToken() のみを読み取り、ビジュアル値をハードコードしない。

公式エコシステム（詳細は references/ecosystem.md）：

ライブラリ	用途
`antd` + `@ant-design/icons`	コアコンポーネントとアイコン（antd 6 ↔ icons 6）
`@ant-design/pro-components`	ProLayout / ProTable / ProForm；安定版 2.x の peer は依然として antd ^5、antd 6 では 3.x beta が必要でバージョンを固定すること
`@ant-design/charts`	複雑な統計グラフ；antd peer なし、テーマは手動で調整が必要
`@ant-design/x` + `@ant-design/x-markdown`	AI 対話 / Copilot / ストリーミング Markdown；peer `antd ^6.1.1`
`@xyflow/react`	ワークフロー/トポロジーキャンバス；antd 6 では peer が未だ v5 の Pro Flow の代替
`antd-mobile`	モバイル H5（独立製品ライン）
`antd-mini`	Alipay/WeChat ミニプログラム
`@ant-design/web3`	Web3 / ウォレット
Ant Design CLI	プロジェクトチェックと v5→v6 移行
Ant Motion / Landing / Pro	アニメーション、トップページテンプレート、完全な足場

エコシステムの選定、バージョンマトリックス、サイズと互換性チェックは references/ecosystem.md を参照。1つのTableのためにantdをv5にダウングレードしないこと。また、antd 6にPro Flow / Pro Chat / Pro Editorを直接インストールしないこと。

設計契約：design.md は機械可読バージョンです。ページ作成前に最初に読んでください。このファイルのビジュアルテーブルは要約であり、競合がある場合は design.md + プロジェクトの実際のantdバージョンを優先します。

公式リンク：ant.design · 設計価値観 · 色彩 · レイアウト · フォント · コミュニティ推奨 · CLI · For Agents · design.md。

公式 For Agents 仕様（強制）

公式には明確に記載されています：現在のバージョンには破壊的変更が含まれる可能性があります。コンポーネントAPI、規約、ファイル構造がトレーニングデータと異なる場合があります。コードを書く前に仕様を読み、記憶に頼ってantd APIを書かないでください。

UIを書く前に：

design.md と references/for-agents.md を読む。
プロジェクトの実際のバージョンを確認：antd info --version、または package.json を読む。

コンポーネントAPIと実行可能なデモを確認：

npx -y @ant-design/cli info <Component> --format json
npx -y @ant-design/cli demo <Component> <demo-name>
npx -y @ant-design/cli token <Component> --format json
npx -y @ant-design/cli semantic <Component> --format json

公式スキルをインストールできる場合、npx skills add ant-design/ant-design-cli を実行可能。MCP統合については references/for-agents.md を参照。
納品前に可能であれば npx -y @ant-design/cli lint ./src を実行。その後 pnpm typecheck && pnpm build を実行。

デバッグ順序：antd env → antd doctor → antd info --version → antd lint。移行順序：antd migrate → antd changelog → antd lint。CLIがない場合は、https://ant.design/components/<name>.md とローカルの design.md で代替し、納品時に実際のバージョンを明記すること。

公式プロンプト原文、完全なコマンドテーブル、MCP設定、フォールバックプロセスは references/for-agents.md を参照。

CLIはライフサイクル全体で使用：

段階	コマンド	目的
設計の調整	`npx -y @ant-design/cli design.md`	現在のバージョンの設計言語を取得。このスキルの `design.md` と対照
選定/API確認	`info` / `demo` / `token` / `semantic`	実際のprops、実行可能なデモ、コンポーネントtokenとセマンティックDOMを確認
コード記述	`references/components/<component>.md` を読む	オフラインスナップショットのフォールバック。ヒットした1～2個のみ読む
納品チェック	`lint` + `typecheck` + `build`	廃止されたAPI、型、ビルドをまとめてチェック
移行	`migrate` → `changelog` → `lint`	v5→v6 またはバージョン間アップグレード
診断	`env` → `doctor` → `info --version` → `usage`	環境、バージョン、コンポーネント使用面のトラブルシューティング

アニメーションとコード品質（強制）

アニメーション

トランジション/エントリー/スクロール効果を書く前に、references/ant-motion.md を読む。デフォルトの戦略：

管理画面/ツール/SaaS：antd 内蔵モーション + CSS token のみを使用。コンポーネントレベル 100/200/300ms、ページレベルは 300ms を超えない。全画面トランジションは行わない。
ポータル/公式サイト/イベントページ：少量のナラティブアニメーションを使用可能、ページレベル 150/300/450/600ms。同じ画面には1つのメインタインラインのみを保持。
Ant Motion コンポーネントライブラリ：rc-tween-one / rc-queue-anim / rc-scroll-anim / rc-banner-anim はすべて2022年に更新停止、peerはReact 19を宣言しておらず、findDOMNode に依存。antd 6 コア管理画面にデフォルトでインストールしない。マーケティングアニメーションが必要な場合はバージョンを固定し、実際のブラウザで検証し、CSS/IntersectionObserver によるフォールバックを準備すること。
prefers-reduced-motion をサポート必須。アニメーションで唯一の情報を伝えない。アニメーションが入力/ルーティング/読み込みをブロックしないようにする。

コード品質

コードを書く前に references/code-quality.md を読む。これはAlibabaフロントエンド規約の命名、TypeScript、React Hooks、アクセシビリティ、エンジニアリング規範をReact 19 + antd 6に適合させています：

strict + any の怠惰な使用禁止。理由のない @ts-ignore / 非nullアサーション禁止。
関数コンポーネント + Hooks はトップレベルで呼び出し。依存配列は完全。effectでstateを派生させない。
リストのkeyは安定。非同期ページは5つの状態が揃っていること。危険な操作は確認。サーバーサイドデータはグローバルストアに入れない。
色/間隔/角丸はtokenから取得。.ant-* の深い構造をオーバーライドしない。390pxで横方向のオーバーフローがないこと。
インタラクティブ要素はキーボード操作可能、可視のフォーカスと読み取り可能な名前があること。コントラストはWCAG AAを満たすこと。
プロジェクトにlintがある場合、納品前に pnpm lint / pnpm stylelint を実行。lintがない場合、code-quality.md §11に従って手動レビューを行い、納品説明に「lint未設定」と明記すること。

オプションで公式F2Eツールを導入：

npx f2elint
# React + TypeScript を選択し、必要に応じて ESLint / Stylelint / Prettier / lint-staged / commitlint を有効化

既存のESLint/Stylelint設定がある場合、上書きせず、ルールをマージすること。F2Eドキュメント内のclass component / ReactDOM.render ルールはReact 19には適用されません。

初期化セルフチェック（既存プロジェクトに入る際に先に実行）

スキルには36個の antd 6.7.0 中国語コンポーネントドキュメントスナップショットが references/components/ に内蔵されています。プロジェクトのantdバージョンは異なる可能性があるため、デフォルトでスナップショットが現在のAPIであると仮定してはいけません。

# 1) プロジェクトにインストールされているantdバージョンとスナップショットを合わせる
node <SKILL_DIR>/scripts/check-antd-docs.mjs <プロジェクトディレクトリ>

# 2) 一致しない場合、プロジェクトのバージョンに合わせて更新（公式CLIが必要。ネットワーク/サンドボックスが制限されている場合はローカルCLIを指定可能）
node <SKILL_DIR>/scripts/fetch-antd-docs.mjs --project <プロジェクトディレクトリ>
# または明示的に：--version 6.7.0

終了コード 0：バージョンが一致し、36ファイルのサイズ/ハッシュが完全。
終了コード 1：バージョン不一致またはファイルが変更済み。指示に従って更新するか、プロジェクトのantdをスナップショットバージョンに合わせる。
終了コード 2：プロジェクトのantdバージョンが特定不可。最初に pnpm install を実行するか、--target を渡す。
CLIがサンドボックス/CIでHOMEに書き込めない場合、ANTD_CLI_HOME=/tmp/antd-home を設定可能。ローカルCLIがある場合、ANTD_CLI_BIN=/path/to/antd を使用。
セルフチェック通過後、references/components/README.md のインデックスを読み、現在書く予定の1～2個のコンポーネントだけを開き、全量を読み込まない。

コンポーネント再利用ゲート（強制、UIコードより先に実行）

JSXを書く前に、順番に以下を完了する必要があります：

プロジェクトをスキャン：node <SKILL_DIR>/scripts/scan-ui.mjs <プロジェクトディレクトリ> を実行し、インストールされているUI依存関係、src/components / src/layouts の既存コンポーネント、antd使用頻度を確認。
既存コンポーネントを検索：ツールを使用して src/components、機能ディレクトリ、類似ページを検索。再利用可能なものは新規作成しない。
antdをチェック：Table / Form / Modal / Drawer / Descriptions / Tree / Upload / Empty / Result などがすでにカバーされているか確認。CLIがある場合は最初に antd info <Component> / antd demo <Component> を実行し、その後 references/component-reuse.md のマッピングテーブルに従って選定。
公式拡張をチェック：@ant-design/pro-components、@ant-design/charts、@ant-design/x、antd-mobile。その後、成熟したサードパーティを検討。
最後にカスタム：src/components に配置し、theme.useToken() を使用し、なぜ再利用できなかったかを説明。

1～4をスキップしてドロップダウン、テーブル、モーダル、スイッチ、日付ピッカー、トースト、空状態を直接作成することは、未完了と見なされます。納品時には「何を再利用したか / どのようなカスタムコンポーネントを追加したか」を一文で記述する必要があります。

詳細なルール、コンポーネントマッピング、アンチパターンは references/component-reuse.md を参照。

ワークフロー

0. 初期化セルフチェック

既存プロジェクトに入る場合、最初に以下を実行：

node <SKILL_DIR>/scripts/check-antd-docs.mjs <プロジェクトディレクトリ>

合格しない場合は、最初にスナップショットを更新するか、antdバージョンを合わせること。バージョンのずれがある状態でコンポーネントAPIを書かない。新規プロジェクトは scaffold 後、依存関係のインストール完了時に再度実行。

1. 最初に5つの事項を調整

情報が不足している場合は、必要な質問のみを行い、詰問しない：

ブランド名：APP_NAME、ログインページ、タイトルに使用。
アプリケーション形態：中管理画面 / ポータル / ツール型SaaS / データダッシュボード / ドキュメント / AIワークベンチ / プロジェクトボード / Eコマース / カスタマーサービス / 設定センターなど。
ビジネスオブジェクトとページ：例：「注文リスト + 注文詳細 + 返金承認」。
ロールと権限：少なくとも管理者と一般メンバーを区別。権限ツリーが必要かどうかを判断。
データソース：まずメモリモックを使用するか、実際のAPIに直接接続するか。

情報が十分な場合は、直接開始し、計画段階で止まらない。

2. アーキテクチャ、データモデル、React状態の境界を決定

実際のバックエンド、新しいドメインオブジェクト、または複雑なインタラクションが関係する場合、最初に references/fullstack-design.md を読む。サーバーサイドを設計/レビューする必要がある場合は、さらに references/backend-design.md を読んでからページを作成する。少なくとも以下を生成すること：

3～6個のコアエンティティ：関係、一意制約、テナント分離、ステートマシン、監査フィールド。
API契約：リスト/詳細/書き込み操作、ページネーション、エラーコード、冪等性、同時実行制御。
状態の帰属：URL（フィルタリング/ページネーション）、サーバーサイドキャッシュ、フォーム、ローカルUI、グローバルセッションに何を配置するか。
バックエンド制約：サーバーサイド認証、トランザクション境界、冪等キー、楽観的ロック、監査テーブル、エラーで内部情報を漏洩しない。
モック署名：最初に実際のAPIの形状に従って実装し、後でサービス内部のみを置き換える。

契約なしで直接JSXを書くことは、未完了と見なされる。フロントエンドの権限は表示のみを行い、サーバーサイドは再認証する必要がある。バックエンドの受け入れは backend-design.md §14のチェックリストに従う。

3. シェルとプリセットを選択

最初に references/app-patterns/README.md の4つの質問に従って形態を選択。ヒットしたタイプファイル + _common.md のみを読み、全量を読み込まない：

形態	プリセット / シェル	幅	密度	ページレシピ
中管理画面 / 運用	標準中管理画面・サイド	流動的	デフォルト	リスト + 詳細 + 権限
ポータル / 公式サイト	ポータル公式サイト・トップ	固定幅1200	ゆったり	ファーストビュー + 機能 + CTA
ツール型SaaS	トップ・カスタム	流動的/固定幅	コンパクト	ワークスペース + 履歴 + 設定
データダッシュボード / 監視	データ集中・サイド/シェルなし	流動的	コンパクト	指標 + グラフ + ランキング
ドキュメント / ナレッジベース	ポータル・トップ	固定幅	デフォルト	左ツリー + 本文 + 右目次
プロジェクト / ボード	標準中管理画面・サイド	流動的	コンパクト	横方向ボード列
AI対話 / Copilot	トップ/シェルなし	固定幅/流動的	デフォルト	セッション + メッセージストリーム + コンテキスト
Eコマース / 商品	ポータル・トップ	固定幅	デフォルト	商品グリッド + 詳細 + 決済
カスタマーサービス / チケット	データ集中・サイド	流動的	コンパクト	キュー + セッション + 詳細
ログイン / ガイド	シェルなし	固定幅420/720	デフォルト	フォーム + Steps

1次モジュール ≤ 5個の場合はトップナビゲーションを優先。モジュールが多い場合や長期的な切り替えが必要な場合はサイドナビゲーション。「すべてのアプリケーション」をサイドバーの管理画面にしないこと。完全な36形態、レイアウト図、コンポーネント選定は references/app-patterns/README.md を参照。

オンデマンド読み取りプロトコル：

README.md の全体テーブルでのみ形態を特定し、タイプファイルを先に開かない。
_common.md を1回読み、シェル、幅、密度、共通状態を決定。
ヒットした1つのタイプファイルのみを開く。混合形態は最大2つまで、組み合わせ理由を説明。
コードスケルトンが必要な場合のみ page-recipes.md を読み、ゼロから発明しない。
開いていないタイプファイルを読んだと主張して納品しない。

4. プロジェクトを生成

# <SKILL_DIR> をスキルリソースブロックの絶対パスに置き換える
node <SKILL_DIR>/scripts/scaffold.mjs <ターゲットディレクトリ> --name "<ブランド名>"
# 依存関係も一緒にインストールする場合：
node <SKILL_DIR>/scripts/scaffold.mjs <ターゲットディレクトリ> --name "<ブランド名>" --install

スクリプトはテンプレートをコピーし、APP_NAME、パッケージ名、localStorage プレフィックスを置き換えます。スクリプトをスキップして手動でテンプレートをコピーし、ファイルごとに名前を変更しないでください。

生成後、最初に一度実行：

cd <ターゲットディレクトリ>
pnpm typecheck
pnpm dev

デモアカウント admin / admin123 でログインし、ベースラインが使用可能であることを確認してから、ビジネスを変更する。

5. ブランドと情報アーキテクチャを変更

ブランド名：src/config/constants.ts の APP_NAME（スキャフォールドがすでに書き込み済み）。
デフォルト設計：src/config/design.ts の DEFAULT_APP_CONFIG と DESIGN_PRESETS。
メニュー：src/config/menu.tsx の siderMenuItems。クイック検索：同じファイルの appPages。
ルーティング：src/router/index.tsx。各ビジネスルートには handle: { title: 'ページ名' } が必要。
ログインデモアカウント：src/services/auth.ts。

メニューとルーティングは同期する必要があります。メニュー項目の key はルートパスと同じでなければなりません。そうしないと、ハイライトと遷移がずれます。

6. 設計設定を調整

デフォルト設定とプリセットは src/config/design.ts に集中：

interface AppConfig {
  mode: 'light' | 'dark' | 'system';
  primaryColor: string;
  navLayout: 'side' | 'top';
  siderTheme: 'dark' | 'light';
  contentWidth: 'fluid' | 'fixed';
  density: 'compact' | 'default' | 'comfortable';
  borderRadius: number;
  grayMode: boolean;
}

製品のデフォルト形態を変更：DEFAULT_APP_CONFIG を変更。
推奨組み合わせを変更：DESIGN_PRESETS を変更。
新しい設定項目を追加：AppConfig を拡張 → デフォルト値を追加 → AppConfigContext で setter を公開 → DesignDrawer にコントロールを追加 → App.tsx / レイアウトで使用。
設定は localStorage に永続化（デフォルト nova-admin:design）。
製品がユーザーによるレイアウト変更を許可しない場合、パネル全体を非表示にするのではなく、DesignDrawer から対応するSegmentedを削除する。

7. ビジネスページを実装

references/page-recipes.md のスケルトンに従って作成し、毎回ゼロから発明しない：

リストページ = PageContainer + フィルター Card + テーブル Card（ツールバー、一括操作、ページネーション）。
新規/編集 = 独立した Modal コンポーネント + Form バリデーション + サービス層の呼び出し。
詳細ページ = Descriptions + Timeline + 状態 Tag。
ダッシュボード = 指標カード + グラフ + 最近の記録。テンプレートには依存関係のないSVGグラフが付属。
権限 = ロールテーブル + Tree 権限ドロワー。
ポータル/ツールページ = トップナビゲーション + 固定幅コンテンツ。マーケティングブロックは自作可能だが、それでもantd Tokenとコンポーネントを使用。
コンポーネントAPIは最初に references/components/README.md または公式CLIを確認。現在のコンポーネントのみを読み、記憶に頼ってpropsを書かない。
インタラクションの詳細は references/ux-scenarios.md に従ってシナリオを選択。最初に5つの状態をカバーし、その後バッチ、長時間タスク、競合、権限申請などを追加。
アニメーションは references/ant-motion.md に従う。管理画面はデフォルトでコンポーネントレベルの100–300msフィードバックのみ。行ごとのエントリー、パララックス、全画面トランジションは行わない。
コード品質は references/code-quality.md に従う。型、Hooks、アクセシビリティ、エラー処理、命名、ファイル境界を一緒にチェック。ページを積み上げてから後で修正しない。
テンプレートには3つの拡張例が内蔵：/welcome ポータル/公式サイト、/workspace/board プロジェクトボード、/docs ドキュメントセンター。これらを参考にして、AI、Eコマース、カスタマーサービス、CRM、HR、財務、IoTなどの形態に再利用可能。

新しいドメインデータを追加する場合、同時に src/types、src/services、src/hooks、src/store を更新し、page-recipes.md のデータフローに従う。

8. 納品前チェック

退屈に見えても、これらはルールであって提案ではない。

cd <プロジェクトディレクトリ>

# 1) タイプチェック
pnpm typecheck

# 2) ビルド
pnpm build

# 3) antd 公式 lint（CLIがある場合）
npx -y @ant-design/cli lint ./src

# 4) プロジェクト lint（ある場合）
pnpm lint

上記に合格しない場合は、修正してから納品すること。例外や言い訳は認められない。

9. 既存プロジェクトの変更に関する特別なルール

既存プロジェクトの一部のページ/コンポーネントのみを変更する場合は、以下を適用：

全体のシェルを変更しない：プロジェクトが現在 BasicLayout / ルーティング構造 / 状態管理を使用している場合、それを維持する。要求されていない限り、認証、RBAC、複数のビジネスページ、設計設定を強制しない。
既存のコードパラダイムを尊重：プロジェクトが zustand / jotai / Redux / クラスコンポーネントを使用している場合、コンポーネントスタイルだけを新しいページに強制しない。
新しい依存関係は最小限：antd 内蔵または既存の依存関係で解決できるものは、新しいパッケージを入れない。既存の icon セットは、新しい icon ライブラリを導入する前に考慮する。
デフォルトの構成を尊重：プロジェクトにすでに DEFAULT_APP_CONFIG と異なる ESLint / Prettier / TypeScript 設定がある場合、上書きしない。
参照のみ、移行しない：プロジェクトに適している場合にのみ references/component-reuse.md / references/ux-scenarios.md / references/page-recipes.md を使用し、プロジェクト全体の設計言語を移行しない。

アーキテクチャ概要

アーキテクチャ詳細は references/architecture.md を参照。以下はテンプレートのトップレベル構造：

src/
├── App.tsx                    # Provider とルーティング
├── components/                # グローバル共有コンポーネント
├── config/                    # 設計/メニュー/ルーティング設定
├── hooks/                     # カスタム Hooks
├── layouts/                   # BasicLayout など
├── pages/                     # ページコンポーネント
├── router/                    # ルーティング設定
├── services/                  # API 呼び出し層
├── store/                     # 状態管理
├── theme/                     # Token 設定
└── types/                     # TypeScript 型定義

このスキルは、Ant Design公式がFor Agentsで提唱する「知識駆動型開発」のベストプラクティスを採用し、AIエージェントが実際のコンポーネント知識、正確なAPI、最新の設計言語にアクセスできるようにします。これにより、記憶に頼ったAPI使用による互換性の問題や、誤ったAPIの使用を回避します。

lzhbhlrPython/antd-admin-template

antd-admin-template とは？

お気に入りのAIに質問する

ドキュメント