lkd-web-kit 0.10.6 → 0.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "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/lkd-create-modal-component/SKILL.md

@@ -0,0 +1,168 @@
+---
+name: lkd-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/lkd-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 $lkd-create-modal-component to create a modal following this project's modal manager pattern."

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

@@ -0,0 +1,84 @@
+---
+name: lkd-create-nextjs-page
+description: Crear o refactorizar paginas de Next.js App Router manteniendo el directorio app enfocado en routing y delegando la UI a componentes Page en src/components/pages. Usar al crear page.tsx, migrar vistas fuera de app, organizar subcomponentes privados, aplicar providers de pagina o normalizar nombres y 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 y un layout cercanos antes de editar para respetar aliases, providers, carga de datos, traducciones y convenciones locales.
+
+## Regla principal
+
+- Mantener `app` como capa de routing de Next.js.
+- En `app`, dejar `page.tsx`, `layout.tsx` y archivos especiales de Next.js cuando correspondan: `not-found.tsx`, `loading.tsx`, `error.tsx`, `route.ts`, `template.tsx`, `default.tsx` y archivos de metadata.
+- No colocar vistas, subcomponentes, hooks privados, helpers de UI, schemas ni columnas de tabla dentro de `app`.
+- Colocar la UI real de cada ruta en `src/components/pages`.
+- No crear carpetas de features genericas en la raiz de `pages`, como `components`, `widgets` o `recommendations`. Colocar las piezas privadas dentro de la Page dueña o moverlas a componentes compartidos cuando exista reutilizacion real.
+
+## Estructura
+
+Derivar el area desde el route group principal cuando exista. Si termina en `-layout`, quitar ese sufijo; si no hay route group, usar el primer segmento estatico de la ruta. Ignorar locale, route groups y segmentos dinamicos.
+
+```txt
+src/app/(dashboard-layout)/reports/page.tsx
+src/components/pages/dashboard/reports/ReportsPage.tsx
+
+src/app/products/[productId]/page.tsx
+src/components/pages/products/ProductPage.tsx
+```
+
+Para una Page con piezas privadas:
+
+```txt
+src/components/pages/dashboard/reports/ReportsPage/index.tsx
+src/components/pages/dashboard/reports/ReportsPage/ReportFilters.tsx
+src/components/pages/dashboard/reports/ReportsPage/helpers.ts
+```
+
+- Usar archivo plano `{PageName}Page.tsx` si el componente es de una pieza.
+- Usar carpeta `{PageName}Page/index.tsx` si tiene subcomponentes, helpers, schemas o piezas privadas.
+- Usar PascalCase y el sufijo `Page` para todo componente que represente una pagina.
+- Para rutas dinamicas, nombrar la Page por el ultimo concepto estable, no por el nombre del parametro. En rutas anidadas, reflejar los segmentos estaticos que den contexto.
+- Si hay colision o ambiguedad real, anteponer el segmento padre.
+- No usar `index.tsx` como Page principal directamente bajo el area o la ruta.
+- Mover a componentes compartidos solo cuando haya mas de un consumidor real o exista un patron local establecido.
+
+## Providers
+
+Si el proyecto ya define `PageProviders`, envolver cada `page.tsx` con ese componente y pasar solo props soportadas y necesarias.
+
+```tsx
+import PageProviders from "@/app/PageProviders";
+import ReportsPage from "@/components/pages/dashboard/reports/ReportsPage";
+
+export default async function Page() {
+  return (
+    <PageProviders>
+      <ReportsPage />
+    </PageProviders>
+  );
+}
+```
+
+- Adaptar los aliases, import y props al proyecto consumidor. No crear `PageProviders` solo para cumplir este skill.
+- No usar `PageProviders` en un `layout.tsx` compartido por varias pages. Si el layout necesita un provider, importar y aplicar solamente el provider especifico del proyecto.
+- Excepcion: un layout dedicado exclusivamente a una page puede usar `PageProviders` cuando evita duplicar providers o carga de datos de esa unica ruta.
+- Mantener `PageProviders` en `page.tsx` cuando la pagina necesita props propias, como datos de servidor, traducciones, catalogos o precarga de modales.
+- Mantener en `page.tsx` solo responsabilidades de entrypoint: params, metadata, fetch server-side, redirects, `notFound` y providers.
+- No duplicar providers dentro del componente Page salvo que el proyecto lo documente.
+
+## Checklist
+
+- `app` queda sin UI ni logica privada de ruta.
+- `page.tsx` importa un componente desde `src/components/pages`.
+- El componente de pagina termina en `Page` y sus piezas privadas estan dentro de su carpeta `*Page` cuando corresponde.
+- Se usa el provider existente del proyecto en el limite correcto: page por defecto, layout solo si es exclusivo de una unica page.
+- No quedan imports a la ubicacion anterior de vistas.
+- No se usa `any`.
+- Ejecutar una verificacion focalizada para el cambio realizado.

package/src/distributed-skills/lkd-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: "Use $lkd-create-nextjs-page to create or refactor a Next.js App Router page using the clean PageProviders pattern."

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

@@ -0,0 +1,41 @@
+---
+name: lkd-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/lkd-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: "Use $lkd-create-svg-icon to create an SVG icon for this project from the SVG markup and icon name I provide."

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

