niyogilabs/SkillSpectorWeb

SkillSpector ブラウザ移植＆アップグレード手法

このスキルは、SkillSpector Python製セキュリティスキャナの新バージョンを、100%ブラウザ上で実行可能なWebAssembly / JavaScript Webアプリケーション (SkillSpectorWeb) に移植するためのステップバイステップの手順を提供します。

---

🎯 アーキテクチャの原則

1. 100%クライアントサイドでのブラウザ実行:

   • スキャナはユーザーのブラウザ上で完全に動作し、バックエンドサーバーを必要としません。
   • すべてのGitHubリポジトリコンテンツは、GitHub REST API（api.github.com および raw.githubusercontent.com）を介して取得されます。

2. 厳格なモジュール分離:

   • コアスキャンエンジン (docs/js/skillspector-engine.js): Pythonの nodes/analyzers/ に対応する、翻訳された静的解析ルールのみを含みます。
   • 独立したリポジトリフィルター (docs/js/repo-filter.js): カスタムの非スキルファイルフィルタリング（README.md, CHANGELOG.md, .git/ など）を、翻訳されたスキャンコードから分離して保持します。
   • GitHub Fetcher (docs/js/github-fetcher.js): URL解析、ツリー展開、バッチダウンロードを処理します。

3. マルチスキルリポジトリのサポート:

   • src/skillspector/multi_skill.py をミラーリングし、リポジトリ内のすべてのネストされたスキル（resources/skills/*.md, skills/*.md, agents/*.md）を発見できるようにする必要があります。

4. ライセンスとバージョンのパリティ:

   • アップストリームのPython版SkillSpectorリリースと一致する正確なバージョン番号（vX.Y.Z）を保持します。
   • 未編集のアップストリーム LICENSE（Apache 2.0）を保持します。

---

📋 段階的な移植ワークフロー

フェーズ1: ルールとAST分析の抽出

1. アップストリームの src/skillspector/nodes/analyzers/ にある新しいアナライザールールを検査します：
   • pattern_defaults.py（ルールID: P1-P8, E1-E5, PE1-PE3, SC1-SC7, EA1-EA4, OH1-OH3, MP1-MP3, TM1-TM4, RA1-RA2, TR1-TR3, MCP1）。
2. 新しいPython正規表現とASTチェックを、docs/js/skillspector-engine.js 内のJavaScript RegExp パターンに変換します。
3. カテゴリリスト、ルール説明、説明、修正ガイドを更新します。

フェーズ2: GitHub Fetcher とツリー展開

1. docs/js/github-fetcher.js が https://api.github.com/repos/{owner}/{repo}/git/trees/{branch}?recursive=1 を介して再帰的なツリー構造を取得できることを確認します。
2. ファイル取得を小さな任意の制限で制限しないでください（大規模なマルチスキルリポジトリをサポートするために、最大250ファイルまでの高いしきい値を使用してください）。
3. ライブUI進捗コールバック（onProgress(current, total, filename)）を使用して、並列バッチフェッチ（例: 1バッチあたり10ファイル）を実行します。

フェーズ3: マルチスキル検出エンジン

1. skillspector-engine.js に discoverSkills(filesMap) を実装します。
2. リポジトリ内のすべての .md ファイルについて、MarkdownフロントマターYAML（--- name: ... description: ... ---）を解析します。
3. index.html にマルチスキルセレクターバーをレンダリングし、ユーザーが個別に発見されたスキルごとに結果をフィルタリングしたり、リポジトリ全体のコンテキストを検査したりできるようにします。

フェーズ4: 独立したリポジトリファイルフィルタリング

1. docs/js/repo-filter.js をコアスキャンエンジンから完全に分離した状態に保ちます。
2. index.html にUIチェックボックスを提供します：
   • 標準リポジトリドキュメントを省略（README, CHANGELOG, LICENSE）
   • システムメタデータを省略（.git/, .github/, ドットファイル）
3. 省略されたファイルを検査台帳に skipped アイテムとして明示的な理由とともに記録します。

フェーズ5: GitHub Pages パッケージング（docs/）

1. すべての静的Webサイトアセットが 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. server.py がデフォルトで docs/ ディレクトリを提供することを確認します。

---

🧪 検証チェックリスト

• python3 server.py 8090 を実行すると、docs/ から正常に起動し、提供されます。
• マルチスキルリポジトリ（例: Bhanunamikaze/Agentic-SEO-Skill）をスキャンすると、すべてのネストされたスキルが発見されます。
• ライトテーマがデフォルトで設定されています。ダークテーマのトグルが機能し、localStorage に保持されます。
• SEOエンドポイント（/sitemap.xml、/robots.txt、/CNAME）が 200 OK を返します。
• SARIF 2.1.0、JSON、Markdownのエクスポート機能が正常に動作します。
• 未編集のルート LICENSE ファイルがそのまま残っています。