SkillSpector Web (Portabilidad del SkillSpector a Navegador)

Metodología de Portabilidad y Actualización de SkillSpector Web

Este skill proporciona instrucciones detalladas para portar una nueva versión del SkillSpector (escáner de seguridad Python) a una aplicación web (SkillSpectorWeb) que se ejecuta al 100% en el navegador mediante WebAssembly/JavaScript.

---

🎯 Principios Arquitectónicos

1. Ejecución 100% en el Lado del Cliente (Navegador):

   • El escáner debe ejecutarse completamente en el navegador del usuario, sin requerir un servidor backend.
   • Todo el contenido del repositorio de GitHub se obtiene mediante las APIs REST de GitHub (api.github.com y raw.githubusercontent.com).

2. Aislamiento Estricto de Módulos:

   • Motor Central del Escáner (docs/js/skillspector-engine.js): Contiene las reglas de análisis estático traducidas, que coinciden con nodes/analyzers/ de Python.
   • Filtro de Repositorio Aislado (docs/js/repo-filter.js): Mantiene separado el filtrado personalizado de archivos no relacionados con skills (README.md, CHANGELOG.md, .git/, etc.) del código traducido del escáner.
   • Descargador de GitHub (docs/js/github-fetcher.js): Gestiona el análisis de URL, la expansión de árboles y la descarga por lotes.

3. Soporte para Repositorios Multi-Skill:

   • Debe reflejar src/skillspector/multi_skill.py para descubrir todos los skills anidados en un repositorio (resources/skills/*.md, skills/*.md, agents/*.md).

4. Paridad de Licencia y Versión:

   • Conservar los números de versión exactos (vX.Y.Z) que coincidan con la versión upstream de SkillSpector (Python).
   • Conservar sin editar el archivo LICENSE upstream (Apache 2.0).

---

📋 Flujo de Trabajo de Portabilidad Paso a Paso

Fase 1: Extracción de Reglas y Análisis AST

1. Inspeccionar las nuevas reglas del analizador en src/skillspector/nodes/analyzers/ del upstream:
   • pattern_defaults.py (IDs de regla: P1-P8, E1-E5, PE1-PE3, SC1-SC7, EA1-EA4, OH1-OH3, MP1-MP3, TM1-TM4, RA1-RA2, TR1-TR3, MCP1).
2. Traducir las nuevas expresiones regulares de Python y las comprobaciones AST a patrones RegExp de JavaScript dentro de docs/js/skillspector-engine.js.
3. Actualizar las listas de categorías, las descripciones de las reglas, las explicaciones y las guías de corrección.

Fase 2: Descargador de GitHub y Expansión de Árboles

1. Asegurarse de que docs/js/github-fetcher.js obtiene estructuras de árbol recursivas mediante https://api.github.com/repos/{owner}/{repo}/git/trees/{branch}?recursive=1.
2. NO limitar la obtención a límites de archivos pequeños arbitrarios (usar un umbral alto de hasta 250 archivos para admitir repositorios multi-skill grandes).
3. Usar obtención por lotes en paralelo (por ejemplo, 10 archivos por lote) con callbacks de progreso en vivo en la interfaz de usuario (onProgress(current, total, filename)).

Fase 3: Motor de Descubrimiento Multi-Skill

1. Implementar discoverSkills(filesMap) en skillspector-engine.js.
2. Analizar el YAML del frontmatter de Markdown (--- name: ... description: ... ---) para todos los archivos .md del repositorio.
3. Renderizar una barra de selección multi-skill en index.html que permita a los usuarios filtrar los hallazgos por skill individual descubierto o inspeccionar el contexto completo del repositorio.

Fase 4: Filtrado Aislado de Archivos del Repositorio

1. Mantener docs/js/repo-filter.js completamente separado del motor central del escáner.
2. Proporcionar casillas de verificación en la interfaz de usuario en index.html:
   • Omitir documentos estándar del repositorio (README, CHANGELOG, LICENSE)
   • Omitir metadatos del sistema (.git/, .github/, dotfiles)
3. Registrar los archivos omitidos en el Registro de Inspección como elementos skipped con razones explícitas.

Fase 5: Empaquetado para GitHub Pages (docs/)

1. Asegurarse de que todos los activos del sitio web estático se encuentren dentro de SkillSpectorWeb/docs/:
   • docs/index.html
   • docs/css/styles.css
   • docs/js/*.js
   • docs/CNAME (skillspector.niyogilabs.com)
   • docs/sitemap.xml
   • docs/robots.txt
   • docs/.nojekyll
   • docs/LICENSE
2. Asegurarse de que server.py sirva el directorio docs/ por defecto.

---

🧪 Lista de Verificación

• python3 server.py 8090 se inicia y sirve limpiamente desde docs/.
• El escaneo de un repositorio multi-skill (por ejemplo, Bhanunamikaze/Agentic-SEO-Skill) descubre todos los skills anidados.
• El tema claro está configurado como predeterminado; el cambio al tema oscuro funciona y persiste en localStorage.
• Los endpoints SEO (/sitemap.xml, /robots.txt, /CNAME) devuelven 200 OK.
• Las funciones de exportación a SARIF 2.1.0, JSON y Markdown se ejecutan sin problemas.
• El archivo LICENSE raíz sin editar está intacto.