optimize

Descripción general

La skill optimize está diseñada para ayudar a los desarrolladores a diagnosticar y solucionar de forma sistemática problemas de rendimiento en la interfaz de usuario de aplicaciones web. Se enfoca en mejorar la velocidad de carga, la eficiencia del renderizado, la fluidez de las animaciones, la optimización de imágenes y la reducción del tamaño de los bundles. Usa optimize cuando encuentres interfaces lentas, con retrasos o con movimientos entrecortados, o cuando los usuarios reporten problemas de rendimiento como tiempos de carga prolongados o interacciones poco responsivas.

¿Quién debería usar optimize?

• Desarrolladores frontend que buscan mejorar la velocidad y la capacidad de respuesta del sitio.
• Equipos que reciben quejas de usuarios sobre interfaces lentas o poco responsivas.
• Proyectos con bundles de JavaScript grandes, imágenes sin optimizar o problemas de animación.

Problemas que resuelve optimize

• Cargas iniciales lentas y tiempos altos para la interactividad.
• Imágenes grandes o sin comprimir que afectan el rendimiento.
• Renderizados ineficientes o problemas de layout thrashing.
• Animaciones entrecortadas o con saltos.
• Bundles de JavaScript o CSS demasiado grandes.

Cómo usar

Pasos de instalación

1. Instala la skill optimize con el siguiente comando:

   npx skills add https://github.com/pbakaus/impeccable --skill optimize

2. Comienza leyendo el archivo SKILL.md para obtener una visión estructurada del flujo de trabajo y las recomendaciones.

3. Revisa archivos complementarios como README.md, AGENTS.md, metadata.json y carpetas relevantes como rules/, resources/, references/ o scripts/ para obtener contexto adicional y herramientas auxiliares.

Aplicando optimize en tu proyecto

• Evalúa el rendimiento: Mide métricas actuales como Core Web Vitals (LCP, FID/INP, CLS), tiempo de carga, tamaño del bundle y rendimiento en tiempo de ejecución. Identifica cuellos de botella específicos, ya sea por imágenes grandes, JavaScript pesado o renderizados ineficientes.
• Desarrolla un plan de optimización: Prioriza las correcciones según su impacto. Enfócate en optimizar imágenes (formatos modernos, compresión, carga diferida), reducir el tamaño del bundle y mejorar el rendimiento del renderizado y las animaciones.
• Itera y mide: Siempre realiza pruebas comparativas antes y después de los cambios para asegurar que las optimizaciones tengan el efecto deseado.

Archivos sugeridos para revisar

• SKILL.md (flujo de trabajo principal y recomendaciones)

Preguntas frecuentes

¿Qué hace la skill optimize?

La skill optimize ofrece un enfoque estructurado para diagnosticar y solucionar problemas de rendimiento en el frontend, incluyendo cargas lentas, retrasos en el renderizado, problemas con animaciones y tamaños grandes de recursos.

¿Cuándo debería usar optimize?

Usa optimize cuando tu aplicación se sienta lenta, los usuarios reporten retrasos o movimientos entrecortados, o quieras mejorar métricas como el tiempo de carga y la capacidad de respuesta.

¿Cómo empiezo?

Instala la skill con el comando npx proporcionado y sigue las indicaciones en SKILL.md para evaluar y resolver los cuellos de botella de rendimiento.

¿Dónde puedo encontrar más detalles o scripts?

Consulta la pestaña de Archivos en el repositorio para acceder a recursos adicionales, referencias y scripts auxiliares que apoyan tu flujo de trabajo de optimización.