--- name: yukyu-component-doctor description: "Doctor de Componentes para YuKyuDATA - Diagnóstico y reparación de componentes rotos, detección de bugs visuales, memory leaks, problemas de accesibilidad, inconsistencias CSS, y refactoring de código legacy. Incluye herramientas de auditoría automatizada." --- # YuKyu Component Doctor Sistema experto para diagnosticar, reparar y mejorar componentes del frontend. Especializado en detectar y corregir problemas comunes en aplicaciones web empresariales. ## Cuándo Usar Este Skill - Componentes que no se renderizan correctamente - Estilos rotos o inconsistentes - Memory leaks en JavaScript - Problemas de accesibilidad - Bugs visuales en dark\/light mode - Refactoring de código legacy - Auditorías de calidad de código --- ## Diagnóstico Rápido ### Script de Auditoría Automática Ejecuta este script en la consola del navegador para detectar problemas comunes: ```javascript (function auditComponents() { const issues = []; \/\/ 1. Detectar emojis usados como iconos document.querySelectorAll('button, a, span').forEach(el => { if (\/[\u{1F300}-\u{1F9FF}]\/u.test(el.textContent)) { issues.push({ type: 'emoji-icon', severity: 'medium', element: el, message: 'Emoji usado como icono - usar SVG en su lugar' }); } }); \/\/ 2. Detectar elementos clickeables sin cursor-pointer document.querySelectorAll('button, a, [onclick], [data-action]').forEach(el => { const cursor = getComputedStyle(el).cursor; if (cursor !== 'pointer') { issues.push({ type: 'missing-cursor', severity: 'low', element: el, message: 'Elemento clickeable sin cursor-pointer' }); } }); \/\/ 3. Detectar imágenes sin alt document.querySelectorAll('img:not([alt])').forEach(el => { issues.push({ type: 'missing-alt', severity: 'high', element: el, message: 'Imagen sin atributo alt' }); }); \/\/ 4. Detectar inputs sin label document.querySelectorAll('input, select, textarea').forEach(el => { const id = el.id; const label = id ? document.querySelector(`label[for="${id}"]`) : null; const ariaLabel = el.getAttribute('aria-label'); if (!label && !ariaLabel) { issues.push({ type: 'missing-label', severity: 'high', element: el, message: 'Input sin label asociado' }); } }); \/\/ 5. Detectar problemas de contraste (aproximado) document.querySelectorAll('*').forEach(el => { const style = getComputedStyle(el); const color = style.color; const bg = style.backgroundColor; \/\/ Simplificado - en producción usar librería de contraste }); \/\/ 6. Detectar z-index wars const zIndexes = []; document.querySelectorAll('*').forEach(el => { const z = getComputedStyle(el).zIndex; if (z !== 'auto' && parseInt(z) > 100) { zIndexes.push({ element: el, zIndex: parseInt(z) }); } }); if (zIndexes.length > 5) { issues.push({ type: 'z-index-war', severity: 'medium', elements: zIndexes, message: `${zIndexes.length} elementos con z-index > 100` }); } \/\/ Reporte console.group('🏥 Component Doctor - Audit Report'); console.log(`Total issues: ${issues.length}`); const grouped = issues.reduce((acc, issue) => { acc[issue.severity] = acc[issue.severity] || []; acc[issue.severity].push(issue); return acc; }, {}); if (grouped.high?.length) { console.group('🔴 High Severity'); grouped.high.forEach(i => console.log(i.message, i.element)); console.groupEnd(); } if (grouped.medium?.length) { console.group('🟡 Medium Severity'); grouped.medium.forEach(i => console.log(i.message, i.element)); console.groupEnd(); } if (grouped.low?.length) { console.group('🟢 Low Severity'); grouped.low.forEach(i => console.log(i.message, i.element)); console.groupEnd(); } console.groupEnd(); return issues; })(); ``` --- ## Problemas Comunes y Soluciones ### 1. Modal No Se Muestra **Síntomas:** - Modal existe en DOM pero no es visible - Click en botón no hace nada **Diagnóstico:** ```javascript const modal = document.getElementById('my-modal'); console.log('Display:', getComputedStyle(modal).display); console.log('Visibility:', getComputedStyle(modal).visibility); console.log('Opacity:', getComputedStyle(modal).opacity); console.log('Z-Index:', getComputedStyle(modal).zIndex); ``` **Soluciones:** ```css \/* Problema: display: none que no cambia *\/ .modal { display: flex; \/* Siempre flex *\/ visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; } .modal.active { visibility: visible; opacity: 1; pointer-events: auto; } ``` ```javascript \/\/ Problema: clase no se agrega function openModal(id) { const modal = document.getElementById(id); if (!modal) { console.error(`Modal ${id} not found`); return; } modal.classList.add('active'); document.body.style.overflow = 'hidden'; \/\/ Prevent scroll } ``` --- ### 2. Dropdown No Funciona **Síntomas:** - Menú no aparece al hacer click - Menú aparece pero no se cierra **Diagnóstico:** ```javascript const dropdown = document.querySelector('.dropdown'); const menu = dropdown.querySelector('.dropdown-menu'); console.log('Menu visibility:', getComputedStyle(menu).visibility); console.log('Event listeners:', getEventListeners(dropdown)); \/\/ Solo en Chrome DevTools ``` **Solución Completa:** ```html