---
name: managing-frontend-knowledge
description: フロントエンド技術のナレッジベース管理。URLや記事から技術情報を要約・蓄積し、CSS、JavaScript、パフォーマンス、アクセシビリティなどの質問に対してナレッジベースを参照して回答します。ナレッジ追加時、技術的な質問への回答時に使用してください。
---

# フロントエンドナレッジ管理

## 概要

フロントエンド技術のナレッジベースを管理するスキル。2つの主要機能を提供:

1. **収集・蓄積**: URLや記事からフロントエンド技術を要約してナレッジベースに追加
2. **参照・回答**: 蓄積されたナレッジベースから質問に関連する情報を検索して回答

## 使用場面

### 収集モード

- URLが渡された場合: 「この記事を保存して」
- 記事内容の追加: 「ナレッジに追加して」
- ナレッジ整理: 「ナレッジを整理して」

### 参照モード

- フロントエンド技術の質問
- CSS、JavaScript、パフォーマンス、アクセシビリティに関する質問
- 蓄積されたナレッジに基づく回答が必要な場合

---

# パート1: ナレッジ収集・蓄積

## 実行モード

### 1. 追加モード（デフォルト）

- URLが渡された場合
- 「この記事を保存して」「ナレッジに追加して」等の依頼

### 2. 整理モード

- 「ナレッジを整理して」「重複を確認して」等の依頼
- 特定カテゴリの整理: 「css-layout.md を整理して」

## 収集フロー

### Step 1: コンテンツ取得

URLが渡された場合は `WebFetch` で内容を取得。

### Step 2: 要約・構造化

**人間が直接参照できるデータ集**として、以下を意識:

- 専門用語には簡潔な説明を添える
- コード例は実際にコピペして使えるレベルに
- 「なぜこの方法が良いのか」の理由を明記
- ブラウザサポート状況は具体的に記載

以下のフォーマットで要約：

```markdown
## [テクニック名]

> 出典: [URL]
> 執筆日: [YYYY-MM-DD]（記事の公開日・更新日。不明な場合は「不明」）
> 追加日: [YYYY-MM-DD]

[1〜3文で概要を説明]

### コード例

\```css
/* または js/html */
[実用的なコード例]
\```

### ユースケース
- [具体的な使用場面1]
- [具体的な使用場面2]

### 注意点
- [ブラウザサポート、制限事項など]

---
```

### Step 3: カテゴリ判定

以下のカテゴリから最適なものを選択：

| カテゴリ | ファイル | 対象 | キーワード |
|---------|---------|------|-----------|
| レイアウト | `css-layout.md` | Grid, Flexbox, 配置, Container Queries | レイアウト, 幅, 高さ, 中央寄せ |
| アニメーション | `css-animation.md` | Transitions, Keyframes, View Transitions | 動き, アニメーション, 遷移 |
| フルブリードレイアウト | `css-full-bleed-layout.md` | フルブリード, エッジツーエッジ | 全幅, エッジ |
| スコープ | `css-scope.md`, `css-scope-basics.md` | @scope, スコープ | スコープ, カプセル化 |
| ビューポート | `css-viewport-size.md` | ビューポート単位, dvh, svh | ビューポート, 単位 |
| モダンCSS | `css-modern.md` | @layer, ネスティング, 新機能 | モダン, 新機能, 2024 |
| HTML | `html-modern.md` | モダンHTML, セマンティック | HTML, マークアップ |
| JavaScript | `javascript-patterns.md` | DOM, イベント, 非同期 | JS, DOM, イベント |
| JSアニメーション | `js-animation.md` | JavaScript アニメーション | JS アニメーション |
| パフォーマンス | `performance.md` | 最適化, Core Web Vitals | 速度, 最適化, LCP |
| アクセシビリティ | `accessibility-link-underline.md` | リンク下線, a11y | a11y, アクセシビリティ |
| TypeScript | `typescript.md` | TypeScript パターン | TS, 型 |
| ブラウザ回避策 | `browser-workarounds.md` | ブラウザバグ, 回避策 | バグ, 回避 |

### Step 4: ファイル更新

1. `~/.claude/skills/managing-frontend-knowledge/[カテゴリ].md` を Read
2. 既存コンテンツの末尾に新しいテクニックを追加
3. ファイルが存在しない場合は新規作成

### Step 5: 確認

追加完了後、以下を報告：

- 追加したテクニック名
- 保存先カテゴリ
- 要約内容のプレビュー

## 複数テクニックを含む記事の場合

1つの記事に複数のテクニックがある場合：

- 各テクニックを個別エントリとして追加
- 同じ出典URLを記載
- 関連がある場合は相互参照を記載

## 複数カテゴリにまたがる記事の場合

記事の内容が複数のカテゴリに関連する場合は、**無理に1つのファイルに押し込めない**。

### 分割の判断基準

| 状況 | 対応 |
|------|------|
| 主題が1つで、他カテゴリは補足 | 主カテゴリに追加、他は参照リンクのみ |
| 独立した複数のトピックを含む | 各カテゴリに分割して追加 |
| カテゴリ間で密接に関連 | 各カテゴリに追加し、相互参照を記載 |

### 分割時のルール

1. **各ファイルで自己完結させる**: そのファイルだけ読んでも理解できるように
2. **重複は最小限に**: 共通部分は概要のみ、詳細は適切なカテゴリで
3. **相互参照を明記**: 関連ナレッジへのリンクを必ず記載

### 分割例

例: 「アクセシビリティを考慮したアニメーション実装」という記事

```
accessibility-link-underline.md:
  - prefers-reduced-motion の必要性と判定方法
  - 関連: css-animation.md の「モーション軽減対応」

css-animation.md:
  - モーション軽減対応のCSS実装パターン
  - 関連: accessibility-link-underline.md の「prefers-reduced-motion」
```

