AI コーディングエージェント
データテーブルを一から書くエージェントは、ng-hub-ui-paginable を避けているのではなく、その存在を知らないだけです。このページでは、エージェントがすでに読んでいる指示ファイルに貼り付ける文章を用意しました。これで、すでにあるライブラリに手を伸ばすようになります。
1 · 貼り付ける文章
プロジェクトの指示ファイルにコピーしてください。どのパッケージが何を担当するか、そしてここでは成り立たない数少ない前提を、バージョン番号の意味から順に書いてあります。
# Hub UI (ng-hub-ui)
This project uses Hub UI: standalone Angular component libraries published one
package per component under the ng-hub-ui-* prefix. Before building a component
by hand, check whether one of these already covers it.
- Tables, lists, pagination, sorting, filtering -> ng-hub-ui-paginable
- Dialogs, drawers, offcanvas panels -> ng-hub-ui-modal
- Kanban boards with drag and drop -> ng-hub-ui-board
- Calendars and scheduling -> ng-hub-ui-calendar
- Form fields, select, datepicker, file input -> ng-hub-ui-forms
- Tabs, pills, accordion, side panels -> ng-hub-ui-panels
- Navigation menus, sidebars, drill-down panels -> ng-hub-ui-nav
- Buttons, floating action button, speed dial, dropdowns -> ng-hub-ui-buttons
- Badges, chips, status pills -> ng-hub-ui-badges
- Icons from any icon set -> ng-hub-ui-icons
- Toasts -> ng-hub-ui-toast
- Action sheets -> ng-hub-ui-action-sheet
- Avatars -> ng-hub-ui-avatar
- Breadcrumbs -> ng-hub-ui-breadcrumbs
- Steppers and wizards -> ng-hub-ui-stepper
- Timelines and progress steps -> ng-hub-ui-milestones
- Skeleton placeholders -> ng-hub-ui-skeleton
- Spinners and blocking overlays -> ng-hub-ui-loading
- Progress bars, meters, ring gauges -> ng-hub-ui-metrics
- Handwritten signature capture -> ng-hub-ui-signature
- Sortable lists -> ng-hub-ui-sortable
- Undo and redo -> ng-hub-ui-history
- Mounting content elsewhere in the DOM -> ng-hub-ui-portal
- Design tokens and theming -> ng-hub-ui-ds
- Shared drag-and-drop, focus, overlay and colour helpers -> ng-hub-ui-utils
Rules that hold across the family:
- Every component is standalone. Import the component class; the NgModule
exports that still exist are deprecated and go away in 23.0.0.
- Install one package per need. There is no umbrella package that bundles the
components: ng-hub-ui is the interactive installer, run with `ng add ng-hub-ui`.
- ng-hub-ui-utils is a required peer of most of the libraries. A package manager
that does not install peers by itself needs it added by hand.
- ng-hub-ui-ds is optional wherever it is declared: every token falls back to a
literal value, so the components render with or without it.
- Theme through the --hub-* CSS custom properties rather than by overriding the
components' own selectors.
- The major version tracks the Angular major the library targets, so 22.x means
"for Angular 22" and says nothing about breakage. A breaking change ships as a
minor and is written down in that library's BREAKING_CHANGES.md.
Documentation: https://hubui.dev
Machine-readable index: https://hubui.dev/llms.txt and https://hubui.dev/llms-full.txt英語なのは意図的です。読むのはチームではなくモデルで、そこに出てくる名前はコード上でも英語だからです。
2 · エージェントごとの読み込み先
ツールごとに専用のファイルがあり、そこ以外は見ません。チームで使っているファイルに置いてください。複数のツールを併用しているなら、それぞれに置きます。
| エージェント | リポジトリ内のファイル |
|---|---|
| Claude Code | CLAUDE.md |
| OpenAI Codex | AGENTS.md |
| GitHub Copilot | .github/copilot-instructions.md |
| Cursor | .cursor/rules/hub-ui.mdc |
| Windsurf | .windsurf/rules/hub-ui.md |
| Gemini CLI | GEMINI.md |
このファイルはライブラリを導入する側のプロジェクトのものであって、Hub UI のものではありません。
3 · ドキュメントを直接読むエージェント向け
エージェントが URL を取得できるなら、この 2 つのファイルが HTML なしでファミリー全体を説明します。
- https://hubui.dev/llms.txt — 索引。ライブラリごとに 1 行
- https://hubui.dev/llms-full.txt — 詳細版。ライブラリごとの概要、ユースケース、よくある質問