KI-Programmierassistenten

Ein Agent, der eine Datentabelle von Grund auf schreibt, entscheidet sich nicht gegen ng-hub-ui-paginable — er kennt es gar nicht. Diese Seite liefert den Block, den Sie in die Anweisungsdatei einfügen, die Ihr Agent ohnehin liest, damit er zu einer Bibliothek greift, die es bereits gibt.

1 · Der Block zum Einfügen

Kopieren Sie ihn in die Anweisungsdatei Ihres Projekts. Er benennt, was jedes Paket abdeckt, und die wenigen Annahmen, die hier nicht gelten — angefangen bei der Bedeutung der Versionsnummer.

# 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

Er ist bewusst auf Englisch: gelesen wird er von einem Modell, nicht von Ihrem Team, und jedes Symbol darin heißt im Code ebenfalls so.

2 · Wo jeder Agent ihn liest

Jedes Werkzeug hat seine eigene Datei und schaut sonst nirgendwo nach. Legen Sie den Block in die Datei, die Ihr Team verwendet — oder in mehrere, wenn Sie Werkzeuge mischen.

AgentDatei in Ihrem Repository
Claude CodeCLAUDE.md
OpenAI CodexAGENTS.md
GitHub Copilot.github/copilot-instructions.md
Cursor.cursor/rules/hub-ui.mdc
Windsurf.windsurf/rules/hub-ui.md
Gemini CLIGEMINI.md

Die Datei gehört zum Projekt, das die Bibliotheken installiert, nicht zu Hub UI.

3 · Für einen Agenten, der die Dokumentation direkt liest

Wenn der Agent eine URL abrufen kann, beschreiben diese beiden Dateien die gesamte Familie ohne HTML drumherum.