### 報告フォーマット

```
✅ ナレッジを追加しました（2カテゴリに分割）

📁 accessibility-link-underline.md
   📝 prefers-reduced-motion の考慮

📁 css-animation.md
   📝 モーション軽減対応パターン

🔗 相互参照を設定済み
```

## 類似ナレッジの検出と統合（追加時）

追加前に既存ナレッジとの類似性を確認：

### チェック項目

1. **同一URL**: 既に存在する場合は更新として扱う
2. **類似テクニック**: 同じ概念・機能を扱っている場合

### 類似が見つかった場合のアクション

- **矛盾なし**: 既存エントリに統合して強化
- **アップデート**: 新情報で既存を更新（旧情報は「以前の方法」として残す場合あり）
- **矛盾あり**: 両論併記し、推奨を明示
- **別観点**: 別エントリとして追加（相互参照を記載）

### 統合時の報告

```
🔄 類似ナレッジを検出・統合しました

既存: 「CSS Grid の基本」（執筆: 2023-06）
新規: 「Grid Layout 実践ガイド」（執筆: 2024-08）

→ 統合: 「CSS Grid レイアウト完全ガイド」として強化
  - 基本構文（既存）+ 実践パターン（新規）を統合
  - ブラウザサポート情報を最新化
```

## カテゴリが不明な場合

ユーザーに確認するか、最も近いカテゴリに追加。
新カテゴリが必要な場合は `SKILL.md` のカテゴリ一覧も更新。

## 出力例（追加モード）

```
✅ ナレッジを追加しました

📁 カテゴリ: css-layout.md
📝 テクニック: Container Queries の実践的パターン
🔗 出典: https://example.com/container-queries

### 追加内容プレビュー:
> コンテナクエリを使用してコンポーネント単位の
> レスポンシブデザインを実現する方法...
```

---

## 整理モード

「ナレッジを整理して」「重複チェックして」等で発動。

### 整理タスク

#### 1. 類似ナレッジの統合

**統合プロセス:**

1. 類似エントリを検出したら内容を比較
2. 矛盾がないか確認（矛盾がある場合は執筆日が新しい方を優先、または両論併記）
3. 問題なければ1つの強いナレッジに統合

**統合の判断基準:**

- **同一テクニック**: 完全統合（より詳細・最新の情報を残す）
- **アップデート関係**: 新情報で上書き、旧情報は「以前の方法」として注記
- **補完関係**: 両方の知見を合わせてより包括的なエントリに
- **矛盾あり**: 両論併記し、どちらが推奨かを明記

**統合後のフォーマット:**

```markdown
## [テクニック名]

> 出典: [URL1], [URL2]（複数の場合はカンマ区切り）
> 執筆日: [最新の執筆日]（統合元: [日付1], [日付2]）
> 追加日: [最初の追加日] / 統合日: [YYYY-MM-DD]

[統合された包括的な説明]
```

#### 2. 古い情報の更新

- 執筆日が2年以上前のエントリを優先確認
- ブラウザサポートが変わったもの
- より良い方法が登場したもの
- 非推奨になったもの（削除 or 注記追加）

#### 3. カテゴリの再編成

- 肥大化したカテゴリの分割提案
- 誤分類の移動
- 関連テクニックの相互参照追加

#### 4. フォーマット統一

- コード例の書式統一
- セクション構造の統一
- 不足情報（ユースケース、注意点）の補完提案

### 整理フロー

1. 対象カテゴリファイルを Read
2. 以下を分析:
   - 重複エントリ
   - 古い情報（執筆日から2年以上経過、または執筆日不明で追加日から1年以上経過）
   - フォーマット不統一
   - 肥大化（20エントリ以上）
3. 改善提案をリスト化
4. ユーザー承認後に実行

### 出力例（整理モード）

```
📊 css-layout.md の分析結果

エントリ数: 15件
最終更新: 2025-01-15

### 検出された課題

1. 🔄 重複の可能性
   - 「Flexbox gap」と「Flexbox の gap プロパティ」が類似

2. ⚠️ 古い情報
   - 「IE対応のGrid fallback」（執筆: 2021-03）
     → IE サポート終了済み、削除を推奨

3. 📝 フォーマット不統一
   - 3件のエントリに「ユースケース」セクションがない

### 推奨アクション
- [ ] 重複を統合する
- [ ] 古い情報を削除する
- [ ] フォーマットを統一する

実行しますか？
```

### 定期整理の推奨

以下のタイミングで整理を実行:

- カテゴリが20エントリを超えたとき
- 3ヶ月に1回の定期メンテナンス
- 大きな仕様変更があったとき（新ブラウザ機能など）

---

# パート2: ナレッジ参照・回答

## 使い方

1. ユーザーの質問からキーワードを抽出
2. 上記カテゴリ一覧から該当するファイルを特定
3. `~/.claude/skills/managing-frontend-knowledge/` 内の該当ファイルを Read
4. 蓄積された知識を基に回答

## 回答フォーマット

```markdown
## [質問に対する回答]

[説明]

### コード例

\```css
/* または js/html */
\```

### ユースケース
- [具体的な使用場面]

### 参考
- [出典URL（あれば）]
```

## 該当カテゴリがない場合

1. 一般的な知識で回答
2. 「ナレッジベースに該当情報がありません」と伝える
3. 必要に応じてナレッジ収集機能での追加を提案

## 複数カテゴリにまたがる場合

関連する複数のファイルを Read して総合的に回答する。
例: 「スクロールアニメーション」→ `css-animation.md` + `performance.md`

## 注意事項

- カテゴリファイルが存在しない場合はエラーにせず、ある情報で回答
- 出典URLがある場合は必ず記載
- コード例は実用的なものを優先