update-base-config 0.1.0

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

@@ -0,0 +1,295 @@
+# Instrucciones para Copilot - Tailwind Custom (tw-blue & tw-green)
+
+> ⚠️ **IMPORTANTE**: Este archivo contiene instrucciones que el equipo debe proporcionar a Copilot/AI antes de solicitar crear maquetas.
+
+## 🎯 Contexto del Proyecto
+
+Este es un proyecto **Vue 3 + Vite** que usa **Tailwind CSS v3 CON PRESETS PERSONALIZADOS**.
+
+### Stack de Diseño
+
+- **CSS Framework**: Tailwind CSS v3.4
+- **Presets Activos**: `tw-blue` (principal), `tw-green` (secundario)
+- **Colores Corporativos**: Paleta del Banco de Chile (azul + variantes)
+- **Componentes**: @exdbch/components-lib (librería privada interna)
+
+---
+
+## ✅ Colores Disponibles
+
+Estos colores están **definidos en el preset** y deben usarse siempre que sea posible:
+
+```
+PRIMARIOS (tw-blue preset):
+  ├── brand              (Azul principal - #007BC4 aproximado)
+  ├── brand-light        (Azul claro - para gradientes)
+  ├── brand-dark         (Azul oscuro - fondos)
+  ├── brand-lighter      (Azul muy claro)
+  ├── primary            (Variante primaria)
+  ├── primary-light      (Variante clara)
+  ├── secondary          (Secundario)
+  └── accent             (Acentos)
+```
+
+---
+
+## 📝 Instrucciones de Implementación
+
+### Regla #1: Usar Presets, No Tailwind Estándar
+
+```vue
+<!-- ❌ NUNCA hagas esto -->
+<div class="bg-blue-500 text-gray-700 border-blue-300">
+  ❌ Incorrecto - Usa colores genéricos de Tailwind
+</div>
+
+<!-- ✅ SIEMPRE haz esto -->
+<div class="bg-brand text-gray-700 border-brand-light">
+  ✅ Correcto - Usa colores del preset
+</div>
+```
+
+### Regla #2: Gradientes con Colores del Preset
+
+```vue
+<!-- ❌ INCORRECTO -->
+<h1 class="bg-gradient-to-r from-blue-400 to-blue-600">Título</h1>
+
+<!-- ✅ CORRECTO -->
+<h1 class="text-transparent bg-clip-text bg-gradient-to-r from-brand-light to-primary">
+  Título
+</h1>
+
+<!-- ✅ TAMBIÉN CORRECTO -->
+<div class="bg-gradient-to-tl from-brand-dark via-brand to-brand/80">
+  Contenedor
+</div>
+```
+
+### Regla #3: Valores Arbitrarios Solo Cuando NO Existan en Preset
+
+```vue
+<!-- ✅ CORRECTO - Valor arbitrario porque es específico -->
+<div class="py-[14px] px-7 rounded-bl-[44px]">
+  Padding/tamaño específico no en Tailwind estándar
+</div>
+
+<!-- ✅ CORRECTO - Opacidad no disponible -->
+<div class="bg-brand/75">
+  Brand con opacidad específica
+</div>
+
+<!-- ❌ INCORRECTO - Existe en preset -->
+<div class="bg-[#0080FF]">
+  ❌ Usa valores arbitrarios cuando color EXISTE en preset
+</div>
+```
+
+### Regla #4: Breakpoints Responsivos
+
+```vue
+<!-- ✅ CORRECTO -->
+<div class="bg-brand md:bg-brand-light lg:bg-primary">
+  Adapta colores según pantalla
+</div>
+
+<!-- ✅ CORRECTO -->
+<h1 class="text-5 md:text-[64px] lg:text-left">
+  Título responsivo
+</h1>
+```
+
+### Regla #5: Estados Interactivos
+
+```vue
+<!-- ✅ CORRECTO -->
+<button class="bg-brand hover:bg-brand-dark active:bg-primary transition-all">
+  Botón con estados
+</button>
+
+<!-- ✅ CORRECTO -->
+<div class="border-brand focus:border-primary">
+  Input con focus state
+</div>
+```
+
+---
+
+## 🎨 Paleta de Colores - Referencia Visual
+
+```
+tw-blue Preset:
+
+└── BRAND (Azul Corporativo)
+    ├── brand-light      ← Gradientes (origen)
+    ├── brand            ← Fondos primarios
+    ├── brand-dark       ← Fondos oscuros
+    └── brand-lighter    ← Fondos suaves
+
+└── PRIMARY (Variante)
+    ├── primary-light    ← Gradientes claras
+    └── primary          ← Botones, acciones
+```
+
+---
+
+## 📋 Checklist Antes de Generar Código
+
+Antes de crear una maqueta, verifica:
+
+- [ ] ¿Necesito colores? → Usar `brand`, `primary`, etc.
+- [ ] ¿Necesito gradientes? → Usar `from-brand-light to-primary`
+- [ ] ¿Necesito tamaños específicos? → Usar arbitrarios `[tamaño]`
+- [ ] ¿El color existe en preset? → NO usar arbitrarios (ej: NO `bg-[#0080FF]`)
+- [ ] ¿Necesito opacidad? → Usar `color/50`, `color/75`, etc.
+- [ ] ¿Es responsive? → Incluir breakpoints `md:`, `lg:`
+- [ ] ¿Tiene estados? → Incluir `hover:`, `focus:`, `active:`
+
+---
+
+## 🚫 Lo Que NUNCA Debes Hacer
+
+1. **No uses colores estándar de Tailwind**
+
+    - ❌ `bg-blue-500`, `text-gray-700`, `border-red-300`
+    - ✅ `bg-brand`, `text-gray-700`, `border-brand-light`
+
+2. **No uses valores arbitrarios para colores que existen**
+
+    - ❌ `bg-[#0080FF]` (si es azul corporativo, usa `bg-brand`)
+    - ✅ `bg-brand` (usa el color del preset)
+
+3. **No olvides gradientes personalizados**
+
+    - ❌ `from-blue-500 to-blue-700`
+    - ✅ `from-brand-light to-primary`
+
+4. **No uses valores de espaciado fuera de la escala 1-7**
+
+    - ❌ `p-8`, `m-10`, `gap-12`
+    - ✅ `p-7` (40px - máximo) o `p-[48px]` (arbitrario para > 40px)
+
+5. **No uses tamaños de fuente mayores a text-8**
+
+    - ❌ `text-5xl`, `text-9xl`
+    - ✅ `text-8` (40px - máximo) o `text-[48px]` (arbitrario)
+
+6. **No ignores breakpoints customizados**
+
+    - ❌ Usar solo `bg-brand` en desktop
+    - ✅ `bg-brand md:bg-brand-light lg:bg-primary`
+    - **Nota**: md = 768px (NO 770px de Modyo 8)
+
+7. **No uses nombres genéricos para colores**
+
+    - ❌ "azul", "gris", "rojo"
+    - ✅ "brand", "primary", "brand-dark"
+
+8. **No olvides que las duraciones customizadas son limitadas**
+    - ❌ `duration-400` (no existe tal cual)
+    - ✅ `duration-300`, `duration-500` o `duration-[400ms]` (arbitrario)
+
+---
+
+## 💡 Tips Prácticos
+
+### Cuando No Sepas Qué Color Usar
+
+1. Abre [`tailwind.config.js`](./tailwind.config.js)
+2. Ve la sección `presets: [twBlue]`
+3. Usa colores disponibles: `brand`, `primary`, etc.
+4. O consulta ejemplos reales en:
+    - [`src/pages/Charlas/Charlas.vue`](./src/pages/Charlas/Charlas.vue)
+    - [`src/pages/ValeVista/sections/BeneficiosSlider.vue`](./src/pages/ValeVista/sections/BeneficiosSlider.vue)
+
+### Cuando Necesites Un Color Específico
+
+```javascript
+// Paso 1: ¿Existe en preset?
+brand, brand-light, brand-dark, primary, primary-light, secondary, accent, gray, success, warning, error
+
+// Paso 2: Si NO existe
+Usa valor arbitrario: bg-[#FF5733] o text-[#333333]
+
+// Paso 3: Si es frecuente
+Propón agregar al preset en tailwind.config.js
+```
+
+### Cuando Necesites Espaciado o Tipografía
+
+```javascript
+// ESPACIADO (solo 1-7 = 4px a 40px)
+// ¿Está entre 4px y 40px?
+p-1 (4px), p-5 (24px), p-7 (40px) ✅
+
+// ¿Necesitas más de 40px?
+p-[48px], m-[80px], gap-[56px] ✅
+
+// TIPOGRAFÍA (solo hasta text-8 = 40px)
+// ¿Está entre 12px y 40px?
+text-1/xs (12px), text-5/xl (24px), text-8/4xl (40px) ✅
+
+// ¿Necesitas más de 40px?
+text-[48px], text-[64px] ✅
+
+// BORDES
+rounded-1/sm (4px), rounded-2/md (8px), rounded-3/lg (16px), rounded-full ✅
+rounded-[24px], rounded-bl-[44px] (arbitrarios específicos) ✅
+
+// TRANSICIONES
+duration-300, duration-1000 (disponibles) ✅
+duration-[400ms] (arbitrario si no existe) ✅
+```
+
+### Para Gradientes Especiales
+
+```vue
+<!-- Combinaciones comunes del proyecto -->
+<div class="bg-gradient-to-r from-brand-light to-primary">
+  Horizontal classic
+</div>
+
+<div class="bg-gradient-to-t from-primary to-primary-light">
+  Vertical suave
+</div>
+
+<div class="bg-gradient-to-tl from-brand-dark via-brand to-brand/80">
+  Diagonal con 3 pasos
+</div>
+```
+
+---
+
+## 📞 Validación Rápida
+
+Si Copilot te sugiere algo como:
+
+```vue
+<div class="bg-blue-600 text-gray-500 border-red-400"></div>
+```
+
+**Responde**:
+
+> Este proyecto usa Tailwind con presets personalizados. Usa colores disponibles: `brand`, `primary`, `brand-light`, etc. Reemplaza con colores del preset.
+
+---
+
+## 🔗 Referencias
+
+- **Documentación completa**: [SKILL_TAILWIND_CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md)
+- **Configuración**: [tailwind.config.js](./tailwind.config.js)
+- **Ejemplos reales**:
+    - [Charlas.vue](./src/pages/Charlas/Charlas.vue)
+    - [BeneficiosSlider.vue](./src/pages/ValeVista/sections/BeneficiosSlider.vue)
+
+---
+
+## ⚡ Tl;dr (Muy Rápido)
+
+```
+Regla de Oro:
+  1. Usa colores del preset (brand, primary, etc)
+  2. Para gradientes: combina colores preset
+  3. Para tamaños/valores específicos: usa arbitrarios [tamaño]
+  4. NUNCA uses colores arbitrarios si existen en preset
+```