Workbeat Design System
Agentes IA
Cómo usa un agente el WDS: skills, playbook y plantillas de prompt.
Endpoints no habilitados en este entorno
/llms.txt, /llms-full.txt y /api/docs/* están apagados (VITE_ENABLE_DOCS_API). Mientras tanto, los agentes pueden apoyarse en las skills y en las guías del repo.md
Antes de escribir UI con el Workbeat Design System:
1. Revisa las skills wds-* en .agents/skills y sigue la que aplique (si existe un patrón, es obligatorio usarlo).
2. Consulta la guía del patrón en src/design-system/docs y respeta su API.
3. Usa sólo tokens semánticos y datos vía service objects (src/services/*).
4. No edites src/design-system en un host: si falta algo, repórtalo al equipo de frontend.| Skill | Cuándo usarla |
|---|---|
wds-advanced-filters | Agrega o ajusta filtros avanzados multi-regla (campo · operador · valor) en grids administrables. Trigger cuando una pantalla necesita un popover de filtros con varias condiciones AND/OR, o cuando se detecta un popover de filtros local hecho a mano que hay que homologar. |
wds-audit | Audita congruencia visual, componentes, patrones, estados y responsividad respecto al Workbeat Design System en hosts, apps aisladas y MCP Apps, con proyecto fuente o sólo HTML generado. Conserva los controles de integración de hosts e incluye token-audit para el DS y el frontend propio del host, con clasificación de candidatos, tokens propios documentados y baseline de deuda histórica. |
wds-catalog-explorer-sidebar | Usa CatalogExplorerSidebar como patrón oficial para navegación lateral reutilizable en vistas de catálogos o configuración con búsqueda, selección, lista/tree, resize y persistencia opcional de ancho. Se activa ante paneles laterales izquierdos de catálogos, apartados, secciones o configuraciones. |
wds-catalog-grid | Cómo usar y extender el patrón CatalogGrid (catálogos administrables genéricos JSON-driven). Activar cuando el usuario pida crear, migrar o modificar un catálogo administrable (estado civil, género, tipo de documento, etc.), agregar columnas/filtros/acciones a un catálogo, o cambiar el comportamiento de la tabla genérica de catálogos. |
wds-charts | Usa este skill cuando una pantalla, panel o bloque analítico necesite una gráfica con Recharts. Governa la selección entre `ChartContainer` e `IndexBar`, tokens del tema, estados, y el contrato de datos vía Workbeat Service Objects. |
wds-compact-status-summary | Use when a consultative tab/section needs a compact 48-64 px status bar with title, checklist and a single secondary CTA preceding a table, without pushing the table out of the first fold. |
wds-config-loading | Aplica carga progresiva por capas en pantallas de configuración (/config/*) y en cualquier SideCanvas con contenido lazy. Trigger cuando se pinta un fallback de carga, se crea un sidepanel lazy, o se detecta un "Cargando…" plano o un skeleton sobre información ya conocida. |
wds-config-side-panel | Patrón reusable para sidepanels de configuración, creación, edición y consulta de entidades grandes o seccionales. Usar al crear, editar, homologar o corregir sidepanels que combinan SideCanvas, ConfigSidePanel o DynamicEditSidePanel. |
wds-dashboard | Compón pantallas tipo dashboard operativo en CoreRH (home de módulo, vista de monitoreo). Trigger cuando se pide crear o refactorizar una pantalla con KPIs, acciones rápidas, gráficas y actividad reciente, especialmente la home de un módulo. |
wds-data-grid | Use when building previews of imported data (cargas masivas, depuración, staging) that need inline cell edit, per-row status, validation and blocked final action when errors exist. |
wds-design-system | Aplica el WB Design System de CoreRH al crear, refactorizar o auditar cualquier pantalla React del producto. Trigger cuando el usuario pide una pantalla nueva en src/routes, alinear una pantalla existente al estándar, homologar visual, o revisar cumplimiento del design system. Obliga a producir primero un plan de implementación (tipo de pantalla → blueprint → patrones → estados → tokens → checklist) antes de tocar código, y delega los detalles a los skills de patrón (catalog-grid, full-table, section-table-card, config-side-panel, dynamic-side-panel, editable-card, dashboard, org-navigation, expediente-catalog-fulltable, advanced-filters, table-header, config-loading, etc.). |
wds-dynamic-side-panel | Cómo usar y extender el sidepanel dinámico `CatalogSidePanel` (Dynamic Side Panel) de catálogos generales y sus controles componentizados. Activar cuando el usuario pida crear/editar un sidepanel para entradas de catálogo, agregar un nuevo `PanelFieldKind`, cambiar el comportamiento de header/body/footer del panel de catálogos, o reutilizar los controles (`TextFieldControl`, `SelectFieldControl`, `SwitchFieldControl`, etc.) en otra superficie. |
wds-editable-card | Use when a summary card of fields should remain read-focused and open editing in a sidepanel (ConfigSidePanel/EditableCardFormPanel) instead of inline inputs. |
wds-effective-preview-panel | Use only inside Tipos de expediente configuration when a "Vista previa" of an apartado is required — must render the read-only effective schema via SectionEffectivePreviewPanel, never a parallel preview. |
wds-expediente | Compon pantallas de expediente como entidad seccionada con SideNav obligatorio, contenido en SectionCard/SectionTableCard y detalle contextual en SideCanvas. Trigger cuando se crea o refactoriza una vista de expediente transversal. |
wds-expediente-catalog-fulltable | Implementa pantallas de consulta masiva por apartado del expediente en /config/expediente/* (Idiomas, Escolaridad, Familiares, Domicilio, Experiencia laboral, Cursos, Actividad social, Areas de experiencia). Trigger cuando se pide listar todos los registros transaccionales de un apartado para toda la población. NO usar para catálogos maestros administrables. |
wds-full-table | Use this skill whenever you build a list-style screen (directory, registry, browse page, índice de registros) that needs search, filters, segmentation tabs, sortable columns, configurable views, pagination, selection y row interaction. Cada pantalla define su propio modelo de datos, columnas, filtros, botón principal e interacción por fila — esta skill explica cómo expresarlos correctamente sobre `FullTable`. |
wds-full-table-side-nav | Variante del patrón FullTable con rail vertical colapsable y header full-width compartido. Úsala cuando una pantalla agrupa varios listados (FullTableDef) que se intercambian desde un menú lateral state-mode, manteniendo header, búsqueda, filtros, columnas, vistas y paginación coherentes entre módulos. |
wds-grid-empty-state | | |
wds-grid-toolbar-actions | Use when an embedded or scoped grid (nested inside a tab, record or dialog) needs the same toolbar look-and-feel as Catálogos Generales but cannot adopt CatalogGrid itself. |
wds-grid-visual-standards | | |
wds-hierarchy-table | Use when building a tree/hierarchical list screen (orgcharts, headcount por niveles, árboles de dependencia) that needs FullTable-like toolbar but with expand/collapse and sticky primary column. |
wds-kpi-card | Use when surfacing a numeric KPI (headcount, coverage, totals) in dashboards or summary blocks with optional trend, icon and metadata. |
wds-migrate-to-local | Migra un host que consume Workbeat Design System por Module Federation a consumo local desde src/design-system. |
wds-org-navigation | Implementa pantallas tipo árbol + ficha del módulo organizacional (Departamentos, Equipos, Sucursales, Expediente Operativo, y cualquier futura entidad jerárquica). Trigger cuando se pide pintar un árbol jerárquico con un panel de detalle/ficha a la derecha y tabs internos. |
wds-page-sections | Use when a full route (not a sidepanel) needs a fixed set of sub-sections, each with its own child URL and enough visual weight to deserve its own title/subtitle — a vertical route-based rail, not horizontal tabs, not a state-mode swap, not a SideCanvas. |
wds-permission-sets | Integra o revisa permission sets Cerbos en módulos, rutas y componentes React de un host WDS, incluyendo solicitud externa, configuración del evaluador, boundary del módulo, hook de acceso, navegación, guardia de ruta y gates de componente. |
wds-scaffold-new-project | Crea un proyecto nuevo con el Workbeat Design System local en src/design-system y un layout raíz listo para rutas. |
wds-searchable-catalog-select | Use when a form field selects one value from a large in-memory catalog (país, estado, ciudad, banco, ocupación) where a Select with scroll stops being usable. |
wds-section-table-card | Use when a detail page or panel needs an embedded table section inside a SectionCard, with header actions and optional column visibility control, without adopting a full directory grid. |
wds-segmented-button | Use when an inline toggle between 2-4 mutually exclusive views of the same surface is needed (Nueva carga / Historial, Indentado / Tradicional, Carga de archivos / Conexión SAT CFDI). |
wds-setup | Instala o repara el consumo local del Workbeat Design System desde src/design-system, incluyendo provider, autenticación, HTTP, Tailwind y la capa de tokens/themes locales. |
wds-shared | Reglas para consumir el Workbeat Design System compartido desde src/design-system y cómo ubicar <DS>, su carpeta con o sin el DS adjunto de Lovable. Úsala cuando una tarea pueda cambiar, o un plan pueda requerir cambiar, archivos bajo src/design-system, esa carpeta sólo es editable si el repo tiene el marcador .wds-source.json en la raíz; sin él es de sólo lectura y el requerimiento se resuelve del lado del host o se pide al equipo de frontend. |
wds-side-wizard | Use when a flow needs a linear multi-step assistant (wizard) — alta guiada, configuración inicial, onboarding de una entidad — donde el usuario recorre una secuencia fija de pasos con avance/retroceso y una acción final. No para builders de workflows con pasos reordenables. |
wds-steps-composer | Use when building a workflow builder screen (approvals, automations, guided assistants) with a sidebar of workflows, an active workspace and a drag-and-drop list of steps. |
wds-sticky-header | Use when a detail panel or page needs a sticky header that compacts on scroll, with left/right slots and optional bottom metrics block (jobs, employees, organizational records). |
wds-table-header | Aplica el estándar visual obligatorio del thead de cualquier grid administrable (catálogos, listados de configuración, tablas en sidepanels, expedientes operativos). Trigger cuando se crea o se ajusta un thead en una tabla de configuración o consulta masiva. |
wds-theming | Cómo funciona la capa de themes y tokens del Workbeat Design System (WDS), y cómo un host sobreescribe tokens sin romper la precedencia default → theme (claim Theme) → host. Úsala al crear o registrar un theme del DS, al cablear el claim Theme o la prop theme de WDSProvider, al rebrandear un host, al revisar por qué un color no cambia (un theme que no se ve, un host que no gana, un token que no reacciona al modo oscuro) o al decidir en qué capa va un token. No la uses para auditar hardcodes de componentes (eso es el modo token-audit de wds-audit). |
workbeat-service-objects | Use whenever creating, reading, or refactoring data access in components. Enforces the Workbeat architecture — Service Objects, env-driven data source switch (mock|api), centralized API client with bearer auth, and HTTP status-aware error handling. Mockup must always work without backend. |