update-base-config 0.1.0

package/templates/skills/ids/docs/SKILL_QUICK_START.md

@@ -0,0 +1,260 @@
+# 🚀 Guía Rápida: Skill de Gestión de IDs
+
+## ⚡ Inicio Rápido
+
+### 1. El Sistema Detecta Automáticamente
+
+```vue
+<!-- ❌ ESLint detecta esto automáticamente -->
+<button>Enviar</button>
+<!-- Error: Element "button" must have an "id" attribute -->
+```
+
+### 2. Aplica Auto-Fix
+
+**Opción A (VS Code - Recomendado):**
+
+- Presiona: Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows/Linux)
+- Escribe: `ESLint: Fix All Auto-Fixable Problems`
+- Presiona: Enter
+
+**Opción B (Terminal):**
+
+```bash
+npx eslint --fix src/
+```
+
+### 3. Resultado
+
+```vue
+<!-- ✅ ESLint sugiere y aplica automáticamente -->
+<button id="ppp_landing-btn-enviar">Enviar</button>
+```
+
+## 📋 Formato de IDs
+
+```
+[PREFIX]_landing-[TIPO]-[CONTEXTO]
+```
+
+| Parámetro    | Valores                                        | Ejemplo  |
+| ------------ | ---------------------------------------------- | -------- |
+| **PREFIX**   | `ppp_` (Banco Chile) o `pbec_` (Banco Edwards) | `ppp_`   |
+| **TIPO**     | btn, link, input, section                      | `btn`    |
+| **CONTEXTO** | Descripción en minúsculas                      | `enviar` |
+
+### Resultado: `ppp_landing-btn-enviar`
+
+## 🎯 Tipos de Elementos
+
+| Elemento      | Tipo    | Ejemplo de ID               |
+| ------------- | ------- | --------------------------- |
+| `<button>`    | `btn`   | `ppp_landing-btn-enviar`    |
+| `<a>`         | `link`  | `ppp_landing-link-charlas`  |
+| `<input>`     | `input` | `ppp_landing-input-email`   |
+| `<BchButton>` | `btn`   | `ppp_landing-btn-solicitar` |
+
+## ✅ Ejemplos Rápidos
+
+### Botones
+
+```vue
+<!-- ❌ SIN ID -->
+<button>Guardar</button>
+
+<!-- ✅ CON ID (Auto-fix) -->
+<button id="ppp_landing-btn-guardar">Guardar</button>
+```
+
+### Enlaces
+
+```vue
+<!-- ❌ SIN ID -->
+<a href="#beneficios">Ver Beneficios</a>
+
+<!-- ✅ CON ID (Auto-fix) -->
+<a href="#beneficios" id="ppp_landing-link-ver-beneficios">Ver Beneficios</a>
+```
+
+### Inputs
+
+```vue
+<!-- ❌ SIN ID -->
+<input placeholder="Tu email" />
+
+<!-- ✅ CON ID (Auto-fix) -->
+<input id="ppp_landing-input-tu-email" placeholder="Tu email" />
+```
+
+### Componentes
+
+```vue
+<!-- ❌ SIN ID -->
+<BchButton type="primary">Solicitar</BchButton>
+
+<!-- ✅ CON ID (Auto-fix) -->
+<BchButton id="ppp_landing-btn-solicitar" type="primary">Solicitar</BchButton>
+```
+
+## 🔍 Validación en Diferentes Entornos
+
+| Entorno        | Comportamiento           | Comando              |
+| -------------- | ------------------------ | -------------------- |
+| **Desarrollo** | 🟡 WARNING (no bloquea)  | `npm run dev`        |
+| **Producción** | 🔴 ERROR (bloquea build) | `npm run build`      |
+| **Modyo**      | 🔴 ERROR (bloquea push)  | `npm run modyo-push` |
+
+## 📊 Scripts Auxiliares
+
+### Analizar IDs en una carpeta
+
+```bash
+node scripts/manageIds.js --analyze src/pages
+```
+
+### Generar reporte completo
+
+```bash
+node scripts/manageIds.js --report
+```
+
+### Aplicar auto-fix
+
+```bash
+node scripts/manageIds.js --fix
+```
+
+## 🚦 Flujo de Trabajo Recomendado
+
+### 1. Escribir Código
+
+```vue
+<button>Enviar</button>
+<a href="#info">Información</a>
+```
+
+### 2. Ejecutar Auto-Fix
+
+```bash
+npx eslint --fix src/
+```
+
+### 3. Verificar Cambios
+
+```bash
+npm run lint
+```
+
+### 4. Commit
+
+```bash
+git commit -m "feat: componente con IDs"
+```
+
+## ❓ Preguntas Frecuentes
+
+**P: ¿Qué pasa si no agrego un ID?**  
+R: ESLint genera un warning (desarrollo) o error (producción). El auto-fix lo agrega automáticamente.
+
+**P: ¿Puedo tener IDs personalizados?**  
+R: Sí, pero deben seguir el formato: `ppp_landing-tipo-contexto`
+
+**P: ¿El auto-fix es siempre correcto?**  
+R: Generalmente sí. Revisa siempre que el contexto sugerido tenga sentido.
+
+**P: ¿Puedo ignorar la regla?**  
+R: En desarrollo (warning) no es obligatorio. En producción sí (error).
+
+**P: ¿Los IDs afectan el performance?**  
+R: No. Son solo atributos HTML estándar.
+
+## 🔗 Enlaces Útiles
+
+- 📖 Documentación completa: [SKILL_ID_MANAGEMENT.md](./SKILL_ID_MANAGEMENT.md)
+- 💻 Ejemplos prácticos: [SkillExample.vue](./src/pages/SkillExample/SkillExample.vue)
+- ⚙️ Regla ESLint: [require-id-attribute.js](./eslint-rules/require-id-attribute.js)
+- 📋 Tests: [skillIdManagement.spec.js](./src/__tests__/skillIdManagement.spec.js)
+
+## 💡 Tips Útiles
+
+### 1. Habilitar auto-fix en VS Code
+
+```json
+{
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": true
+	}
+}
+```
+
+### 2. Revisar problemas de IDs rápidamente
+
+```bash
+npm run lint | grep "require-id-attribute"
+```
+
+### 3. Validar antes de push
+
+```bash
+npm run lint && git push
+```
+
+### 4. Ver IDs generados automáticamente
+
+```bash
+npx eslint --fix src/ --report-unused-disable-directives
+```
+
+## 🎓 Ejemplos Avanzados
+
+### IDs Dinámicos
+
+```vue
+<button :id="`ppp_landing-btn-${action}`">Acción</button>
+```
+
+### Expresiones Condicionales
+
+```vue
+<button :id="isActive ? 'ppp_landing-btn-activo' : 'ppp_landing-btn-inactivo'">
+  Toggle
+</button>
+```
+
+### Concatenación
+
+```vue
+<button :id="'ppp_landing-btn-' + itemId">Item</button>
+```
+
+## 🛠️ Troubleshooting
+
+### El auto-fix no funciona
+
+```bash
+# Verifica ESLint está instalado
+npm list eslint
+
+# Ejecuta fix explícitamente
+npx eslint --fix src/pages/Home/Home.vue
+```
+
+### IDs incorrectos después del fix
+
+Revisa el contexto sugerido:
+
+```bash
+npm run lint | grep "Suggested:"
+```
+
+### Prefijo incorrecto
+
+Verifica tu archivo `.env`:
+
+```bash
+cat .env | grep MODYO_ACCOUNT_URL
+```
+
+---
+
+**¿Necesitas más ayuda?** Consulta [SKILL_ID_MANAGEMENT.md](./SKILL_ID_MANAGEMENT.md)

