create-huenei-frontend 0.1.2

package/dist/templates/clean/src/routes/otra-ruta.tsx

@@ -0,0 +1,319 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Route as RouteIcon,
+  FileText,
+  Code,
+  ArrowRight,
+  FolderTree,
+  Navigation,
+  Zap,
+  Shield,
+} from "lucide-react";
+
+export const Route = createFileRoute("/otra-ruta")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="text-center mb-16">
+        <div className="flex items-center justify-center mb-6">
+          <div className="w-16 h-16 bg-primary/10 rounded-lg flex items-center justify-center">
+            <RouteIcon className="w-8 h-8 text-primary" />
+          </div>
+        </div>
+        <h1 className="text-5xl font-bold text-base-content mb-6">TanStack Router</h1>
+        <p className="text-xl text-base-content/70 max-w-3xl mx-auto mb-6">
+          Enrutamiento type-safe y file-based para aplicaciones React modernas (2026)
+        </p>
+        <div className="flex flex-wrap justify-center gap-2">
+          <Badge variant="outline">Type-Safe</Badge>
+          <Badge variant="outline">File-Based Routing</Badge>
+          <Badge variant="outline">Auto Preloading</Badge>
+          <Badge variant="outline">Code Splitting</Badge>
+        </div>
+      </div>
+
+      {/* Conceptos Principales */}
+      <div className="grid md:grid-cols-2 gap-6 mb-16">
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+              <FolderTree className="w-6 h-6 text-primary" />
+            </div>
+            <CardTitle>File-Based Routing</CardTitle>
+            <CardDescription>
+              La estructura de archivos en <code className="text-xs">src/routes</code> define
+              automáticamente las rutas de tu aplicación
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3 text-sm">
+              <div className="bg-base-200 rounded-lg p-3 font-mono">
+                <div className="text-info">src/routes/</div>
+                <div className="ml-4 text-info">index.tsx</div>
+                <div className="ml-4 text-info">otra-ruta.tsx</div>
+                <div className="ml-4 text-info">proyectos.$id.tsx</div>
+              </div>
+              <p className="text-base-content/70">
+                Cada archivo se convierte en una ruta. El nombre del archivo determina la URL.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
+              <Shield className="w-6 h-6 text-accent" />
+            </div>
+            <CardTitle>Type Safety</CardTitle>
+            <CardDescription>
+              TypeScript garantiza que todas las rutas y parámetros sean correctos en tiempo de
+              compilación
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3 text-sm">
+              <div className="bg-base-200 rounded-lg p-3 font-mono text-xs">
+                <div className="text-warning">// Type-safe navigation</div>
+                <div className="text-base-content">
+                  &lt;Link to="/otra-ruta"&gt;...&lt;/Link&gt;
+                </div>
+                <div className="text-error mt-2">// Error: ruta no existe</div>
+                <div className="text-base-content">
+                  &lt;Link to="/ruta-inexistente"&gt;...&lt;/Link&gt;
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Estructura de Rutas */}
+      <Card className="mb-16">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FileText className="w-5 h-5" />
+            Estructura de Rutas
+          </CardTitle>
+          <CardDescription>Cómo se mapean los archivos a URLs en TanStack Router</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            <div className="border-l-4 border-primary pl-4">
+              <h3 className="font-semibold mb-2">Ruta Básica</h3>
+              <div className="bg-base-200 rounded-lg p-4 font-mono text-sm mb-2">
+                <div className="text-base-content">src/routes/index.tsx</div>
+                <div className="text-info mt-2">→ URL: /</div>
+              </div>
+              <p className="text-sm text-base-content/70">
+                El archivo <code>index.tsx</code> representa la ruta raíz de su directorio.
+              </p>
+            </div>
+
+            <div className="border-l-4 border-accent pl-4">
+              <h3 className="font-semibold mb-2">Ruta Estática</h3>
+              <div className="bg-base-200 rounded-lg p-4 font-mono text-sm mb-2">
+                <div className="text-base-content">src/routes/otra-ruta.tsx</div>
+                <div className="text-info mt-2">→ URL: /otra-ruta</div>
+              </div>
+              <p className="text-sm text-base-content/70">
+                El nombre del archivo (sin extensión) se convierte directamente en la ruta.
+              </p>
+            </div>
+
+            <div className="border-l-4 border-info pl-4">
+              <h3 className="font-semibold mb-2">Ruta Dinámica</h3>
+              <div className="bg-base-200 rounded-lg p-4 font-mono text-sm mb-2">
+                <div className="text-base-content">src/routes/proyectos.$proyectoId.tsx</div>
+                <div className="text-info mt-2">→ URL: /proyectos/:proyectoId</div>
+              </div>
+              <p className="text-sm text-base-content/70">
+                El prefijo <code>$</code> indica un parámetro dinámico. Accede con{" "}
+                <code>Route.useParams()</code>.
+              </p>
+            </div>
+
+            <div className="border-l-4 border-warning pl-4">
+              <h3 className="font-semibold mb-2">Rutas Anidadas</h3>
+              <div className="bg-base-200 rounded-lg p-4 font-mono text-sm mb-2">
+                <div className="text-base-content">src/routes/auth/iniciar-sesion.tsx</div>
+                <div className="text-info mt-2">→ URL: /auth/iniciar-sesion</div>
+              </div>
+              <p className="text-sm text-base-content/70">
+                Las carpetas crean rutas anidadas automáticamente.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Ejemplo de Código */}
+      <Card className="mb-16">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Code className="w-5 h-5" />
+            Ejemplo de Implementación
+          </CardTitle>
+          <CardDescription>Cómo crear una nueva ruta en TanStack Router</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div>
+              <h3 className="font-semibold mb-2 text-sm">1. Crear el archivo de ruta</h3>
+              <div className="bg-base-200 rounded-lg p-4 font-mono text-xs overflow-x-auto">
+                <div className="text-warning">// src/routes/mi-ruta.tsx</div>
+                <div className="text-base-content mt-2">
+                  <div className="text-info">import</div> {"{"} createFileRoute {"}"}{" "}
+                  <div className="text-info">from</div>{" "}
+                  <div className="text-info">"@tanstack/react-router"</div>;
+                </div>
+                <div className="mt-2">
+                  <div className="text-info">export const</div> Route = createFileRoute(
+                  <div className="text-info">"/mi-ruta"</div>)({"{"}
+                </div>
+                <div className="ml-4">component: MiComponente,</div>
+                <div>{"});"}</div>
+                <div className="mt-2">
+                  <div className="text-info">function</div> MiComponente() {"{"}
+                </div>
+                <div className="ml-4 text-info">return</div> (
+                <div className="ml-8">&lt;div&gt;Mi Ruta&lt;/div&gt;</div>
+                <div className="ml-4">);</div>
+                <div>{"}"}</div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="font-semibold mb-2 text-sm">2. Navegar a la ruta</h3>
+              <div className="bg-base-200 rounded-lg p-4 font-mono text-xs overflow-x-auto">
+                <div className="text-info">import</div> {"{"} Link {"}"}{" "}
+                <div className="text-info">from</div>{" "}
+                <div className="text-info">"@tanstack/react-router"</div>;
+                <div className="mt-2">
+                  &lt;Link to=<div className="text-info">"/mi-ruta"</div>&gt;
+                </div>
+                <div className="ml-4">Ir a Mi Ruta</div>
+                <div>&lt;/Link&gt;</div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Características Principales */}
+      <div className="grid md:grid-cols-3 gap-6 mb-16">
+        <Card>
+          <CardHeader>
+            <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-3">
+              <Zap className="w-5 h-5 text-primary" />
+            </div>
+            <CardTitle className="text-lg">Preloading Inteligente</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-base-content/70">
+              Las rutas se precargan automáticamente cuando el usuario hace hover sobre los links,
+              mejorando la experiencia de navegación.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <div className="w-10 h-10 bg-accent/10 rounded-lg flex items-center justify-center mb-3">
+              <Navigation className="w-5 h-5 text-accent" />
+            </div>
+            <CardTitle className="text-lg">Navegación Type-Safe</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-base-content/70">
+              TypeScript valida todas las rutas en tiempo de compilación, eliminando errores de
+              rutas incorrectas.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <div className="w-10 h-10 bg-info/10 rounded-lg flex items-center justify-center mb-3">
+              <FileText className="w-5 h-5 text-info" />
+            </div>
+            <CardTitle className="text-lg">Code Splitting</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-base-content/70">
+              Cada ruta se carga de forma lazy automáticamente, optimizando el bundle inicial de la
+              aplicación.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Mejores Prácticas */}
+      <Card className="mb-16">
+        <CardHeader>
+          <CardTitle>Mejores Prácticas</CardTitle>
+          <CardDescription>Recomendaciones para trabajar con TanStack Router</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex gap-3">
+              <ArrowRight className="w-5 h-5 text-primary mt-0.5 shrink-0" />
+              <div>
+                <p className="font-semibold">Usar exclusivamente file-based routing</p>
+                <p className="text-sm text-base-content/70">
+                  No definas rutas manualmente. Deja que TanStack Router las genere desde la
+                  estructura de archivos.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <ArrowRight className="w-5 h-5 text-primary mt-0.5 shrink-0" />
+              <div>
+                <p className="font-semibold">Usar Link para navegación</p>
+                <p className="text-sm text-base-content/70">
+                  Prefiere el componente <code>Link</code> sobre <code>useNavigate</code> para
+                  mantener la type safety.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <ArrowRight className="w-5 h-5 text-primary mt-0.5 shrink-0" />
+              <div>
+                <p className="font-semibold">La URL es la fuente de verdad</p>
+                <p className="text-sm text-base-content/70">
+                  No uses <code>useEffect</code> para sincronizar URL o params. TanStack Router lo
+                  maneja automáticamente.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <ArrowRight className="w-5 h-5 text-primary mt-0.5 shrink-0" />
+              <div>
+                <p className="font-semibold">Loaders y Actions solo para datos</p>
+                <p className="text-sm text-base-content/70">
+                  Usa loaders para cargar datos antes de renderizar y actions para mutaciones.
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Navegación */}
+      <div className="text-center">
+        <Link
+          to="/"
+          className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
+        >
+          <ArrowRight className="w-4 h-4 rotate-180" />
+          Volver al inicio
+        </Link>
+      </div>
+    </div>
+  );
+}

