@aramassa/ai-rules 0.1.2 → 0.1.6

package/artifact/chatmodes/Bug Reproduce.md

@@ -0,0 +1,296 @@
+---
+description: "Advanced chatmode for GitHub Issue bug reproduction and investigation.\nProvides automated bug reproduction process starting from GitHub Issue URL input.\nAnalyzes issue content, generates investigation plans, executes automated code analysis, and posts results back to the Issue.\n"
+type: chatmode
+chatmode: bug-reproduce
+tools:
+   - changes
+   - edit
+   - runNotebooks
+   - search
+   - new
+   - runCommands
+   - runTasks
+   - usages
+   - vscodeAPI
+   - problems
+   - testFailure
+   - openSimpleBrowser
+   - fetch
+   - githubRepo
+   - extensions
+   - todos
+   - add_issue_comment
+   - create_issue
+   - get_commit
+   - get_file_contents
+   - get_issue
+   - get_issue_comments
+   - get_pull_request
+   - get_pull_request_diff
+   - get_pull_request_files
+   - list_commits
+   - list_pull_requests
+   - search_code
+   - search_issues
+   - search_repositories
+   - update_issue
+---
+
+# Bug Reproduce Investigation Assistant
+
+GitHub Issue のバグ再現・調査から修正提案まで一貫したプロセスを提供します。
+
+## 機能概要
+
+このチャットモードは、GitHub Issue URL を受け取り、バグの根本原因を特定し、修正提案を作成するための包括的な調査プロセスを自動化します。
+
+### 主要機能
+
+1. **GitHub Issue URL の自動解析**
+2. **Issue 内容の構造化分析**
+3. **コードベース調査計画の生成**
+4. **AI による自動調査の実行**
+5. **調査結果の Issue への自動投稿**
+6. **修正提案の Issue 本文追記**
+
+## 使用方法
+
+### ステップ 1: Issue URL の入力
+
+GitHub Issue の URL を入力してください：
+
+```
+https://github.com/owner/repo/issues/123
+```
+
+または、Issue 番号のみでも可能です（現在のリポジトリの場合）：
+
+```
+#123
+```
+
+### ステップ 2: 自動分析開始
+
+Issue URL を受け取ったら、以下の処理を自動実行します：
+
+#### 📋 Issue 情報の取得・解析
+
+- Issue のタイトル、説明、コメントを取得
+- バグ再現テンプレートからの構造化情報抽出
+- 再現手順、期待される動作、実際の動作の特定
+- 環境情報（OS、ブラウザ、バージョン等）の整理
+
+#### 🔍 調査計画の自動生成
+
+**AI 実行可能タスク：**
+- 関連するコードファイルの特定
+- エラーメッセージの検索
+- 類似 Issue・PR の検索
+- 最近のコミット履歴の確認
+- 関連する依存関係の調査
+
+**人間実行タスク：**
+- ローカル環境での再現確認
+- 特定ブラウザ・OS での動作確認
+- ネットワーク環境固有の問題確認
+- 外部 API との連携テスト
+
+#### 📊 自動調査の実行
+
+1. **コードベース検索**
+   - エラーメッセージのパターンマッチング
+   - 関連する関数・メソッドの特定
+   - エラーハンドリング箇所の分析
+
+2. **履歴調査**
+   - 最近の変更コミットの確認
+   - 関連する PR の調査
+   - 既知の問題との関連性チェック
+
+3. **パターン分析**
+   - 類似バグの調査
+   - 過去の修正方法の参照
+   - 回帰の可能性チェック
+
+### ステップ 3: 結果の報告
+
+#### 🎯 調査結果の構造化
+
+**発見事項：**
+- 根本原因の特定
+- 影響範囲の分析
+- 関連するコード箇所の特定
+
+**修正提案：**
+- 具体的な修正方法
+- 影響度評価
+- テスト方法の提案
+
+**追加推奨事項：**
+- 再発防止策
+- 関連する改善提案
+- ドキュメント更新の必要性
+
+#### 📝 Issue への自動投稿
+
+※ 元のIssue内容に以下の内容を追記します。
+
+**調査結果コメント：**
+```markdown
+
+----
+
+## 🔍 自動調査結果
+
+### 発見事項
+- **根本原因**: [具体的な原因]
+- **影響範囲**: [影響を受けるファイル・機能]
+- **関連コード**: [src/example.ts:45-67]
+
+### 修正提案
+1. **即座対応**: [緊急修正案]
+2. **根本解決**: [恒久的な解決策]
+
+### 人間による確認が必要な項目
+- [ ] ローカル環境での再現確認
+- [ ] 修正案の動作テスト
+- [ ] エッジケースの検証
+
+---
+*この調査結果は AI によって自動生成されました*
+```
+
+**Issue 本文への修正提案追記：**
+```markdown
+---
+
+## 🤖 AI 調査・修正提案
+
+### 修正計画
+- **対象ファイル**: [修正対象のファイル一覧]
+- **修正方針**: [具体的な修正アプローチ]
+- **テスト戦略**: [検証方法]
+
+### 実装スケジュール
+1. **Phase 1**: 緊急修正（影響最小化）
+2. **Phase 2**: 根本的解決
+3. **Phase 3**: 再発防止策の実装
+
+*AI による自動分析結果 - [生成日時]*
+```
+
+## エラーハンドリング
+
+### 無効な Issue URL
+
+```
+❌ エラー: 無効な GitHub Issue URL です
+有効な形式: https://github.com/owner/repo/issues/123
+または: #123 (現在のリポジトリの場合)
+```
+
+### Issue へのアクセス権限なし
+
+```
+❌ エラー: 指定された Issue にアクセスできません
+- Issue が存在しない可能性があります
+- プライベートリポジトリへのアクセス権限がない可能性があります
+```
+
+### API レート制限
+
+```
+⚠️ 警告: GitHub API のレート制限に達しました
+しばらく待ってから再度お試しください
+```
+
+## 調査カバレッジ
+
+### 自動調査可能な範囲
+
+✅ **完全自動化**
+- コードパターンの検索・分析
+- エラーメッセージの出力箇所特定
+- 関連 Issue・PR の検索
+- コミット履歴の分析
+- 依存関係の確認
+
+⚠️ **半自動化（人間確認必要）**
+- 環境固有の問題
+- ブラウザ・OS 依存の動作
+- ネットワーク関連の問題
+- パフォーマンス問題
+
+❌ **手動調査必須**
+- 実際の再現確認
+- ユーザビリティの評価
+- セキュリティ面の検証
+- 外部システムとの連携確認
+
+## ベストプラクティス
+
+### Issue URL 入力時
+
+- **完全な URL を推奨**: `https://github.com/owner/repo/issues/123`
+- **Issue 番号のみも可**: `#123` (現在のリポジトリの場合)
+- **複数 Issue 同時調査**: カンマ区切りで複数 URL を指定可能
+
+### 調査精度向上のために
+
+- **詳細な再現手順**: Issue に具体的な手順が記載されているほど分析精度が向上
+- **エラーメッセージの全文**: 部分的でなく完全なエラーメッセージが重要
+- **環境情報の明記**: OS、ブラウザ、バージョン情報が分析に役立つ
+
+### 修正提案の活用
+
+- **段階的実装**: 緊急性に応じた優先度付けで実装
+- **テスト実行**: 提案されたテスト方法での検証を推奨
+- **フィードバック**: 調査結果の精度向上のためのコメント歓迎
+
+## セキュリティ・プライバシー配慮
+
+### アクセス権限
+
+- 公開リポジトリの Issue のみ対象
+- プライベートリポジトリは認証情報に基づくアクセス
+- 機密情報の取り扱いに注意
+
+### データ処理
+
+- Issue の内容は調査目的のみで使用
+- 調査結果は該当 Issue にのみ投稿
+- 個人情報は匿名化して処理
+
+## 制限事項
+
+### 技術的制限
+
+- **GitHub API レート制限**: 大量の Issue 調査時は時間制約あり
+- **コードベース規模**: 非常に大きなリポジトリでは調査時間が長期化
+- **言語サポート**: 主要プログラミング言語に最適化
+
+### 調査範囲の制限
+
+- **外部依存関係**: サードパーティライブラリの詳細分析は限定的
+- **環境固有問題**: 特定の環境でのみ発生する問題は推測による分析
+- **実時間動作**: アプリケーションの実行時動作は静的分析のみ
+
+## 今後の機能拡張
+
+### 予定機能
+
+- **PR 自動作成**: 修正提案から直接 Pull Request 作成
+- **テンプレート学習**: プロジェクト固有の調査パターン学習
+- **メトリクス収集**: バグ修正効率の測定・改善
+
+### 連携機能
+
+- **CI/CD 統合**: テスト結果との連携
+- **チーム通知**: Slack・Discord への結果通知
+- **プロジェクト管理**: GitHub Projects との連携
+
+---
+
+**使用準備完了** ✅
+
+GitHub Issue URL を入力して、バグ調査を開始してください！

