Claudeにライブラリの使い方をSerena経由でレクチャーしつつTokenも最適化する

## Jest Testing Framework
- **Configuration Reference**: Comprehensive Jest options documented in Serena memory `jest_configuration_reference.md`
- **Official Documentation**: <https://raw.githubusercontent.com/jestjs/jest/refs/heads/main/docs/Configuration.md>
- **Multi-project Setup**: Use `projects` array for backend, frontend, Vue, integration, and E2E test separation
- **TypeScript Integration**: Requires `ts-jest` preset with proper transform configuration
- **Vue Testing**: Requires `jsdom` environment with `@vue/vue3-jest` transformer for `.vue` files

__Token消費量の詳細分析__
__1. WebFetch処理でのToken消費__
入力Token: リクエスト内容 + URL + プロンプト ≈ 100-200トークン
処理Token: サイト内容のAI要約処理 ≈ 2,000-10,000トークン
出力Token: 要約されたコンテンツ ≈ 500-2,000トークン
合計: 約2,600-12,200トークン/サイト

__2. Serena Memory書き込みでのToken消費__
入力Token: メモリ書き込みコマンド + コンテンツ ≈ 500-2,000トークン
出力Token: 確認レスポンス ≈ 50-100トークン
合計: 約550-2,100トークン/メモリファイル

__3. 実際の例（今セッションで実行済み）__
Jest設定リファレンス:
- WebFetch: 約3,500トークン
- Memory書き込み: 約800トークン
- 合計: **約4,300トークン**
Jestトラブルシューティングガイド:
- WebFetch: 約2,800トークン
- Memory書き込み: 約1,200トークン
- 合計: **約4,000トークン**

理想的サイズ:
核となるリファレンス: 2-5KB (500-1,250トークン)
トラブルシューティング: 3-8KB (750-2,000トークン)
包括的ガイド: 8-15KB (2,000-3,750トークン)

__軽量パターン（3-4サイト）__:
- 基本リファレンス × 3サイト: 12,000-15,000トークン
- メモリ書き込み: 2,000-3,000トークン
- 合計: 約14,000-18,000トークン
__標準パターン（5-7サイト）__:
- 技術リファレンス × 5サイト: 20,000-25,000トークン
- ライブラリドキュメント × 2サイト: 8,000-10,000トークン
- メモリ書き込み: 3,500-4,500トークン
- 合計: 約31,500-39,500トークン
__包括パターン（8-10サイト）__:
- フルスタック技術ドキュメント: 35,000-45,000トークン
- メモリ書き込み: 5,000-6,000トークン
- 合計: 約40,000-51,000トークン

    ### Auto-execution at Session Start
    The following commands MUST be executed automatically at the beginning of each session:

    ```bash
    # 1. Check existing knowledge
    mcp__serena__check_onboarding_performed
    mcp__serena__list_memories

    # 2. Project structure scan
    mcp__serena__list_dir({ relative_path: ".", recursive: false })
    mcp__serena__get_symbols_overview({ relative_path: "src" })

    # 3. Configuration files
    mcp__serena__find_file({ file_mask: "package.json", relative_path: "." })
    mcp__serena__find_file({ file_mask: "*.config.*", relative_path: "." })
    ```

  ## Serena Memory References
  Project-specific technical information is stored in Serena memories:
  - `symbol_patterns_updated.md` - Symbol search patterns and conventions
  - `package-scripts-config.md` - Development commands and Vite configuration

1. Jest設定リファレンス参照

Todo: "タグのテストケースがないので、作成から行う"

参照されたリファレンス:
// Vitest/Jest設定エラー発生時
Error: "Unknown option 'testTimeout'"
// 対応として実行
1. WebFetch("https://raw.githubusercontent.com/jestjs/jest/.../Configuration.md")
   → jest_configuration_reference.md 作成（約4,300 Token）
2. WebFetch("https://raw.githubusercontent.com/jestjs/jest/.../Troubleshooting.md")
   → jest_troubleshooting_guide.md 作成（約4,000 Token）

実際の活用:
- testTimeoutが正しい設定名であることを確認
- プロジェクトレベルでの設定方法を理解
- 結果: Jest設定を修正し、全テスト通過

2. Tagify実装時の参照（過去セッション - メモリから推測）

Todo: "タグ編集UIをTagifyライブラリで再構築"

参照されたリファレンス:
// tagify_official_documentation.md が存在することから
WebFetch("https://raw.githubusercontent.com/yairEO/tagify/.../README.md")
→ tagify_official_documentation.md

