lkd-web-kit 0.10.7 → 0.10.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",

package/src/distributed-skills/{create-modal-component → lkd-create-modal-component}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: create-modal-component
+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.
 ---
 

package/src/distributed-skills/{create-modal-component → lkd-create-modal-component}/agents/openai.yaml

@@ -1,4 +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."
+  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/{create-svg-icon → lkd-create-svg-icon}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: create-svg-icon
+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.
 ---
 

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/{create-table-component → lkd-create-table-component}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: create-table-component
+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.
 ---
 

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."

package/src/distributed-skills/{rhf-lkd-forms → lkd-rhf-forms}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: rhf-lkd-forms
+name: lkd-rhf-forms
 description: Crear y revisar formularios, filtros, campos controlados, integraciones con React Hook Form, validaciones Zod, reglas superRefine, botones de submit y patrones Form* de lkd-web-kit. Usar cuando Codex trabaje en interfaces de formularios, filtros, wrappers de campos, schemas, valores iniciales, mapeo de payloads, flujos de submit o comportamiento de validación en proyectos que usan React Hook Form, Zod y lkd-web-kit.
 ---
 

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

@@ -1,104 +0,0 @@
----
-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

@@ -1,3 +0,0 @@
-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/agents/openai.yaml

@@ -1,3 +0,0 @@
-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/agents/openai.yaml

@@ -1,3 +0,0 @@
-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.