package/artifact/chatmodes/Planning.md

@@ -13,6 +13,7 @@ tools:
   - "get_code_scanning_alert"
   - "get_discussion"
   - "get_discussion_comments"
+  - "get_issue"
   - "get_issue_comments"
   - "get_pull_request"
   - "get_pull_request_diff"

package/artifact/instructions/rules/development/chrome-extension-general.md

@@ -0,0 +1,121 @@
+---
+type: development-rules
+category: chrome-extension
+focus: architecture-security
+language: javascript
+applyTo: "**/*"
+---
+
+# Chrome Extension Manifest V3 - General Architecture & Security
+
+## 概要
+
+Chrome 拡張機能開発における Manifest V3 (MV3) の全般的なアーキテクチャ原則とセキュリティ指針を定義します。
+MV3 は単なるバージョンアップではなく、セキュリティ、パフォーマンス、プライバシーを根本的に強化する
+アーキテクチャの転換を意味します。
+
+## 1. Manifest V3 アーキテクチャ原則
+
+### 1.1 基本設計思想
+
+- **イベント駆動型アーキテクチャ**: 永続的なバックグラウンドページから短命な Service Worker への移行
+- **宣言的セキュリティモデル**: 動的なコード実行から事前定義されたルールベースへの移行
+- **最小権限の原則**: 必要最小限の権限のみを要求し、明確に宣言する
+- **関心の分離**: 各コンポーネントが明確な役割を持つ構造化されたアーキテクチャ
+
+### 1.2 コアコンポーネント
+
+Chrome Extension MV3 アーキテクチャは4つの主要コンポーネントで構成されます：
+
+- **Service Worker (Background)**: イベント駆動型のバックグラウンド処理を担当し、永続的な状態を持たない短命な実行環境
+- **Content Scripts**: ウェブページの DOM に直接アクセスし、ページコンテンツとの相互作用を処理
+- **Action Popup**: ユーザーインターフェースレイヤーとして、拡張機能アイコンクリック時の UI を提供
+- **Offscreen Documents**: Service Worker から DOM 操作や特殊 API アクセスが必要な場合のヘルパー環境
+
+これらのコンポーネントは明確に分離された実行コンテキストを持ち、メッセージパッシングによって連携します。
+
+## 2. セキュリティベストプラクティス
+
+### 2.1 Content Security Policy (CSP)
+
+Manifest V3 では Content Security Policy の設定が必須であり、拡張機能のセキュリティを大幅に強化します。
+
+**extension_pages**: 拡張機能内のページ（popup、options等）に適用される CSP です。script-src 'self' でパッケージ内のスクリプトのみを許可し、object-src 'self' で安全なオブジェクト読み込みを制限し、img-src には 'self' data: https: で画像ソースを限定します。
+
+**sandbox**: サンドボックス環境での CSP 設定です。sandbox allow-scripts で基本的なスクリプト実行を許可し、必要に応じて 'unsafe-eval' や 'unsafe-inline' を追加しますが、セキュリティリスクを十分に検討します。
+
+manifest.json の content_security_policy セクションで両方の設定を明示的に定義し、拡張機能の実行環境を適切に制限します。
+
+### 2.2 セキュリティ原則
+
+Manifest V3 では厳格なセキュリティ原則の遵守が必須です。
+
+**リモートコードの禁止**: すべての JavaScript コードは拡張機能パッケージに含める必要があり、外部からの動的コード読み込みは許可されません。CDN からのライブラリ読み込みも禁止されているため、必要なライブラリはパッケージにバンドルします。
+
+**eval() の回避**: eval()、Function コンストラクタ、setTimeout/setInterval の文字列実行など、動的コード実行は禁止されています。静的な実装で代替手段を検討します。
+
+**入力検証**: ユーザー入力とウェブページからのデータは信頼せず、適切に検証・サニタイゼーションを実行します。XSS 攻撃や インジェクション攻撃を防ぐため、HTML エスケープや URL 検証を徹底します。
+
+**権限の最小化**: 必要最小限の権限のみを要求し、host_permissions は具体的なドメインに限定します。広範囲な権限（<all_urls> 等）は避け、機能に応じて段階的に権限を要求します。
+
+InputValidator クラスでは URL の妥当性検証（プロトコル確認、URL 形式チェック）、HTML のサニタイゼーション（textContent を使用したエスケープ）、メッセージデータの検証（型チェック、必須フィールド確認）を統一的に実装します。
+
+## 3. 開発ワークフロー
+
+### 3.1 開発環境セットアップ
+
+Chrome 拡張機能開発では適切なビルドツールと依存関係の設定が重要です。
+
+**プロジェクト初期化**: npm init -y でプロジェクトを初期化し、package.json を作成します。
+
+**必須開発依存関係**: webpack と webpack-cli でモジュールバンドリングを設定し、copy-webpack-plugin で静的ファイル（manifest.json、HTML、アイコン等）のコピーを自動化します。eslint でコード品質を管理し、jest でユニットテスト、puppeteer で E2E テストを実行します。
+
+**webpack 設定**: entry ポイントで各コンポーネント（background、content、popup、offscreen）を個別に定義し、output で dist ディレクトリに出力します。CopyPlugin で必要な静的ファイルを適切な場所にコピーし、開発用とプロダクション用の設定を分離します。
+
+webpack.config.js では mode で開発・本番を切り替え、各 JavaScript ファイルの依存関係を解決してバンドルします。プラグイン設定で manifest.json、HTML ファイル、アイコンディレクトリを適切にコピーします。
+
+### 3.2 ビルドスクリプト
+
+package.json の scripts セクションで開発・ビルド・テスト・デプロイのワークフローを定義します。
+
+**build**: webpack でプロダクションモードのビルドを実行し、最適化されたファイルを dist ディレクトリに出力します。
+
+**dev**: webpack の watch モードで開発時の自動リビルドを有効化し、ファイル変更時に即座に再ビルドを実行します。
+
+**test**: jest でユニットテストを実行し、コードの品質と動作を確認します。
+
+**lint**: eslint で src ディレクトリ下の JavaScript ファイルの静的解析を実行し、コーディング規約の遵守を確認します。
+
+**pack**: ビルド後に dist ディレクトリで zip 圧縮を実行し、Chrome Web Store 提出用のパッケージファイル（extension.zip）を作成します。
+
+これらのスクリプトにより、開発からデプロイまでの一連の作業を自動化し、効率的な開発ワークフローを確立します。
+
+## 4. デバッグとトラブルシューティング
+
+### 4.1 一般的な問題と解決策
+
+**Service Worker の非アクティブ化**
+- 問題: Service Worker が予期せず終了する
+- 解決: イベントハンドラーの適切な設定、非同期処理の Promise 管理
+
+**メッセージパッシングエラー**
+- 問題: `Error: Could not establish connection. Receiving end does not exist.`
+- 解決: 送信先の存在確認、エラーハンドリングの実装
+
+**権限エラー**
+- 問題: 必要な権限が不足している
+- 解決: manifest.json の権限設定見直し、動的権限要求の実装
+
+## まとめ
+
+Manifest V3 への移行は、Chrome 拡張機能開発における重要な転換点です。このガイドで示したパターンとベストプラクティスに従うことで、セキュアで高性能、かつ将来性のある拡張機能を開発できます。
+
+### 重要なポイント
+
+1. **イベント駆動型設計**: Service Worker の短命な性質を受け入れ、適切なイベントハンドリングを実装する
+2. **宣言的セキュリティ**: declarativeNetRequest API を活用し、セキュアなネットワーク制御を実現する  
+3. **適切な分離**: 各コンポーネントの役割を明確にし、メッセージパッシングで連携させる
+4. **最小権限**: 必要最小限の権限のみを要求し、透明性を確保する
+5. **テスト駆動**: 包括的なテスト戦略で品質を保証する
+
+これらの原則に従って開発することで、ユーザーに安全で快適な拡張機能体験を提供できます。