package/templates/skills/ids/docs/SKILL_README.md

@@ -0,0 +1,230 @@
+# 🎯 Skill: Gestión Inteligente de IDs en Elementos Interactivos
+
+## Descripción Rápida
+
+Automatiza la detección, validación y sugerencia de IDs en elementos interactivos (botones, enlaces, inputs) siguiendo un formato estándar para el proyecto m-personas (Modyo).
+
+## ¿Por Qué Esta Skill?
+
+En m-personas necesitamos IDs consistentes en todos los elementos interactivos para:
+
+- 📊 **Analytics**: Rastrear acciones del usuario
+- 🧪 **Testing**: Automatizar pruebas (Selenium, Cypress)
+- 🎯 **Tracking**: Eventos en Google Analytics o herramientas similares
+- 🔍 **SEO**: Mejora la estructura del documento
+- 🚀 **Mantenibilidad**: Código más legible y consistente
+
+## Formato de IDs
+
+```
+[PREFIX]_landing-[TIPO]-[CONTEXTO]
+```
+
+### Ejemplos:
+
+- Banco Chile: `ppp_landing-btn-enviar`, `ppp_landing-link-charlas`
+- Banco Edwards: `pbec_landing-btn-solicitar`, `pbec_landing-link-beneficios`
+
+## Cómo Funciona
+
+### 1️⃣ Detecta IDs Faltantes
+
+```vue
+<!-- ❌ SIN ID -->
+<button>Enviar</button>
+
+<!-- ✅ ESLint sugiere: ppp_landing-btn-enviar -->
+<!-- ✅ Auto-fix disponible -->
+```
+
+### 2️⃣ Valida Formato
+
+```vue
+<!-- ❌ FORMATO INCORRECTO -->
+<button id="submit_btn">Enviar</button>
+
+<!-- ✅ ESLint sugiere: ppp_landing-btn-enviar -->
+<!-- ✅ Auto-fix disponible -->
+```
+
+### 3️⃣ Sugerencias Inteligentes
+
+```vue
+<!-- Basadas en: tipo de elemento + texto + atributos -->
+<button>Login</button>
+→ ppp_landing-btn-login
+<a href="#tarjetas">Mis Tarjetas</a>
+→ ppp_landing-link-mis-tarjetas
+<input placeholder="Email" />
+→ ppp_landing-input-email
+```
+
+## Uso Rápido
+
+### En VS Code (Recomendado)
+
+1. Cmd+Shift+P → `ESLint: Fix All Auto-Fixable Problems`
+2. Listo, se aplicarán todos los IDs sugeridos
+
+### En Terminal
+
+```bash
+# Aplicar auto-fix
+npx eslint --fix src/
+
+# Analizar IDs (helper script)
+node scripts/manageIds.js --analyze
+
+# Generar reporte
+node scripts/manageIds.js --report
+```
+
+## Archivos Principales
+
+| Archivo                                   | Propósito                       |
+| ----------------------------------------- | ------------------------------- |
+| `eslint-rules/require-id-attribute.js`    | Regla ESLint (lógica principal) |
+| `eslint-rules/SKILL_ID_MANAGEMENT.md`     | Documentación completa          |
+| `scripts/manageIds.js`                    | Script auxiliar de análisis     |
+| `src/pages/SkillExample/SkillExample.vue` | Ejemplos prácticos              |
+
+## Niveles de Validación
+
+### 🟡 Desarrollo (`npm run dev`)
+
+- Genera **WARNINGS** (no bloquea)
+- Muestra sugerencias
+- Permite auto-fix inmediato
+
+### 🔴 Producción (`npm run build`)
+
+- Genera **ERRORS** (detiene el build)
+- Obliga a resolver antes de desplegar
+- Garantiza consistencia en producción
+
+## Ejemplo Práctico
+
+### Antes (Con problemas)
+
+```vue
+<template>
+	<div class="card">
+		<h2>Ofertas</h2>
+		<!-- ❌ SIN ID -->
+		<button>Ver Más</button>
+		<!-- ❌ PREFIJO INCORRECTO -->
+		<a href="#" id="more_link">Más info</a>
+		<!-- ❌ SIN ID -->
+		<input placeholder="Email" />
+	</div>
+</template>
+```
+
+### Después (Auto-fix aplicado)
+
+```vue
+<template>
+	<div class="card">
+		<h2>Ofertas</h2>
+		<!-- ✅ ID CORRECTO -->
+		<button id="ppp_landing-btn-ver-mas">Ver Más</button>
+		<!-- ✅ ID CORREGIDO -->
+		<a href="#" id="ppp_landing-link-mas-info">Más info</a>
+		<!-- ✅ ID SUGERIDO -->
+		<input id="ppp_landing-input-email" placeholder="Email" />
+	</div>
+</template>
+```
+
+## Flujo Recomendado
+
+1. **Desarrollo**: Escribe código sin preocuparte por IDs
+2. **Antes de commit**: Aplica `npx eslint --fix src/`
+3. **Verifica**: Revisa que los IDs sugeridos sean apropiados
+4. **Commit**: `git commit -m "feat: componente con IDs validados"`
+5. **Build**: `npm run build` (valida automáticamente)
+
+## Elementos Incluidos
+
+- ✅ `<button>`
+- ✅ `<a>` (enlaces)
+- ✅ `<input>`
+- ✅ `<BchButton>` (componente personalizado)
+
+Configurable en `eslint.config.js`.
+
+## Elementos Excluidos
+
+- ❌ Elementos no interactivos
+- ❌ Texto, párrafos, imágenes
+- ❌ Divs sin interacción
+- ❌ Elementos con `:id` dinámico ya presente
+
+## Preguntas Frecuentes
+
+**P: ¿Puedo ignorar la regla en un elemento?**  
+R: En desarrollo sí (es warning), en producción no. Contacta al equipo si es necesario.
+
+**P: ¿El auto-fix es 100% correcto?**  
+R: En la mayoría de casos sí, pero revisa siempre los contextos sugeridos.
+
+**P: ¿Puedo tener IDs dinámicos?**  
+R: Sí, solo asegúrate que el prefijo esté incluido: `:id="`ppp*btn*${id}`"`
+
+**P: ¿Afecta al performance?**  
+R: No. Son solo atributos HTML estándar.
+
+## Documentación Completa
+
+Para detalles técnicos, ejemplos avanzados y configuración, consulta:  
+👉 [SKILL_ID_MANAGEMENT.md](./SKILL_ID_MANAGEMENT.md)
+
+## Scripts Auxiliares
+
+### Analizar IDs en una carpeta
+
+```bash
+node scripts/manageIds.js --analyze src/pages
+```
+
+### Generar reporte completo
+
+```bash
+node scripts/manageIds.js --report
+```
+
+### Aplicar auto-fix
+
+```bash
+node scripts/manageIds.js --fix
+```
+
+## Integración con CI/CD
+
+La Skill se ejecuta automáticamente en:
+
+1. **Pre-commit**: ESLint check local
+2. **Pull Request**: Validación automática
+3. **Build Production**: Detiene si hay errores
+4. **Deploy a Modyo**: Requiere lint clean
+
+## Contribuir
+
+Si encuentras casos especiales o mejoras:
+
+1. Abre un issue con ejemplos
+2. Proporciona el contexto del elemento
+3. Sugiere el ID ideal para ese caso
+4. El equipo revisará y mejorará la Skill
+
+## Soporte
+
+- 📧 Contacta al equipo de desarrollo
+- 💬 Revisa el archivo [SKILL_ID_MANAGEMENT.md](./SKILL_ID_MANAGEMENT.md) para más detalles
+- 📖 Ve ejemplos en [SkillExample.vue](./src/pages/SkillExample/SkillExample.vue)
+
+---
+
+**Versión:** 1.0  
+**Estado:** ✅ Activa y lista para usar  
+**Última actualización:** 16 de abril de 2026

