lkd-web-kit 0.10.5 → 0.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",
@@ -26,7 +26,7 @@
   "engines": {
     "node": ">=22.12.0"
   },
-  "files": ["dist", ".agents/skills", "scripts/install-agent-skills.mjs"],
+  "files": ["dist", "src/distributed-skills", "scripts/install-agent-skills.mjs"],
   "scripts": {
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",

package/scripts/install-agent-skills.mjs

@@ -4,11 +4,11 @@ import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 const scriptDir = dirname(fileURLToPath(import.meta.url))
-const source = join(scriptDir, '..', '.agents', 'skills')
+const source = join(scriptDir, '..', 'src', 'distributed-skills')
 const target = join(process.cwd(), '.agents', 'skills')
 
 if (!existsSync(source)) {
-  throw new Error(`No se encontraron skills en ${source}`)
+  throw new Error(`No se encontraron skills distribuibles en ${source}`)
 }
 
 mkdirSync(target, { recursive: true })

package/src/distributed-skills/create-modal-component/SKILL.md

@@ -0,0 +1,168 @@
+---
+name: create-modal-component
+description: Crear modales en proyectos internos con el modal manager global de lkd-web-kit. Usar cuando Codex deba agregar, modificar o registrar modales bajo src/components/modals, envolverlos con withModalManager, elegir entre un modal interno del proyecto o Modal de Mantine, organizar el modal en carpeta propia, tipar props para showModal, actualizar dynamicModals, MyModalManagerProvider, module augmentation o loadModals.
+---
+
+# Crear Modal Component
+
+Usar este flujo para modales abiertos con `useModalManager().showModal(...)`.
+
+## Lectura Obligatoria
+
+1. Leer `docs/lkd-web-kit.md` y `docs/local-components.md`.
+2. Leer `src/components/modals/index.ts`.
+3. Leer `src/contexts/MyModalManagerContext/index.tsx`.
+4. Leer `src/types/lkd-web-kit.d.ts`.
+5. Buscar si existe un modal interno en `src/components/ui` o componentes compartidos antes de importar `Modal` de Mantine.
+6. Leer un modal existente del mismo dominio en `src/components/modals/{dominio}`.
+7. Si se toca `next/dynamic` o lazy loading, leer `node_modules/next/dist/docs/01-app/02-guides/lazy-loading.md`.
+
+## Arquitectura Actual
+
+- `lkd-web-kit` exporta `ModalManagerProvider`, `useModalManager`, `withModalManager`, `ModalRegistryItem`, `ModalKey` y tipos relacionados.
+- El proyecto no usa `src/contexts/ModalManagerContext`; no recrearlo.
+- `src/contexts/MyModalManagerContext/index.tsx` adapta el provider del kit y le pasa `dynamicModals`.
+- `src/types/lkd-web-kit.d.ts` hace module augmentation para que `showModal` infiera keys y props desde `dynamicModals`.
+- `src/app/PageProviders.tsx` envuelve la app con `MyModalManagerProvider` y propaga `loadModals`.
+
+## Estructura
+
+- Crear modales en `src/components/modals/{dominio}/{NombreModal}/index.tsx` cuando tengan formulario, schema, hooks internos, assets o subcomponentes.
+- Usar archivo plano `src/components/modals/{dominio}/{NombreModal}.tsx` solo para modales triviales de una pieza, siguiendo el patron existente.
+- Colocar piezas privadas junto al modal: `schema.ts`, `helpers.ts`, subcomponentes o assets dentro de la misma carpeta.
+- No mover logica compartida a `src/components/ui` salvo que ya exista mas de un consumidor real.
+
+## Implementacion
+
+1. Definir props exportadas si el modal recibe datos desde `showModal`:
+
+```tsx
+export interface MyModalProps {
+  itemId: string;
+  onSuccess?: () => void;
+}
+```
+
+2. Envolver el componente con `withModalManager<Props>`.
+3. Recibir `modalProps` desde el wrapper y pasarlo al modal raiz.
+4. Antes de usar `Modal` de `@mantine/core`, corroborar si el proyecto tiene un modal interno que ya envuelve Mantine y usarlo si cubre el caso.
+5. Usar clases Tailwind para spacing, radius, shadow, margin y padding; evitar props Mantine equivalentes si `className` resuelve el caso.
+6. Usar wrappers locales del proyecto o `lkd-web-kit` antes que primitivas Mantine directas.
+7. No usar `any`.
+
+Modal base con modal interno:
+
+```tsx
+import { withModalManager } from "lkd-web-kit";
+import ButtonAE from "src/components/ui/ButtonAE";
+import InternalModal from "src/components/ui/InternalModal";
+
+export interface MyModalProps {
+  onConfirm?: () => void;
+}
+
+const MyModal = withModalManager<MyModalProps>(
+  ({ onConfirm, modalProps }) => {
+    return (
+      <InternalModal {...modalProps} size="lg">
+        <InternalModal.Header>Titulo</InternalModal.Header>
+        <InternalModal.Body className="grid gap-4">Contenido</InternalModal.Body>
+        <InternalModal.Footer>
+          <ButtonAE
+            onClick={() => {
+              onConfirm?.();
+              modalProps.onClose?.();
+            }}
+          >
+            Guardar
+          </ButtonAE>
+        </InternalModal.Footer>
+      </InternalModal>
+    );
+  },
+);
+
+export default MyModal;
+```
+
+Fallback con Mantine, solo si no hay modal interno aplicable:
+
+```tsx
+import { Modal } from "@mantine/core";
+import { withModalManager } from "lkd-web-kit";
+
+const MyModal = withModalManager(({ modalProps }) => (
+  <Modal {...modalProps} title="Titulo">
+    Contenido
+  </Modal>
+));
+
+export default MyModal;
+```
+
+## Registro
+
+1. Exportar las props publicas desde el modal.
+2. Importar el tipo de props en `src/components/modals/index.ts`:
+
+```ts
+import type { MyModalProps } from "./domain/MyModal";
+```
+
+3. Registrar con `dynamicModal<Props>("domain/MyModal")`:
+
+```ts
+"domain.myModal": dynamicModal<MyModalProps>("domain/MyModal"),
+```
+
+4. Usar una key estable con formato `{dominio}.{accion}`.
+5. No tocar `src/types/lkd-web-kit.d.ts` si `dynamicModals` sigue siendo la fuente unica. La augmentacion ya apunta a `typeof dynamicModals`.
+6. Si se cambia la forma del registro, mantener `ModalRegistryItem<T>` y que cada item tenga `component`, `load` y `path`.
+
+## Contexto y Precarga
+
+- Para rutas que ya usan `PageProviders`, pasar `loadModals` ahi:
+
+```tsx
+<PageProviders loadModals={["domain.myModal"]}>{children}</PageProviders>
+```
+
+- `loadModals` acepta una key exacta o un prefijo, por ejemplo `"development"` para precargar todos los modales cuyo key empieza con ese prefijo.
+- Para layouts que no usan `PageProviders`, envolver el arbol con `MyModalManagerProvider`:
+
+```tsx
+import { MyModalManagerProvider } from "src/contexts/MyModalManagerContext";
+
+<MyModalManagerProvider loadModals={["domain.myModal"]}>
+  {children}
+</MyModalManagerProvider>
+```
+
+- Evitar providers anidados salvo que haya una razon real: un provider interno aisla estado y puede cerrar o reemplazar modales inesperadamente.
+- Invocar siempre con `useModalManager` desde `lkd-web-kit`, nunca importando el modal directo desde una vista:
+
+```tsx
+import { useModalManager } from "lkd-web-kit";
+
+const { showModal, closeModal } = useModalManager();
+showModal("domain.myModal", { itemId: "123" });
+closeModal("domain.myModal");
+```
+
+## Formularios Dentro de Modales
+
+- Usar la skill `rhf-lkd-forms` si el modal contiene formulario.
+- Pasar `onSuccess={modalProps.onClose}` o cerrar en el submit exitoso.
+- En errores de API, mostrar la alerta esperada y luego hacer `throw error`.
+- No poner mensajes textuales en reglas base de Zod.
+
+## Checklist
+
+- El modal exporta default envuelto con `withModalManager`.
+- Las props publicas estan exportadas y registradas en `dynamicModals`.
+- `showModal("key", props)` queda tipado sin `any`.
+- `useModalManager` se importa desde `lkd-web-kit`.
+- La ruta esta bajo `PageProviders` o `MyModalManagerProvider`.
+- `loadModals` se agrega solo cuando conviene precargar.
+- Se reutiliza el modal interno del proyecto salvo necesidad concreta de Mantine directo.
+- Se ejecuta una verificacion focalizada si el cambio no es trivial.

package/src/distributed-skills/create-modal-component/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Create Modal Component"
+  short_description: "Create project modals with manager registration."
+  default_prompt: "Use $create-modal-component to create a modal following this project's modal manager pattern."

package/src/distributed-skills/create-nextjs-page/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: create-nextjs-page
+description: Crear o refactorizar paginas de Next.js App Router manteniendo app limpio y delegando la UI a componentes de pagina en src/components/pages. Usar cuando Codex deba crear page.tsx, mover UI fuera de app, organizar subcomponentes privados de una pagina, envolver paginas con PageProviders o normalizar nombres/rutas de componentes Page en proyectos que consumen lkd-web-kit.
+---
+
+# Create Next.js Page
+
+Usar este skill para crear o refactorizar paginas de Next.js App Router en proyectos que usan `lkd-web-kit`.
+
+## Lectura obligatoria
+
+1. Leer la documentacion relevante de Next.js antes de tocar rutas. Si existe `node_modules/next/dist/docs/`, usarla como fuente local.
+2. Leer la documentacion local del proyecto sobre `lkd-web-kit`, componentes compartidos y patrones de UI si existe.
+3. Revisar una pagina cercana antes de editar para respetar imports, providers, carga de datos, traducciones y convenciones del proyecto.
+
+## Regla principal
+
+- Mantener `app` como capa de routing de Next.js.
+- En `app`, dejar solo `layout.tsx`, `page.tsx` y archivos especiales de Next.js cuando correspondan: `not-found.tsx`, `loading.tsx`, `error.tsx`, `route.ts`, `template.tsx`, `default.tsx` o metadata files.
+- No colocar vistas, subcomponentes, hooks privados, helpers de UI, schemas, columnas de tabla ni componentes de pagina dentro de `app`.
+- Colocar la UI real de cada ruta en `src/components/pages`.
+
+## Estructura de pagina
+
+Para una pagina simple:
+
+```txt
+src/app/[locale]/(app-layout)/development/page.tsx
+src/components/pages/app/DevelopmentPage.tsx
+```
+
+Para una pagina con subcomponentes privados:
+
+```txt
+src/app/[locale]/(app-layout)/development/page.tsx
+src/components/pages/app/DevelopmentPage/index.tsx
+src/components/pages/app/DevelopmentPage/Header.tsx
+src/components/pages/app/DevelopmentPage/helpers.ts
+```
+
+- Usar archivo plano `{PageName}Page.tsx` si el componente es de una pieza.
+- Usar carpeta `{PageName}Page/index.tsx` si hay subcomponentes, helpers, schemas o piezas privadas.
+- Mantener dentro de esa carpeta solo lo privado de esa pagina.
+- Mover a componentes compartidos solo cuando exista reutilizacion real.
+
+## PageProviders
+
+Cada `page.tsx` debe retornar el componente Page envuelto con `PageProviders`.
+
+```tsx
+import PageProviders from "src/app/PageProviders";
+import DevelopmentPage from "src/components/pages/app/DevelopmentPage";
+
+const Page = async () => {
+  return (
+    <PageProviders>
+      <DevelopmentPage />
+    </PageProviders>
+  );
+};
+
+export default Page;
+```
+
+- Usar el import real de `PageProviders` del proyecto si difiere del ejemplo.
+- Pasar a `PageProviders` solo las props que existan y sean necesarias en ese proyecto.
+- Mantener en `page.tsx` solo responsabilidades de entrypoint: params, metadata, fetch server-side, redirects/notFound y providers.
+- No duplicar providers dentro del componente de pagina salvo que el proyecto tenga una razon documentada.
+
+## Mapeo de area
+
+Derivar `{area}` desde el route group principal cuando exista:
+
+- `(app-layout)` -> `app`
+- `(admin-layout)` -> `admin`
+- `(home-layout)` -> `home`
+- `(developer-layout)` -> `developer`
+- `(agency-layout)` -> `agency`
+
+Regla general:
+
+- Si el route group termina en `-layout`, quitar ese sufijo.
+- Si no termina en `-layout`, usar el nombre limpio del group sin parentesis.
+- Si no hay route group claro, usar el primer segmento estable de la ruta.
+- Ignorar `[locale]`, route groups y segmentos dinamicos para elegir el area.
+
+## Nombres
+
+- Usar PascalCase y sufijo `Page`.
+- Para rutas estaticas, usar el ultimo segmento estable: `(app-layout)/development/page.tsx` -> `DevelopmentPage`.
+- Para rutas dinamicas, usar el ultimo segmento estatico util y agregar `DetailPage`: `development/[development_slug]/page.tsx` -> `DevelopmentDetailPage`.
+- Para rutas dinamicas anidadas, preferir el ultimo segmento estatico util: `development/[development_slug]/property/[property_slug]` -> `PropertyDetailPage`.
+- Si el nombre colisiona o pierde contexto, anteponer el segmento padre: `DevelopmentPropertyDetailPage`.
+- No incluir nombres de route groups, `[locale]` ni nombres de parametros como `Slug` salvo que haga falta para evitar ambiguedad real.
+
+## Checklist
+
+- `app` queda limpio y sin UI privada.
+- `page.tsx` importa un componente desde `src/components/pages/{area}`.
+- `page.tsx` envuelve siempre con `PageProviders`.
+- Las props de `PageProviders` corresponden al proyecto actual, no a otro consumidor.
+- El componente de pagina no usa `any`.
+- Los subcomponentes privados viven junto a la pagina, no en `app`.
+- Se ejecuta una verificacion focalizada cuando el cambio toca codigo de aplicacion.

package/src/distributed-skills/create-nextjs-page/agents/openai.yaml

@@ -0,0 +1,3 @@
+display_name: Create Next.js Page
+short_description: Create clean Next.js App Router pages.
+default_prompt: Create or refactor a Next.js App Router page using the clean PageProviders pattern.

package/src/distributed-skills/create-svg-icon/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: create-svg-icon
+description: Create SVG icon files in projects that expose SVGs from src/icons. Use when Codex must add a new icon under src/icons from user-provided SVG markup, normalize SVG colors to currentColor for Tailwind text-* styling, and export the icon alias from src/icons/index.ts.
+---
+
+# Create SVG Icon
+
+Use this skill when the user provides SVG markup and the desired icon name, usually in the form `Icon{Name}`.
+
+## Required Workflow
+
+1. Read `src/icons/index.ts` before editing.
+2. Determine the component export name from the user input.
+   - Expected format: `Icon{Name}`.
+   - Keep the export alias with the `Icon` prefix.
+3. Verify the icon does not already exist.
+   - Check for the exact alias in `src/icons/index.ts`.
+   - Check for the target SVG filename in `src/icons/`.
+   - If either exists, cancel the operation and notify the user.
+4. Build the SVG filename.
+   - Remove the leading `Icon` prefix.
+   - Convert the remaining name to kebab-case.
+   - Save it as `src/icons/{name}.svg`.
+   - Example: `IconBuildingTower` -> `src/icons/building-tower.svg`.
+5. Normalize the provided SVG.
+   - Replace every explicit visual color value with `currentColor`.
+   - Include colors expressed as hex, rgb(), rgba(), hsl(), hsla(), named colors, or inline style values.
+   - Apply this to attributes such as `fill`, `stroke`, `color`, `stop-color`, and CSS declarations inside `style`.
+   - Preserve `fill="none"`, `stroke="none"`, `currentColor`, `transparent`, masks, clipping, sizing, viewBox, paths, and structural SVG attributes.
+   - Do not convert opacity values to `currentColor`.
+6. Create the SVG file in `src/icons/`.
+7. Add the alias in `src/icons/index.ts` following the existing export style in that file.
+8. Report the created SVG path and the added export alias.
+
+## Guardrails
+
+- Do not use `any`.
+- Do not create React wrapper components for the icon unless the existing icon system requires it.
+- Do not overwrite an existing icon file or alias.
+- Do not invent SVG path data; use the SVG supplied by the user.
+- Keep edits scoped to `src/icons/{name}.svg` and `src/icons/index.ts` unless the user asks for something else.

package/src/distributed-skills/create-svg-icon/agents/openai.yaml

@@ -0,0 +1,3 @@
+display_name: Create SVG Icon
+short_description: Create project SVG icons with currentColor and index exports.
+default_prompt: Create an SVG icon for this project from the SVG markup and icon name I provide.

package/src/distributed-skills/create-table-component/SKILL.md

@@ -0,0 +1,189 @@
+---
+name: create-table-component
+description: Crear, extraer o refactorizar tablas/listados tabulares en proyectos internos usando el patron estricto de componente encapsulado con MyTable, TableWrapper y createColumnHelper. Usar cuando Codex deba mostrar datos en tabla, mover columnas/hook de servicio a un componente de tabla, agregar paginacion, header/footer de tabla, acciones por fila, tablas verticales o adaptar una vista para no usar MyTablePagination.
+---
+
+# Create Table Component
+
+Usar este skill para crear o refactorizar tablas del proyecto.
+
+## Workflow obligatorio
+
+1. Leer primero `docs/local-components.md` y `docs/lkd-web-kit.md`.
+2. Si toca Next.js, leer la documentacion relevante en `node_modules/next/dist/docs/`.
+3. Revisar un ejemplo cercano antes de editar; preferir `Table{EntityPlural}.tsx`.
+4. Crear o mantener la tabla en un componente encapsulado junto a la vista/feature que la consume.
+5. Usar `createColumnHelper<RowData>()`; no declarar `any`.
+6. Importar `MyTable` y `TableWrapper*` desde `lkd-web-kit`.
+7. Usar `MyTable` para renderizar la tabla.
+8. Usar `TableWrapper` como raiz visual de la tabla.
+9. No usar `MyTablePagination` para nuevas tablas.
+
+## Checklist antes de escribir columnas
+
+- Definir si la tabla es horizontal o `variant="vertical"`.
+- Definir que representa cada header: solo deben ser columnas/campos reales de la tabla.
+- Distinguir contenido superior/inferior de estructura tabular: titulos, subtitulos, emails, filtros, secciones y acciones van en `TableWrapperHeader`/`TableWrapperFooter`, no en columnas falsas.
+- Definir si la data representa registros completos o pares label/value. Para `variant="vertical"`, preferir registros completos con campos reales.
+
+## Decisiones que hay que preguntar
+
+Si el usuario no lo especifica y no se puede inferir del codigo cercano, preguntar:
+
+- Si la tabla lleva contenido arriba de la tabla.
+- Si la tabla lleva contenido abajo de la tabla.
+- Si la tabla lleva paginacion.
+- Si la tabla debe ser horizontal o `variant="vertical"`.
+
+No asumir que `TableWrapperHeader` implica titulo. Usarlo para cualquier contenido superior: titulo, filtros, acciones, botones, tabs, resumen, subtitulo, email o encabezado de seccion.
+
+No asumir que `TableWrapperFooter` implica paginacion. Usarlo para cualquier contenido inferior: paginacion, totales, leyendas, acciones o resumen.
+
+Si hay titulo, usar `TableWrapperTitle` dentro de `TableWrapperHeader`.
+
+Si hay paginacion, usar `TableWrapperPagination` dentro de `TableWrapperFooter`.
+
+## Paginacion
+
+- Usar `TableWrapperPagination`, nunca `MyTablePagination` en tablas nuevas.
+- Usar `variant="short"` para paginacion compacta con texto tipo `1-10 de 15 filas`; queda alineada a la derecha por defecto.
+- Para `variant="short"`, pasar siempre `pageSize`. Si los datos vienen async, usar un fallback estable como `pageSize={currentPage?.pageSize ?? 10}`.
+- No armar el texto de rango en la vista si alcanza con metadata: pasar `totalRows`, `pageSize` y `currentRows`.
+- Usar `text` solo como override manual del texto calculado.
+- Mantener `variant="long"` o sin `variant` para la paginacion completa.
+
+## Tablas verticales
+
+Para `MyTable variant="vertical"`, modelar los campos como columnas reales y la data como una fila/registro completo. Los nombres de campos van en `column.header`; los valores van en `column.cell`.
+
+No simular una tabla vertical con una columna `entry`, `{ field, value }` o un `grid` dentro de una celda.
+
+Ejemplo:
+
+```tsx
+type UserInformationRow = {
+  name: string | undefined;
+  lastName: string | undefined;
+  email: string | undefined;
+};
+
+const columnHelper = createColumnHelper<UserInformationRow>();
+
+const columns = [
+  columnHelper.accessor("name", {
+    header: "Nombre",
+    cell: (cell) => cell.getValue() ?? "-",
+  }),
+  columnHelper.accessor("lastName", {
+    header: "Apellido",
+    cell: (cell) => cell.getValue() ?? "-",
+  }),
+  columnHelper.accessor("email", {
+    header: "Email",
+    cell: (cell) => cell.getValue() ?? "-",
+  }),
+];
+
+<TableWrapper>
+  <TableWrapperHeader>
+    <TableWrapperTitle>Informacion del usuario</TableWrapperTitle>
+    <span>{user.email}</span>
+    <div>Datos personales</div>
+  </TableWrapperHeader>
+  <MyTable columns={columns} data={[user]} variant="vertical" />
+</TableWrapper>;
+```
+
+## Encapsulacion
+
+- Mover `columns` al componente `Table{EntityPlural}`.
+- Si la tabla consulta datos, mover el hook/servicio al componente de tabla.
+- Si la tabla pagina, mover `pageIndex` y `setPageIndex` al componente de tabla.
+- El padre solo debe pasar entradas externas reales: filtros ya aplicados, ids, callbacks o flags.
+- Al cambiar filtros externos, resetear la pagina dentro del componente de tabla con `useEffect` si aplica.
+
+## Patron base
+
+```tsx
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+import {
+  MyTable,
+  TableWrapper,
+  TableWrapperFooter,
+  TableWrapperHeader,
+  TableWrapperPagination,
+  TableWrapperTitle,
+} from "lkd-web-kit";
+import { useMemo, useState } from "react";
+
+type ItemTableData = {
+  id: string;
+  name: string;
+};
+
+type TableItemsProps = {
+  selectedFilters: Record<string, unknown>;
+};
+
+const columnHelper = createColumnHelper<ItemTableData>();
+
+const TableItems = ({ selectedFilters }: TableItemsProps) => {
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: "Nombre",
+        cell: (cell) => cell.getValue(),
+      }),
+    ],
+    [],
+  );
+
+  return (
+    <TableWrapper>
+      <TableWrapperHeader>
+        <TableWrapperTitle>Items</TableWrapperTitle>
+      </TableWrapperHeader>
+      <MyTable columns={columns} data={[]} />
+      <TableWrapperFooter>
+        <TableWrapperPagination
+          total={1}
+          value={pageIndex + 1}
+          onChange={(page) => setPageIndex(page - 1)}
+        />
+      </TableWrapperFooter>
+    </TableWrapper>
+  );
+};
+
+export default TableItems;
+```
+
+Ejemplo short:
+
+```tsx
+<TableWrapperPagination
+  variant="short"
+  total={pageData?.total.pages ?? 1}
+  value={(pageData?.currentPage.pageIndex ?? 0) + 1}
+  totalRows={pageData?.total.elements}
+  pageSize={pageData?.currentPage.pageSize ?? 10}
+  currentRows={pageData?.currentPage.elements}
+  onChange={(page) => setPageIndex(page - 1)}
+/>;
+```
+
+## Antipatrones
+
+- No dejar columnas o hooks de servicio de la tabla en la vista padre.
+- No crear wrappers nuevos si `TableWrapper` y `MyTable` alcanzan.
+- No usar `Paper` directamente para la tabla cuando el patron pide `TableWrapper`.
+- No usar `MyTablePagination` en codigo nuevo.
+- No usar `paginationVariant` ni `paginationText` en `TableWrapperPagination`; usar `variant` y `text`.
+- No calcular `1-10 de 15 filas` en la vista si `TableWrapperPagination` puede calcularlo.
+- No agregar abstracciones compartidas antes de tener reutilizacion real.
+- No crear `MyTableVertical` si `MyTable variant="vertical"` resuelve el caso.
+- No poner titulos de seccion como "Datos personales" o "Informacion del usuario" como headers de columna.

package/src/distributed-skills/create-table-component/agents/openai.yaml

@@ -0,0 +1,3 @@
+display_name: Create Table Component
+short_description: Create encapsulated project tables with MyTable and TableWrapper.
+default_prompt: Create or refactor a table component using this project's MyTable and TableWrapper pattern.