package/artifact/instructions/rules/development/chrome-extension-html.md

@@ -0,0 +1,157 @@
+---
+type: development-rules
+category: chrome-extension
+focus: html-structure
+language: html
+applyTo: "**/*.html"
+---
+
+# Chrome Extension Manifest V3 - HTML Structure Guidelines
+
+## Popup HTML 構造
+
+### 基本構造
+
+Chrome 拡張機能の popup.html は軽量で高速な UI 体験を提供する必要があります。
+
+**HTML5 基本構造**: 
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>拡張機能名</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="container">
+    <!-- UI コンテンツ -->
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
+```
+
+**寸法制限**: ポップアップは最大 800px × 600px のサイズ制限があり、適切なレスポンシブデザインが必要です。
+
+**読み込み最適化**: CSS と JavaScript は外部ファイルとして分離し、インライン記述は避けます。CSP の制約により、インラインスクリプトとスタイルは許可されません。
+
+### UI/UX 設計原則
+
+**シンプルな構造**: 複雑なレイアウトは避け、ユーザーが直感的に操作できるシンプルな構造にします。
+
+**高速レンダリング**: 重いアニメーションや大量の DOM 要素は避け、ポップアップの表示速度を優先します。
+
+**アクセシビリティ**: 適切な semantic HTML、ARIA 属性、キーボードナビゲーションをサポートします。
+
+## Options Page 構造
+
+### 設定ページの実装
+
+Options Page は拡張機能の詳細設定を提供する専用ページです。
+
+**manifest.json 設定**:
+```json
+{
+  "options_page": "options.html",
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  }
+}
+```
+
+**HTML 構造**:
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>拡張機能設定</title>
+  <link rel="stylesheet" href="options.css">
+</head>
+<body>
+  <div class="settings-container">
+    <h1>設定</h1>
+    <form id="settingsForm">
+      <!-- 設定項目 -->
+    </form>
+  </div>
+  <script src="options.js"></script>
+</body>
+</html>
+```
+
+**設定の永続化**: フォームデータは chrome.storage.sync を使用してデバイス間で同期し、設定の一貫性を保ちます。
+
+## Offscreen Document 構造
+
+### HTML 実装
+
+Offscreen ドキュメントは通常の HTML ファイルとして実装され、DOM API や特殊ブラウザ API にアクセスします。
+
+**HTML 構造**: 基本的な HTML5 ドキュメント構造で、必要な JavaScript ファイルを読み込みます。UI は不要なため、視覚的要素は最小限に抑えます。
+
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Offscreen Document</title>
+</head>
+<body>
+  <!-- 視覚的要素は最小限 -->
+  <div id="workspace" style="display: none;"></div>
+  <script src="offscreen.js"></script>
+</body>
+</html>
+```
+
+**メッセージ受信**: chrome.runtime.onMessage.addListener でメッセージを受信し、target フィールドが 'offscreen' の場合のみ処理します。非同期処理では return true を設定して適切なレスポンス管理を行います。
+
+**DOM 操作**: DOMParser を使用した HTML パース、Document インターフェースでの要素抽出、各種 DOM API の活用が可能です。Service Worker では実行できない DOM 操作をここで実行します。
+
+**特殊 API**: navigator.clipboard でクリップボード操作、Audio API で音声再生、その他ブラウザ固有 API の実行が可能です。
+
+**エラーハンドリング**: すべての操作は try-catch でラップし、エラー発生時は適切なエラーレスポンスを Service Worker に返します。
+
+OffscreenDocument クラスでは各種操作（HTML パース、クリップボード、音声再生等）を統一的なインターフェースで提供し、Service Worker からの要求に応じて適切な処理を実行します。
+
+## HTML セキュリティベストプラクティス
+
+### Content Security Policy (CSP) 遵守
+
+**インラインスクリプト禁止**: `<script>` タグ内でのインラインコードは CSP により禁止されているため、すべての JavaScript は外部ファイルに記述します。
+
+**インラインスタイル禁止**: `style` 属性でのインラインスタイルも禁止されているため、すべての CSS は外部ファイルに記述します。
+
+**外部リソース制限**: 外部サイトからの画像、スクリプト、スタイルシートの読み込みは制限されているため、必要なリソースは拡張機能パッケージに含めます。
+
+### XSS 対策
+
+**動的コンテンツの安全な挿入**: ユーザー入力や外部データを HTML に挿入する際は、textContent や innerText を使用してエスケープし、innerHTML の使用は避けます。
+
+**URL 検証**: 外部リンクや画像 URL は適切に検証し、信頼できるドメインのみを許可します。
+
+**データ検証**: フォーム入力やメッセージデータは適切に検証・サニタイゼーションを実行します。
+
+## パフォーマンス最適化
+
+### 軽量化
+
+**最小限の DOM**: 不要な HTML 要素は削除し、シンプルな構造を保ちます。
+
+**CSS 最適化**: 使用していない CSS ルールを削除し、ファイルサイズを最小化します。
+
+**JavaScript 分離**: 機能ごとに JavaScript ファイルを分離し、必要な部分のみを読み込みます。
+
+### 読み込み最適化
+
+**リソース並列読み込み**: CSS と JavaScript の読み込みを並列化し、ページ表示速度を向上させます。
+
+**画像最適化**: アイコンや画像は適切なサイズと形式で最適化し、読み込み時間を短縮します。
+
+**キャッシュ活用**: 静的リソースは適切にキャッシュされるよう設定し、再読み込み時間を短縮します。