@@ -0,0 +1,189 @@
+---
+name: lkd-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/lkd-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: "Use $lkd-create-table-component to create or refactor a table component using this project's MyTable and TableWrapper pattern."

package/src/distributed-skills/lkd-layout-mantine-tailwind/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: lkd-layout-mantine-tailwind
+description: Create or refactor React/Next.js UI layout in this project using Mantine Layout components to express visual structure and Tailwind classes for styling, spacing, responsive behavior, columns, and display properties. Use when Codex needs to create or adjust JSX with Container, Center, Flex, Group, Stack, SimpleGrid, Grid, or Paper, especially in Page or UI components that mix Mantine and Tailwind.
+---
+
+# Layout Mantine Tailwind
+
+Usar este skill para maquetar componentes visuales en `aestrenar-web` con Mantine y Tailwind sin mezclar responsabilidades.
+
+## Lectura Obligatoria
+
+1. Leer `docs/lkd-web-kit.md` y `docs/local-components.md` antes de crear componentes nuevos o reemplazar UI existente.
+2. Si se toca una pagina o componente de Next.js, leer la documentacion local relevante en `node_modules/next/dist/docs/`.
+3. Revisar uno o dos componentes cercanos antes de editar para seguir imports, wrappers locales y tono visual.
+
+## Regla Principal
+
+- Usar componentes Layout de Mantine para que el JSX deje claro el tipo de display o contenedor.
+- Usar Tailwind para estilos, medidas, espaciado, columnas, alineacion y responsive.
+- No usar props visuales de Mantine cuando una clase Tailwind resuelve lo mismo.
+
+## Componentes Layout
+
+- `Container`: contenedor de ancho de pagina o seccion.
+- `Paper`: superficie visual cuando ya existe una tarjeta/panel real.
+- `Stack`: layout vertical.
+- `Group`: layout horizontal, grupos de acciones, pills, header row o wrapping.
+- `SimpleGrid`: grillas simples responsive. Definir columnas con Tailwind: `grid-cols-1 sm:grid-cols-2 xl:grid-cols-4`.
+- `Grid`: usar solo si hace falta una capacidad propia de `Grid` que `SimpleGrid` no cubre.
+- `Center`: centrar contenido en ambos ejes cuando ese sea el objetivo del layout.
+- `Flex`: usar solo cuando se requiera cambiar entre `flex-row` y `flex-col` segun responsive, con clases Tailwind.
+
+## Tailwind
+
+Usar clases Tailwind para:
+
+- `m*`, `p*`, `gap-*`, `space-*`.
+- `rounded-*`, `shadow-*`, `border`, colores y fondos.
+- `text-*`, `font-*`, `leading-*`, `tracking-*`.
+- `h-*`, `w-*`, `min-*`, `max-*`.
+- `items-*`, `justify-*`, `flex-wrap`, `grid-cols-*`, `col-span-*`.
+- Breakpoints responsive: `sm:`, `md:`, `lg:`, `xl:`.
+
+No usar props Mantine equivalentes como `m`, `p`, `px`, `py`, `radius`, `shadow`, `w`, `h`, `gap`, `justify`, `align` o `cols` si Tailwind lo expresa claramente.
+
+## Texto y Semantica
+
+- No usar `Text` ni `Title` de Mantine.
+- Usar elementos HTML semanticos (`h1`, `h2`, `p`, `section`, `article`, `footer`, `header`) cuando correspondan.
+- Usar la prop `component` solo para cambiar semantica real: `component="main"`, `component="section"`, `component="article"`, `component="footer"`.
+- Omitir `component` si el resultado seria `div`, porque es el default.
+
+## Patrones
+
+Grilla simple:
+
+```tsx
+<SimpleGrid className="grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+  {items.map((item) => (
+    <Card key={item.id} data={item} />
+  ))}
+</SimpleGrid>
+```
+
+Layout vertical:
+
+```tsx
+<Stack component="section" className="w-full gap-5">
+  <Header />
+  <Content />
+</Stack>
+```
+
+Grupo horizontal:
+
+```tsx
+<Group className="items-start justify-between gap-3">
+  <h2 className="font-bold text-xl">Titulo</h2>
+  <ButtonAE>Accion</ButtonAE>
+</Group>
+```
+
+Responsive row/column:
+
+```tsx
+<Flex className="flex-col gap-2 md:flex-row md:items-center md:justify-between">
+  <Summary />
+  <Actions />
+</Flex>
+```
+
+## Checklist
+
+- El JSX muestra el layout con Mantine, no con `div` anonimos cuando hay `Stack`, `Group`, `SimpleGrid`, `Flex`, `Center`, `Container` o `Paper` aplicable.
+- Las columnas de grilla estan en Tailwind, no en `cols`.
+- No hay `component="div"`.
+- No hay `Text` ni `Title` de Mantine.
+- No se agregaron abstracciones compartidas si el componente es privado de una pagina.
+- Se ejecuto una verificacion focalizada, como `npx biome lint <archivo>`.

package/src/distributed-skills/lkd-layout-mantine-tailwind/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Layout Mantine Tailwind"
+  short_description: "Layout UI with Mantine and Tailwind."
+  default_prompt: "Use $lkd-layout-mantine-tailwind para maquetar componentes React con Mantine Layout y Tailwind."