update-base-config 0.1.0

package/templates/skills/tailwind/docs/SKILL_TAILWIND_QUICK_START.md

@@ -0,0 +1,426 @@
+# 🎨 Tailwind Custom - Inicio Rápido (5 minutos)
+
+## ⚡ TL;DR (Lo más importante)
+
+**Este proyecto usa Tailwind con presets personalizados (`tw-blue`).**
+
+❌ **NUNCA hagas esto:**
+
+```vue
+<div class="bg-blue-600 text-blue-500">Error</div>
+```
+
+✅ **SIEMPRE haz esto:**
+
+```vue
+<div class="bg-brand text-primary">Correcto</div>
+```
+
+---
+
+## 🎯 3 Reglas de Oro
+
+### Regla 1: Usa Colores del Preset (NO colores con números)
+
+**⚠️ ADVERTENCIA CRÍTICA: NO uses colores con números**
+
+❌ **Estos colores NO existen:**
+
+- `gray-50`, `gray-100`, `gray-200`, ... `gray-900`
+- `blue-100`, `blue-500`, `blue-600`, ... `blue-900`
+- `red-500`, `green-600`, `yellow-400`, etc.
+
+**Disponibles en el preset:**
+
+#### Azul Corporativo (Brand)
+
+- `brand-dark` ← **Usar para fondos oscuros** (en lugar de gray-900)
+- `brand` ← Azul principal
+- `brand-light` ← Azul claro
+- `brand-lighter` ← Azul muy claro
+- `brand-background` ← Fondo claro
+- `brand-transparent` ← Con transparencia
+
+#### Azul Primario (Primary)
+
+- `primary-dark`, `primary`, `primary-light`, `primary-lighter`
+- `primary-background`, `primary-transparent`
+
+#### Grises (Gray)
+
+- `gray-dark` ← **Usar para textos oscuros** (en lugar de gray-800/900)
+- `gray` ← Gris medio
+- `gray-light` ← Gris claro
+- `gray-lighter` ← **Usar para bordes** (en lugar de gray-300)
+- `gray-background` ← **Usar para fondos** (en lugar de gray-100)
+- `gray-transparent` ← Con transparencia
+
+#### Estados
+
+- Success: `success-dark`, `success`, `success-light`, `success-lighter`, `success-background`
+- Warning: `warning-dark`, `warning`, `warning-light`, `warning-lighter`, `warning-background`
+- Error: `error-dark`, `error`, `error-light`, `error-lighter`, `error-background`
+
+#### Otros
+
+- `white`, `black`, `transparent`
+- `backup-yellow`
+
+**Ejemplos correctos:**
+
+```vue
+<!-- Logo con fondo oscuro -->
+<div class="bg-brand-dark text-white">✅ Correcto</div>
+<div class="bg-gray-900 text-white">❌ ERROR - gray-900 no existe</div>
+
+<!-- Texto oscuro -->
+<p class="text-gray-dark">✅ Correcto</p>
+<p class="text-gray-800">❌ ERROR - gray-800 no existe</p>
+
+<!-- Borde claro -->
+<div class="border border-gray-lighter">✅ Correcto</div>
+<div class="border border-gray-300">❌ ERROR - gray-300 no existe</div>
+```
+
+### Regla 2: Gradientes = Combina Colores Preset
+
+```vue
+<!-- Correcto -->
+<h1 class="bg-gradient-to-r from-brand-light to-primary">Título</h1>
+
+<!-- Incorrecto -->
+<h1 class="bg-gradient-to-r from-blue-400 to-blue-600">Título</h1>
+```
+
+### Regla 3: Valores Arbitrarios Solo Para Tamaños/Espacios
+
+```vue
+<!-- Correcto - tamaño específico -->
+<div class="py-[14px] px-7 rounded-bl-[44px]">Contenido</div>
+
+<!-- Incorrecto - color arbitrario que existe en preset -->
+<div class="bg-[#0080FF]">No hagas esto</div>
+```
+
+### Regla 4: Espaciado Solo 1-7 (NO usar p-8, m-10, etc.)
+
+```vue
+<!-- Correcto -->
+<div class="p-5 m-3 gap-6">Padding 24px, margin 12px, gap 32px</div>
+
+<!-- Incorrecto - valores NO existen en preset -->
+<div class="p-8 m-10">❌ Estos valores no existen</div>
+
+<!-- Correcto - si necesitas más de 40px -->
+<div class="p-[48px] m-[80px]">Usa valores arbitrarios</div>
+```
+
+### Regla 5: Tipografía con Escala 1-8
+
+```vue
+<!-- Correcto -->
+<h1 class="text-7 font-bold">Título grande (32px)</h1>
+<p class="text-3">Párrafo (16px = text-base)</p>
+
+<!-- También correcto (aliases) -->
+<h1 class="text-3xl font-bold">Equivalente a text-7</h1>
+```
+
+---
+
+## 📚 Colores Disponibles (Memoriza Estos)
+
+| Uso               | Clase Tailwind     | Ejemplo                          |
+| ----------------- | ------------------ | -------------------------------- |
+| Fondo principal   | `bg-brand`         | `<div class="bg-brand">`         |
+| Fondo claro       | `bg-brand-light`   | `<div class="bg-brand-light">`   |
+| Fondo oscuro      | `bg-brand-dark`    | `<div class="bg-brand-dark">`    |
+| Fondo muy claro   | `bg-brand-lighter` | `<div class="bg-brand-lighter">` |
+| Color principal   | `text-brand`       | `<p class="text-brand">`         |
+| Gradiente origen  | `from-brand-light` | `<div class="from-brand-light">` |
+| Gradiente destino | `to-primary`       | `<div class="to-primary">`       |
+| Borde             | `border-brand`     | `<div class="border-brand">`     |
+| Con opacidad      | `bg-brand/80`      | `<div class="bg-brand/80">`      |
+
+---
+
+## 📏 Otras Variables del Preset (Referencia Rápida)
+
+### Tipografía
+
+| Clase         | Tamaño | Uso             |
+| ------------- | ------ | --------------- |
+| `text-1/xs`   | 12px   | Muy pequeño     |
+| `text-2/sm`   | 14px   | Pequeño         |
+| `text-3/base` | 16px   | Base (párrafos) |
+| `text-4/lg`   | 20px   | Subtítulos      |
+| `text-5/xl`   | 24px   | Títulos H3      |
+| `text-6/2xl`  | 26px   | Títulos H2      |
+| `text-7/3xl`  | 32px   | Títulos H1      |
+| `text-8/4xl`  | 40px   | Héroes          |
+
+### Espaciado (Escala Customizada)
+
+| Clase | Valor | Uso                   |
+| ----- | ----- | --------------------- |
+| `1`   | 4px   | `p-1`, `m-1`, `gap-1` |
+| `2`   | 8px   | `p-2`, `m-2`, `gap-2` |
+| `3`   | 12px  | `p-3`, `m-3`, `gap-3` |
+| `4`   | 16px  | `p-4`, `m-4`, `gap-4` |
+| `5`   | 24px  | `p-5`, `m-5`, `gap-5` |
+| `6`   | 32px  | `p-6`, `m-6`, `gap-6` |
+| `7`   | 40px  | `p-7`, `m-7`, `gap-7` |
+
+**⚠️ Importante**: NO existen `p-8`, `m-10`, `gap-12`, etc. Si necesitas más de 40px, usa arbitrarios: `p-[48px]`
+
+### Breakpoints
+
+| Clase  | Tamaño |
+| ------ | ------ |
+| `sm:`  | 640px  |
+| `md:`  | 768px  |
+| `lg:`  | 1024px |
+| `xl:`  | 1280px |
+| `2xl:` | 1536px |
+
+### Bordes
+
+| Clase          | Valor  |
+| -------------- | ------ |
+| `rounded-1/sm` | 4px    |
+| `rounded-2/md` | 8px    |
+| `rounded-3/lg` | 16px   |
+| `rounded-full` | 9999px |
+| `border`       | 1px    |
+| `border-2`     | 2px    |
+
+### Sombras y Animaciones
+
+| Clase             | Uso                     |
+| ----------------- | ----------------------- |
+| `shadow-md`       | Sombra media para cards |
+| `shadow-controls` | Sombra para botones     |
+| `animate-fadeIn`  | Entrada gradual         |
+| `animate-pulse`   | Pulsación skeleton      |
+| `animate-spin`    | Spinner de carga        |
+
+---
+
+## ✅ Ejemplos Rápidos
+
+### Header/Hero
+
+```vue
+<h1 class="text-transparent bg-clip-text bg-gradient-to-r from-brand-light to-primary">
+  Título Principal
+</h1>
+```
+
+### Botón
+
+```vue
+<button class="bg-primary text-white hover:bg-primary-light px-4 py-2">
+  Enviar
+</button>
+```
+
+### Card
+
+```vue
+<div class="bg-white border-2 border-brand-light rounded-lg p-6">
+  <h3 class="text-brand-dark">Título</h3>
+  <p>Contenido</p>
+</div>
+```
+
+### Gradiente Complejo
+
+```vue
+<div class="bg-gradient-to-tl from-brand-dark via-brand to-brand/80 p-6 rounded-lg">
+  Contenido destacado
+</div>
+```
+
+---
+
+## 🚫 Errores Comunes
+
+| ❌ Incorrecto               | ✅ Correcto                   | Razón                                        |
+| --------------------------- | ----------------------------- | -------------------------------------------- |
+| `bg-blue-600`               | `bg-brand`                    | Usa color preset                             |
+| `text-gray-700`             | `text-brand-dark`             | Usa color preset                             |
+| `border-blue-400`           | `border-brand-light`          | Usa color preset                             |
+| `from-blue-500 to-blue-700` | `from-brand-light to-primary` | Gradiente del preset                         |
+| `bg-[#0080FF]`              | `bg-brand`                    | NO uses arbitrarios para colores que existen |
+| `p-8`, `m-10`, `gap-12`     | `p-[48px]`, `m-[80px]`        | Espaciado solo va de 1-7                     |
+| `text-5xl`, `text-9xl`      | `text-[48px]`, `text-[72px]`  | Tipografía solo va hasta text-8 (40px)       |
+| `duration-400`              | `duration-[400ms]`            | Usa duraciones disponibles o arbitrarios     |
+| `rounded-4xl`               | `rounded-[24px]`              | Border radius solo hasta rounded-3 (16px)    |
+
+---
+
+## 📖 ¿Más Información?
+
+- **Guía Completa**: [SKILL_TAILWIND_CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md)
+- **Para Copilot**: [SKILL_TAILWIND_COPILOT_PROMPT.md](./SKILL_TAILWIND_COPILOT_PROMPT.md)
+- **Ejemplos**: [SKILL_TAILWIND_BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)
+
+---
+
+## 🎓 Paso a Paso: Crear un Componente
+
+### Paso 1: Identifica qué necesitas
+
+```vue
+<template>
+	<!-- Necesito un card con:
+       - Fondo blanco
+       - Borde azul
+       - Título en azul oscuro
+       - Botón azul
+  -->
+</template>
+```
+
+### Paso 2: Mapea a colores del preset
+
+```
+Fondo blanco → bg-white (no está en preset, es estándar)
+Borde azul → border-brand ✓
+Título azul oscuro → text-brand-dark ✓
+Botón azul → bg-primary ✓
+```
+
+### Paso 3: Escribe el código
+
+```vue
+<template>
+	<div class="bg-white border-2 border-brand rounded-lg p-6">
+		<h3 class="text-brand-dark font-bold">Mi Título</h3>
+		<p class="text-gray-600 mt-2">Descripción</p>
+		<button class="bg-primary text-white mt-4 px-4 py-2 rounded hover:bg-primary-light">Acción</button>
+	</div>
+</template>
+```
+
+---
+
+## ❓ Preguntas Frecuentes
+
+### P: ¿Qué hago si necesito un color que NO está en el preset?
+
+**R:** Usa un **valor arbitrario**:
+
+```vue
+<div class="bg-[#FF5733] text-[#333333]">
+  Color custom específico
+</div>
+```
+
+Pero primero verifica si existe en el preset:
+
+- `brand`, `brand-light`, `brand-dark`, `brand-lighter`
+- `primary`, `primary-light`
+- `secondary`, `accent`
+
+### P: ¿Puedo agregar nuevos colores al preset?
+
+**R:** Sí, pero primero intenta con arbitrarios. Si lo necesitas permanentemente, pide a un tech lead que lo agregue a `tailwind.config.js`.
+
+### P: ¿Los valores arbitrarios se compilan?
+
+**R:** Sí. Tailwind genera dinámicamente el CSS. Algunos valores comunes ya están en `safelist` para garantizar su inclusión.
+
+### P: ¿Cuál es la diferencia entre `brand` y `primary`?
+
+**R:** Son colores diferentes en el preset:
+
+- `brand` = Azul corporativo del Banco (más oscuro)
+- `primary` = Variante para acciones/botones (más claro)
+
+### P: ¿Qué pasa si Copilot me sugiere `bg-blue-500`?
+
+**R:** Responde:
+
+> Este proyecto usa Tailwind con presets. Usa `bg-brand` o variantes (brand-light, brand-dark).
+
+---
+
+## 🔄 Conversión Rápida
+
+Si ves código incorrecto:
+
+1. **Identifica** color genérico: `blue-X`, `gray-X`, etc
+2. **Reemplaza**:
+    - `*-100/200` → `*-light`
+    - `*-700/900` → `*-dark`
+    - `blue-*` → `brand` o `primary`
+3. **Verifica** gradientes usen preset
+4. **Agrega** arbitrarios SOLO si no existen en preset
+
+---
+
+## ✨ Checklist Antes de Terminar
+
+- [ ] ¿Usé colores del preset (brand, primary)?
+- [ ] ¿Los gradientes combinan colores del preset?
+- [ ] ¿Si necesité un color custom, usé `[#hexcode]`?
+- [ ] ¿Reviré contra ejemplos en [SKILL_TAILWIND_BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)?
+- [ ] ¿La maqueta coincide con design system del Banco?
+
+---
+
+## 🚀 Siguiente Nivel
+
+Cuando estés cómodo:
+
+1. Lee [SKILL_TAILWIND_CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md) completo
+2. Revisa [SKILL_TAILWIND_BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md) para verpatrones
+3. Usa [SKILL_TAILWIND_COPILOT_PROMPT.md](./SKILL_TAILWIND_COPILOT_PROMPT.md) cuando pidas a Copilot
+
+---
+
+## 💡 Pro Tips
+
+### Tip 1: Memoriza los Colores
+
+Repite 3 veces:
+
+> "brand, brand-light, brand-dark, primary, primary-light"
+
+### Tip 2: Usa Ejemplos Reales
+
+Busca código similar en:
+
+- `src/pages/Charlas/Charlas.vue`
+- `src/pages/ValeVista/sections/BeneficiosSlider.vue`
+
+### Tip 3: Copia & Adapta
+
+1. Encuentra componente similar
+2. Copia su estructura de colores
+3. Adapta a tu caso
+
+### Tip 4: Opacidad es tu Amiga
+
+```vue
+<!-- Necesitas un color más claro? -->
+<div class="bg-brand/50">Más claro</div>
+<div class="bg-brand/75">Medio</div>
+<div class="bg-brand/90">Oscuro</div>
+```
+
+---
+
+## 📞 Ayuda
+
+Si tienes dudas:
+
+1. **Colores disponibles**: [SKILL_TAILWIND_CUSTOM.md#-colores-disponibles-tw-blue](./SKILL_TAILWIND_CUSTOM.md)
+2. **Ejemplos**: [SKILL_TAILWIND_BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)
+3. **Para Copilot**: [SKILL_TAILWIND_COPILOT_PROMPT.md](./SKILL_TAILWIND_COPILOT_PROMPT.md)
+4. **Todo**: [SKILL_TAILWIND_CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md)
+
+---
+
+**¡Listo! Ahora puedes crear maquetas correctas con Tailwind custom. 🎉**