package/dist/templates/clean/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/dist/templates/clean/tsconfig.app.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/dist/templates/clean/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/dist/templates/clean/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/templates/clean/vite.config.ts

@@ -0,0 +1,22 @@
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+
+export default defineConfig({
+  plugins: [
+    TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
+    react({
+      babel: {
+        plugins: [["babel-plugin-react-compiler"]],
+      },
+    }),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/dist/templates/clean/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./src/test/setup.ts"],
+  },
+});

package/dist/templates/help/.cursor/skills/architecture/SKILL.md

@@ -0,0 +1,26 @@
+---
+description: Project architecture and structure
+alwaysApply: true
+---
+
+# Arquitectura del proyecto
+
+- React 19 + TypeScript obligatorio.
+- Vite como build tool.
+- pnpm como gestor recomendado.
+
+## Estructura
+
+- `src/routes` → pantallas y navegación (TanStack Router).
+- `src/components` → componentes reutilizables.
+- `src/components/ui` → shadcn/ui sin lógica de negocio.
+- `src/lib` → helpers y utilidades.
+- `src/data` → datos estáticos.
+- `src/assets` → recursos estáticos.
+
+## Reglas
+
+- Pantallas = rutas.
+- Componentes visuales sin lógica.
+- Lógica fuera del layout.
+- No crear estructuras nuevas sin necesidad.

