update-base-config 0.1.0

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

@@ -0,0 +1,315 @@
+# 🎨 Skill Tailwind CSS Custom - Guía de Archivos
+
+## 📚 5 Archivos Creados
+
+```
+SKILL_TAILWIND_QUICK_START.md        (288 líneas) ⚡ COMIENZA AQUÍ
+SKILL_TAILWIND_CUSTOM.md             (295 líneas) 📖 Guía Completa
+SKILL_TAILWIND_COPILOT_PROMPT.md     (253 líneas) 🤖 Para IA/Copilot
+SKILL_TAILWIND_BEFORE_AFTER.md       (378 líneas) 🔄 Ejemplos Visuales
+SKILL_TAILWIND_SUMMARY.md            (370 líneas) 📊 Resumen Ejecutivo
+
+Total: 1,584 líneas de documentación
+```
+
+---
+
+## 🗺️ Mapa de Lectura
+
+### Para Aprender Rápido (5 minutos)
+
+```
+1. SKILL_TAILWIND_QUICK_START.md
+   ↓
+   ✅ Aprendiste: 3 reglas de oro, colores clave, ejemplos básicos
+```
+
+### Para Aprender a Fondo (20 minutos)
+
+```
+1. SKILL_TAILWIND_QUICK_START.md     (5 min)
+   ↓
+2. SKILL_TAILWIND_CUSTOM.md          (15 min)
+   ↓
+   ✅ Aprendiste: Todo sobre presets, ejemplos, checklist
+```
+
+### Para Usar con Copilot (5 minutos)
+
+```
+1. SKILL_TAILWIND_COPILOT_PROMPT.md
+   ↓
+   ✅ Aprendiste: Cómo instruir a IA correctamente
+```
+
+### Para Revisar Código (10 minutos)
+
+```
+1. SKILL_TAILWIND_BEFORE_AFTER.md
+   ↓
+   ✅ Aprendiste: Patrones correctos vs incorrectos
+```
+
+---
+
+## 📖 ¿Qué hay en cada archivo?
+
+### 1. SKILL_TAILWIND_QUICK_START.md ⚡
+
+**Para quién:** Todos (desarrolladores, designers, etc)  
+**Tiempo:** 5 minutos  
+**Objetivo:** Empezar YA
+
+**Contiene:**
+
+- ✅ TL;DR (lo más importante)
+- ✅ 3 Reglas de Oro
+- ✅ Tabla de colores disponibles
+- ✅ Ejemplos rápidos (header, botón, card, gradiente)
+- ✅ Errores comunes vs correctos
+- ✅ Preguntas frecuentes
+- ✅ Tips prácticos
+
+**Pregunta que responde:**
+
+> "Necesito crear una maqueta rápido, ¿qué hago?"
+
+---
+
+### 2. SKILL_TAILWIND_CUSTOM.md 📖
+
+**Para quién:** Desarrolladores, Tech Leads  
+**Tiempo:** 15-20 minutos  
+**Objetivo:** Entender completamente
+
+**Contiene:**
+
+- ✅ Explicación del problema (conflicto Tailwind v3 vs presets)
+- ✅ Solución detallada (cómo funcionan los presets)
+- ✅ Configuración actual del proyecto
+- ✅ Paleta de colores completa con explicación
+- ✅ 5 ejemplos de uso correcto
+- ✅ Cuándo y cómo usar valores arbitrarios
+- ✅ Checklist para crear maquetas
+- ✅ Preguntas frecuentes
+- ✅ Archivo de referencia completo
+
+**Pregunta que responde:**
+
+> "¿Por qué no puedo usar bg-blue-500? ¿Cuáles son TODOS los colores disponibles?"
+
+---
+
+### 3. SKILL_TAILWIND_COPILOT_PROMPT.md 🤖
+
+**Para quién:** Quien solicita maquetas a Copilot/IA  
+**Tiempo:** 5 minutos (leer) + copiar para usar  
+**Objetivo:** Instruir a IA correctamente
+
+**Contiene:**
+
+- ✅ Contexto del proyecto
+- ✅ Stack de diseño
+- ✅ Lista completa de colores
+- ✅ 5 Reglas de Implementación
+- ✅ Checklist antes de generar código
+- ✅ Lo que NUNCA debes hacer
+- ✅ Tips prácticos para validación
+
+**Pregunta que responde:**
+
+> "¿Cómo le digo a Copilot que use los colores correctos?"
+
+---
+
+### 4. SKILL_TAILWIND_BEFORE_AFTER.md 🔄
+
+**Para quién:** Todos (especialemente reviewers)  
+**Tiempo:** 10-15 minutos  
+**Objetivo:** Ver patrones correctos en acción
+
+**Contiene:**
+
+- ✅ 7 Ejemplos reales lado a lado
+    - Hero/Header
+    - Gradiente en título
+    - Card con contenido
+    - Botón con estados
+    - Gradiente complejo
+    - Componente con valores arbitrarios
+    - Tabla con colores
+- ✅ Código incorrecto transformado
+- ✅ Tabla de equivalencias (todos los reemplazos)
+- ✅ Proceso de conversión paso a paso
+- ✅ Checklist final
+
+**Pregunta que responde:**
+
+> "¿Cómo se vería este código si lo hago bien?"
+
+---
+
+### 5. SKILL_TAILWIND_SUMMARY.md 📊
+
+**Para quién:** Stakeholders, decision makers  
+**Tiempo:** 5 minutos  
+**Objetivo:** Entender el impacto
+
+**Contiene:**
+
+- ✅ Resumen ejecutivo
+- ✅ Problema resuelto (antes/después)
+- ✅ Solución implementada
+- ✅ Beneficios esperados
+- ✅ Métricas de calidad
+- ✅ Próximos pasos recomendados
+- ✅ Checklist de entrega
+
+**Pregunta que responde:**
+
+> "¿Qué se logró exactamente? ¿Cuál es el impacto?"
+
+---
+
+## 🎯 Tabla de Decisión: ¿Qué archivo leer?
+
+| Situación                     | Archivo               |
+| ----------------------------- | --------------------- |
+| "Necesito empezar YA"         | QUICK_START.md        |
+| "No sé qué colores usar"      | CUSTOM.md             |
+| "Quiero entender todo"        | CUSTOM.md             |
+| "Voy a usar con Copilot"      | COPILOT_PROMPT.md     |
+| "Necesito ejemplos"           | BEFORE_AFTER.md       |
+| "Debo revisar código de otro" | BEFORE_AFTER.md       |
+| "Tengo una pregunta"          | QUICK_START.md (FAQs) |
+| "Quiero explicar a otros"     | SUMMARY.md            |
+| "Necesito tener todo"         | CUSTOM.md             |
+
+---
+
+## 🔍 Búsqueda Rápida por Problema
+
+### "¿Cuáles son TODOS los colores disponibles?"
+
+→ Mira tabla en [QUICK_START.md](./SKILL_TAILWIND_QUICK_START.md#-colores-disponibles-memoriza-estos)  
+→ O lee sección completa en [CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md#-colores-disponibles-tw-blue)
+
+### "¿Cómo hago un gradiente?"
+
+→ [QUICK_START.md - Ejemplos Rápidos](./SKILL_TAILWIND_QUICK_START.md#-ejemplos-rápidos)  
+→ [BEFORE_AFTER.md - Ejemplo 2](./SKILL_TAILWIND_BEFORE_AFTER.md#-2️⃣-ejemplo-gradiente-en-título)
+
+### "¿Puedo usar valores arbitrarios?"
+
+→ [CUSTOM.md - Valores Arbitrarios](./SKILL_TAILWIND_CUSTOM.md#-qué-hacer-cuando-necesitas-un-valor-no-disponible-en-tw-blue)  
+→ [COPILOT_PROMPT.md - Regla 3](./SKILL_TAILWIND_COPILOT_PROMPT.md#-regla-3-valores-arbitrarios-solo-cuando-no-existan-en-preset)
+
+### "¿Qué está mal con este código?"
+
+→ Compara con [BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)  
+→ Usa la tabla de equivalencias
+
+### "¿Cómo instruyo a Copilot?"
+
+→ Lee y copia [COPILOT_PROMPT.md](./SKILL_TAILWIND_COPILOT_PROMPT.md) completo
+
+### "¿Necesito usar bg-blue-600?"
+
+→ NO. Lee [QUICK_START.md - Regla 1](./SKILL_TAILWIND_QUICK_START.md#-regla-1-usa-colores-del-preset)
+
+---
+
+## 💡 Consejos de Uso
+
+### Para Desarrolladores
+
+1. Guarda bookmark a [QUICK_START.md](./SKILL_TAILWIND_QUICK_START.md)
+2. Memoriza: `brand`, `brand-light`, `primary`
+3. Cuando dudes, consulta ejemplos en [BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)
+4. Lee [CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md) cuando tengas 20 min
+
+### Para Code Reviewers
+
+1. Ten a mano [BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)
+2. Compara patrones en el PR con ejemplos
+3. Usa checklist final para validar
+4. Link [QUICK_START.md](./SKILL_TAILWIND_QUICK_START.md) en comments si hay error
+
+### Para quien pide Maquetas a Copilot
+
+1. Copia [COPILOT_PROMPT.md](./SKILL_TAILWIND_COPILOT_PROMPT.md) antes de solicitar
+2. Pégalo en el prompt inicial
+3. Luego describe la maqueta que necesitas
+4. Valida resultado con [BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)
+
+### Para Líderes/PMs
+
+1. Lee [SUMMARY.md](./SKILL_TAILWIND_SUMMARY.md) (5 min)
+2. Comparte enlaces con el equipo
+3. Usa en onboarding de nuevos desarrolladores
+4. Referencia en style guides del proyecto
+
+---
+
+## 📱 Lectura Mobile-Friendly
+
+Todos los archivos están optimizados para ser leídos:
+
+- ✅ En VS Code (syntax highlighting)
+- ✅ En GitHub (preview automático)
+- ✅ En navegador (markdown viewer)
+- ✅ En mobile (responsive)
+
+---
+
+## 🔗 Integración con Documentación Existente
+
+Estos archivos se integran con:
+
+- [README.md](./README.md) - Sección "📚 Skills Disponibles"
+- [SKILL_INDEX.md](./SKILL_INDEX.md) - Índice maestro
+- [SKILL_SUMMARY.md](./SKILL_SUMMARY.md) - Resumen de ambas Skills
+
+---
+
+## ✅ Checklist: ¿Estoy Listo?
+
+- [ ] Leí [SKILL_TAILWIND_QUICK_START.md](./SKILL_TAILWIND_QUICK_START.md)
+- [ ] Memoricé los 3 colores principales: brand, brand-light, primary
+- [ ] Entiendo que NO debo usar bg-blue-500
+- [ ] Puedo hacer un gradiente: from-brand-light to-primary
+- [ ] Conozco dónde encontrar ejemplos (BEFORE_AFTER.md)
+- [ ] Sé que para Copilot necesito [COPILOT_PROMPT.md](./SKILL_TAILWIND_COPILOT_PROMPT.md)
+
+**Si todas son SÍ → ¡Estás listo para usar la Skill! 🎉**
+
+---
+
+## 📞 Preguntas Finales
+
+**P: ¿Cuál debo leer primero?**  
+R: [SKILL_TAILWIND_QUICK_START.md](./SKILL_TAILWIND_QUICK_START.md) (5 min)
+
+**P: ¿Debo leer TODOS?**  
+R: No. Elige según tu rol y necesidad (ver tabla de decisión)
+
+**P: ¿Dónde están los ejemplos?**  
+R: [SKILL_TAILWIND_BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md) (7 ejemplos)
+
+**P: ¿Y si tengo una pregunta no respondida?**  
+R: Probablemente está en FAQs de [CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md) o [QUICK_START.md](./SKILL_TAILWIND_QUICK_START.md)
+
+**P: ¿Puedo compartir estos archivos?**  
+R: SÍ. Están en el repo. Link [SKILL_INDEX.md](./SKILL_INDEX.md) o [README.md](./README.md)
+
+---
+
+## 🎉 ¡Vamos!
+
+Elige tu punto de entrada y comienza:
+
+- ⚡ **Rápido** → [SKILL_TAILWIND_QUICK_START.md](./SKILL_TAILWIND_QUICK_START.md)
+- 📖 **A Fondo** → [SKILL_TAILWIND_CUSTOM.md](./SKILL_TAILWIND_CUSTOM.md)
+- 🤖 **Con Copilot** → [SKILL_TAILWIND_COPILOT_PROMPT.md](./SKILL_TAILWIND_COPILOT_PROMPT.md)
+- 🔄 **Ejemplos** → [SKILL_TAILWIND_BEFORE_AFTER.md](./SKILL_TAILWIND_BEFORE_AFTER.md)
+- 📊 **Resumen** → [SKILL_TAILWIND_SUMMARY.md](./SKILL_TAILWIND_SUMMARY.md)