package/templates/skills/tailwind/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: tailwind
+description: Aplica correctamente los presets de Tailwind personalizados (tw-blue, tw-green) en m-personas con todas sus variables customizadas (colores, tipografía, espaciado, animaciones, etc.).
+license: MIT
+metadata:
+    author: m-personas
+    version: "2.0"
+---
+
+# Skill: Tailwind Custom (Preset Completo)
+
+Usa esta skill cuando necesites:
+
+- **Colores**: Usar paleta corporativa (`brand`, `primary`, etc.)
+- **Tipografía**: Aplicar tamaños de fuente customizados (`text-1` a `text-8`)
+- **Espaciado**: Usar escala de spacing personalizada (1-7 = 4px-40px)
+- **Breakpoints**: Trabajar con screens customizados (sm, md, lg, xl, 2xl)
+- **Animaciones**: Implementar animaciones predefinidas del preset
+- **Sombras**: Usar sistema de box-shadow corporativo
+- **Bordes y radios**: Aplicar valores de borderRadius y borderWidth del preset
+- **Transiciones**: Usar duraciones y timing functions personalizados
+- Evitar clases genéricas incompatibles con el preset
+- Guiar a IA/Copilot con reglas del proyecto
+
+## Documentación
+
+- Índice: [docs/SKILL_TAILWIND_INDEX.md](./docs/SKILL_TAILWIND_INDEX.md)
+- Inicio rápido: [docs/SKILL_TAILWIND_QUICK_START.md](./docs/SKILL_TAILWIND_QUICK_START.md)
+- Guía completa: [docs/SKILL_TAILWIND_CUSTOM.md](./docs/SKILL_TAILWIND_CUSTOM.md)
+- Prompt IA: [docs/SKILL_TAILWIND_COPILOT_PROMPT.md](./docs/SKILL_TAILWIND_COPILOT_PROMPT.md)
+- Ejemplos before/after: [docs/SKILL_TAILWIND_BEFORE_AFTER.md](./docs/SKILL_TAILWIND_BEFORE_AFTER.md)
+- Resumen: [docs/SKILL_TAILWIND_SUMMARY.md](./docs/SKILL_TAILWIND_SUMMARY.md)
+
+## Reglas clave
+
+1. **Colores**: Usar tokens del preset (`brand`, `brand-light`, `primary`, etc.)
+2. **Tipografía**: Usar escala numérica `text-1` a `text-8` o aliases `text-xs` a `text-4xl`
+3. **Espaciado**: Usar escala 1-7 (4px a 40px) en lugar de escala estándar de Tailwind
+4. **Breakpoints**: Respetar screens customizados (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
+5. **Sombras**: Preferir tokens de boxShadow del preset (`shadow-sm`, `shadow-controls`, `shadow-neutral`, etc.)
+6. **Animaciones**: Usar animaciones predefinidas cuando estén disponibles (`animate-fadeIn`, `animate-heartBeat`, etc.)
+7. **Transiciones**: Usar duraciones customizadas (50-3000ms) y timing functions del preset
+8. **Valores arbitrarios**: Solo cuando no exista token equivalente en el preset