package/dist/templates/help/.cursor/skills/components-shadcn/SKILL.md

@@ -0,0 +1,23 @@
+---
+description: shadcn/ui usage rules
+alwaysApply: true
+---
+
+# Componentes shadcn/ui
+
+## Uso
+
+- Importar desde @/components/ui
+- Usar shadcn como base visual
+
+## Reglas
+
+- No modificar componentes base
+- Extender solo vía composición
+- Componentes UI sin lógica de negocio
+- Mantener consistencia visual
+
+## Instalación de nuevos componentes
+
+- Usar el CLI oficial de shadcn
+- No copiar código manualmente

package/dist/templates/help/.cursor/skills/daisyui/SKILL.md

@@ -0,0 +1,98 @@
+---
+description: DaisyUI semantic colors strictly coupled to shadcn/ui components
+alwaysApply: true
+---
+
+# DaisyUI + shadcn/ui – Reglas obligatorias
+
+## Principio fundamental
+
+DaisyUI **NO define componentes** en este proyecto.  
+DaisyUI **SOLO define tokens semánticos de color y theme**.
+
+Los componentes visuales **siempre** provienen de:
+src/components/ui (shadcn/ui)
+
+---
+
+## Uso de DaisyUI
+
+### Permitido
+
+- Usar **únicamente** clases semánticas de color:
+
+  - bg-primary / text-primary / border-primary
+  - bg-secondary / text-secondary
+  - bg-accent
+  - bg-neutral
+  - bg-base-100 / bg-base-200 / bg-base-300
+  - text-base-content
+
+- Usar DaisyUI para:
+  - theming
+  - color tokens
+  - soporte dark/light vía theme
+
+---
+
+## Prohibiciones absolutas
+
+- No usar componentes DaisyUI:
+  - btn
+  - card
+  - badge
+  - alert
+  - modal
+  - tabs
+- No importar estilos o markup de DaisyUI components.
+- No recrear componentes shadcn usando clases DaisyUI.
+- No usar colores hardcodeados:
+  - bg-blue-\*
+  - text-red-\*
+  - border-green-\*
+- No usar valores hex, rgb, hsl u oklch en clases.
+- No usar clases arbitrarias de color.
+
+---
+
+## Relación con shadcn/ui
+
+- Todo componente visual debe existir en:
+  src/components/ui
+- Si un componente no existe:
+  - primero se crea como shadcn-compatible
+  - luego se le aplican tokens DaisyUI
+- DaisyUI **nunca reemplaza** a shadcn/ui
+
+---
+
+## Integración con Tailwind
+
+- Tailwind se usa para:
+  - layout
+  - spacing
+  - tipografía
+- DaisyUI controla:
+  - colores
+  - contrastes
+  - themes
+- shadcn/ui controla:
+  - estructura
+  - accesibilidad
+  - variantes
+
+---
+
+## Estados
+
+- Usar tokens, no colores:
+  - hover:bg-primary-focus
+  - active:bg-primary-focus
+  - disabled:bg-base-200
+
+---
+
+## Regla final
+
+Si un componente existe en shadcn/ui, **siempre** debe usarse.  
+Si DaisyUI ofrece algo similar, **se ignora**.

