create-huenei-frontend 0.1.2

package/bin/create-huenei-frontend.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import "../dist/index.js";

package/dist/index.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+import { mkdir, cp, rm } from "fs/promises";
+import path from "path";
+import process from "process";
+import prompts from "prompts";
+import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+const TEMPLATES = {
+    clean: "clean",
+    help: "help",
+};
+// Cross-platform __dirname
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+// Helpers
+function commandExists(cmd) {
+    try {
+        execSync(`${cmd} --version`, { stdio: "ignore" });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function installPnpm() {
+    const platform = process.platform;
+    console.log("📦 Installing pnpm...");
+    if (platform === "win32") {
+        execSync("corepack enable", { stdio: "inherit" });
+        execSync("corepack prepare pnpm@latest --activate", { stdio: "inherit" });
+        return;
+    }
+    execSync("curl -fsSL https://get.pnpm.io/install.sh | sh -", {
+        stdio: "inherit",
+    });
+}
+async function main() {
+    let targetDir = "";
+    try {
+        const response = await prompts([
+            {
+                type: "text",
+                name: "projectName",
+                message: "Project name",
+                initial: "huenei-frontend",
+            },
+            {
+                type: "select",
+                name: "variant",
+                message: "Select template version",
+                choices: [
+                    { title: "help-version", value: "help" },
+                    { title: "clean-version", value: "clean" },
+                ],
+            },
+            {
+                type: "confirm",
+                name: "checkPnpm",
+                message: "Check / install pnpm?",
+                initial: true,
+            },
+            {
+                type: "confirm",
+                name: "installDeps",
+                message: "Install dependencies now?",
+                initial: true,
+            },
+        ], {
+            onCancel: async () => {
+                console.log("\n⚠️  Cancelled by user");
+                if (targetDir)
+                    await rm(targetDir, { recursive: true, force: true });
+                process.exit(1);
+            },
+        });
+        const { projectName, variant, checkPnpm, installDeps } = response;
+        if (!projectName || !variant)
+            throw new Error("Invalid input");
+        if (checkPnpm && !commandExists("pnpm"))
+            installPnpm();
+        targetDir = path.resolve(process.cwd(), projectName);
+        await mkdir(targetDir, { recursive: true });
+        const templateDir = path.resolve(__dirname, "../templates", TEMPLATES[variant]);
+        await cp(templateDir, targetDir, { recursive: true });
+        if (installDeps) {
+            console.log("📦 Installing dependencies...");
+            execSync("pnpm install", { cwd: targetDir, stdio: "inherit" });
+        }
+        console.log("\n✔ Project ready");
+        console.log(`👉 cd ${projectName}`);
+        console.log("👉 pnpm dev");
+    }
+    catch (err) {
+        console.error(`\n❌ Error: ${err.message || err}`);
+        if (targetDir)
+            await rm(targetDir, { recursive: true, force: true });
+        process.exit(1);
+    }
+}
+main();

package/dist/templates/clean/.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/clean/.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/clean/.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/clean/.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/clean/.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

package/dist/templates/clean/.cursor/skills/tooling-and-scripts/SKILL.md

@@ -0,0 +1,24 @@
+---
+description: Tooling, scripts and configuration
+alwaysApply: true
+---
+
+# Tooling y Configuración
+
+## Scripts
+
+- pnpm dev → desarrollo
+- pnpm build → producción
+- pnpm test → tests
+
+## Archivos importantes
+
+- vite.config.ts
+- tsconfig.json
+- components.json
+- src/router.tsx
+
+## Imports
+
+- Usar alias @/
+- Evitar imports relativos profundos

package/dist/templates/clean/.cursor/skills/ui-and-styling/SKILL.md

@@ -0,0 +1,32 @@
+---
+description: UI, layout and Tailwind rules
+alwaysApply: true
+---
+
+# UI y Estilos
+
+## Principios
+
+- Tailwind CSS v4 obligatorio
+- No usar estilos inline
+- No inventar diseño
+- Utilizar DaisyUI para los themes
+- Utiliza el @plugin "daisyui/theme" en el index.css para estandarizar colores que se repitan
+
+## Fuente de verdad
+
+- Figma define layout, spacing y jerarquía
+- El código debe replicar Figma exactamente
+
+## Layout
+
+- Usar flex o grid según diseño
+- Priorizar gap sobre margin
+- Evitar hacks con position absolute
+- Mobile-first
+
+## Tipografía y colores
+
+- Usar tokens definidos
+- No hardcodear valores arbitrarios
+- Mantener jerarquía tipográfica clara

package/dist/templates/clean/.cursor/skills/vibe-and-ia/SKILL.md

@@ -0,0 +1,23 @@
+---
+description: AI behavior and vibe rules
+alwaysApply: true
+---
+
+# Rol de la IA
+
+## Comportamiento
+
+- Cursor actúa como asistente técnico
+- No actúa como diseñador
+- No inventa UX, layout ni flujos
+
+## Generación de código
+
+- Código claro, simple y legible
+- Respetar estructura existente
+- No sobre-optimizar
+- Mantener consistencia
+
+## Regla final
+
+Si algo no está en Figma o en estas reglas, no asumirlo

package/dist/templates/clean/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

package/dist/templates/clean/.tanstack/tmp/c28007bb-2319511cf318e28129c8d8eb723db5fd

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/auth/registro')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/auth/registro"!</div>
+}

package/dist/templates/clean/.tanstack/tmp/c28007bb-bcef89e9e4593777e1c15ec4b4f32eea

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashbord')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/dashbord"!</div>
+}

package/dist/templates/clean/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

package/dist/templates/clean/README.md

@@ -0,0 +1,75 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/templates/clean/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/dist/templates/clean/eslint.config.js

@@ -0,0 +1,31 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import prettier from "eslint-config-prettier";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist", "node_modules"]),
+
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: globals.browser,
+    },
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      prettier,
+    ],
+    rules: {
+      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+      "@typescript-eslint/no-explicit-any": "error",
+    },
+  },
+]);

package/dist/templates/clean/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="huenei">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend-template</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/dist/templates/clean/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "frontend-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.90.16",
+    "@tanstack/react-router": "^1.149.3",
+    "@tanstack/react-router-devtools": "^1.149.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.0",
+    "react-toastify": "^11.0.5",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tanstack/react-query-devtools": "^5.91.2",
+    "@tanstack/router-plugin": "^1.149.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/ui": "^4.0.17",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "daisyui": "^5.5.14",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "jsdom": "^27.4.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vitest": "^4.0.17"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}