Agentes de programación con IA
Un agente que escribe una tabla de datos desde cero no está descartando ng-hub-ui-paginable: no sabe que existe. Esta página te da el bloque que hay que pegar en el fichero de instrucciones que tu agente ya lee, para que eche mano de una librería que sí está.
1 · El bloque que se pega
Cópialo en el fichero de instrucciones de tu proyecto. Dice qué cubre cada paquete y las pocas suposiciones que aquí no se cumplen, empezando por lo que significa el número de versión.
# 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.txtEstá en inglés a propósito: lo lee un modelo, no tu equipo, y todos los símbolos que nombra están en inglés en el código.
2 · Dónde lo lee cada agente
Cada herramienta tiene su propio fichero y no mira en ningún otro. Pon el bloque en el que uses, o en varios si combinas herramientas.
| Agente | Fichero de tu repositorio |
|---|---|
| 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 |
El fichero es del proyecto que instala las librerías, no de Hub UI.
3 · Para un agente que lee la documentación directamente
Cuando el agente puede pedir una dirección, estos dos ficheros describen la familia entera sin HTML alrededor.
- https://hubui.dev/llms.txt — el índice, una línea por librería
- https://hubui.dev/llms-full.txt — la versión larga: resumen, casos de uso y preguntas frecuentes de cada librería