package/dist/templates/help/.cursor/skills/routing/SKILL.md

@@ -0,0 +1,32 @@
+---
+description: TanStack Router rules
+alwaysApply: true
+---
+
+# Routing (TanStack Router)
+
+## Principios
+
+- Usar exclusivamente file-based routing
+- Las rutas viven en src/routes
+- La URL es fuente de verdad
+
+## Definición de ruta
+
+- Usar createFileRoute
+- Un componente por archivo
+
+## Rutas dinámicas
+
+- Usar prefijo $ en el nombre del archivo
+- Leer params con Route.useParams()
+
+## Navegación
+
+- Usar Link de @tanstack/react-router
+- No usar useNavigate directamente
+
+## Restricciones
+
+- No usar useEffect para sincronizar URL o params
+- Loaders y actions solo para datos

package/dist/templates/help/.cursor/skills/testing/SKILL.md

@@ -0,0 +1,55 @@
+---
+description: Testing rules with Vitest and React Testing Library
+alwaysApply: true
+---
+
+# Testing
+
+## Stack
+
+- Vitest como test runner
+- React Testing Library para testing de componentes
+- jsdom como entorno de ejecución
+
+## Principios
+
+- Testear comportamiento, no implementación
+- El test debe parecerse al uso real del usuario
+- Priorizar claridad sobre cobertura artificial
+
+## Reglas de React Testing Library
+
+- Usar queries por prioridad:
+  - getByRole
+  - getByLabelText
+  - getByText
+- Evitar:
+  - getByTestId (solo si no hay alternativa)
+  - queries por clases o estructura interna
+
+## Componentes
+
+- Renderizar componentes con render() de RTL
+- No mockear componentes visuales innecesariamente
+- Mockear solo límites externos (API, storage, router)
+
+## Estado y efectos
+
+- No testear estados internos directamente
+- Verificar efectos observables en la UI
+- Esperar cambios async con findBy\* o waitFor
+
+## jsdom
+
+- Asumir entorno de navegador
+- No depender de APIs no soportadas por jsdom sin mocks
+
+## Estructura de tests
+
+- Un describe por unidad testeada
+- Tests pequeños y descriptivos
+- Evitar tests gigantes o acoplados
+
+## Regla final
+
+Un test que no explica qué protege, no sirve