実際の活用例（CLAUDE.mdに記載）:
## Tagify Implementation Guidelines
- **Base Implementation**: Use sample scripts from the official Tagify documentation
- **Implementation Approach**: Follow official examples for initialization

#### B. Memory-First Strategy
- **Before Any Investigation**: Always check existing memories first using standardized protocol:
  ```markdown
  # 1. List all available memories
  mcp__serena__list_memories

  # 2. Check for topic-specific memories using pattern matching
  # Topic examples: "jest", "vue", "typescript", "vite", etc.
  mcp__serena__read_memory("[topic]_reference.md")  # if exists
  mcp__serena__read_memory("[topic]_troubleshooting_guide.md")  # if exists

  # 3. Only proceed with WebFetch if no relevant memory exists
  ```end
- **Memory Index Usage**: Check `_index.md` memory for quick overview of available references (200 tokens)
- **Conditional WebFetch**: Use WebFetch only when `mcp__serena__list_memories` doesn't contain relevant topic
- **Memory Creation**: Always save WebFetch results to memory using standardized naming convention
- **Memory Update**: Update existing memories when discovering new patterns or deprecated information

#### H. Reference Check Priority Protocol
- **MANDATORY Memory-First Check**: Always check Serena memories before WebFetch operations
- **Memory Naming Convention**: Use standardized naming for reference memories:
  - Library docs: `[library-name]_reference.md`
  - Troubleshooting guides: `[topic]_troubleshooting_guide.md`
  - Configuration specs: `[tool]_configuration_reference.md`
  - API specifications: `[service]_api_reference.md`
- **Token Optimization**: Memory reads (500-3,000 tokens) vs WebFetch (3,000-12,000 tokens) = 60-80% savings
- **Batch Reference Checks**: Use parallel memory reads for multiple related topics
- **Reference Update Strategy**: Only use WebFetch when memory doesn't exist, always save results to memory

#### I. Efficient Reference Lookup Implementation
- **Automatic Memory Check Triggers**: When user requests contain specific keywords, automatically execute memory check before any other operations:
  ```bash
  # Testing keywords: "test", "jest", "spec", "テスト", "エラー"
  if (userRequest.includes(testingKeywords)) {
    mcp__serena__read_memory("_index")  # Always check index first
    mcp__serena__read_memory("jest_configuration_reference")  # if exists
    mcp__serena__read_memory("jest_troubleshooting_guide")    # if exists
  }

  # Component keywords: "component", "vue", "コンポーネント", "template"  
  if (userRequest.includes(componentKeywords)) {
    mcp__serena__read_memory("component-template-system")
    mcp__serena__read_memory("implementation-architecture")
  }

  # Search keywords: "find", "search", "探す", "調べる", "確認"
  if (userRequest.includes(searchKeywords)) {
    mcp__serena__read_memory("symbol_patterns_updated")  # Always for searches
    mcp__serena__read_memory("search-exclusions")
  }
  ```end
- **Topic-Based Memory Filtering**: When user requests reference for a specific topic, execute standardized pattern:
  ```bash
  # Step 1: Index check (200 tokens) - MANDATORY for any reference request
  mcp__serena__read_memory("_index")

  # Step 2: Quick memory scan (100-150 tokens)  
  memories = await mcp__serena__list_memories()

  # Step 3: Pattern matching for relevant memories
  relevant = memories.filter(m => m.toLowerCase().includes(topic.toLowerCase()))

  # Step 4: Read existing memory if found (500-3000 tokens)
  if (relevant.length > 0) {
    return mcp__serena__read_memory(relevant[0])
  }

  # Step 5: WebFetch only if no memory exists (3000-12000 tokens)
  ```end
- **Batch Reference Processing**: For multiple related topics, use parallel memory reads to minimize total token consumption
- **Memory Staleness Check**: When referencing external documentation, note last update date in memory and refresh if older than 6 months

// メモリサマリーファイルの作成提案
  mcp__serena__write_memory("_index.md", `
  # Memory Index
  ## Testing
  - jest_configuration_reference: Jest設定オプション一覧
  - jest_troubleshooting_guide: Jest問題解決ガイド

  ## Libraries  
  - tagify_official_documentation: Tagify実装パターン
  - milkdown-configuration: Milkdownエディタ設定

  ## Architecture
  - implementation-architecture: システム構造
  - symbol_patterns_updated: コード検索パターン
  `);

  // 使用時（200 Tokenで全体像把握）
  mcp__serena__read_memory("_index.md");