---
name: managing-frontend-knowledge
description: フロントエンド技術（CSS、JavaScript、HTML、パフォーマンス、アクセシビリティ）のナレッジベース管理。Web開発の実装タスクやコーディング作業時に自発的にナレッジベースを参照し、ベストプラクティスを適用することで作業の精度と速度を向上させる。URLや記事からの技術情報の要約・蓄積、質問への回答も行う。モダンCSS（Grid、Flexbox、@scope、View Transitions）、JavaScript パターン、Core Web Vitals、WCAG、ブラウザ互換性などに対応。
disable-model-invocation: false
---

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

## 概要

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

1. **実装時の自発的参照**（最優先）: Web開発の実装タスク時にナレッジベースを参照し、ベストプラクティスを適用して作業の精度と速度を向上
2. **収集・蓄積**: URLや記事からフロントエンド技術を要約してナレッジベースに追加
3. **参照・回答**: 蓄積されたナレッジベースから質問に関連する情報を検索して回答

## 使用場面

### 実装タスク時の自発的参照（最優先）

- Web開発の実装タスク（コンポーネント作成、レイアウト実装、アニメーション実装など）
- コーディング作業時のベストプラクティス適用
- 最新のCSS/JavaScript機能の活用
- アクセシビリティやパフォーマンスへの配慮

**トリガー**: ユーザーからの実装依頼、コード作成タスク、機能追加など

### 収集モード

- 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 - レイアウト** | `knowledge/css/layout/` | Grid, Flexbox, Container Queries, full-bleed | レイアウト, 幅, 高さ, 中央寄せ, 全幅 |
| **CSS - アニメーション** | `knowledge/css/animation/` | Transitions, View Transitions, Scroll-driven | 動き, アニメーション, 遷移, トランジション |
| **CSS - ビジュアル** | `knowledge/css/visual/` | filter, clip-path, mask, shape | フィルター, マスク, 図形, 視覚効果 |
| **CSS - タイポグラフィ** | `knowledge/css/typography/` | text-box, フォント, paint-order | 文字, フォント, テキスト |
| **CSS - セレクタ** | `knowledge/css/selectors/` | @scope, :has, :is, :where | スコープ, セレクタ, 擬似クラス |
| **CSS - 値** | `knowledge/css/values/` | clamp, viewport units, currentColor | 値, 単位, ビューポート, カスタムプロパティ |
| **CSS - コンポーネント** | `knowledge/css/components/` | Popover, Anchor Positioning, field-sizing | UI, コンポーネント, ポップオーバー |
| **CSS - テーマ** | `knowledge/css/theming/` | light-dark, color-scheme | テーマ, ダークモード, 配色 |
| **HTML** | `knowledge/html/` | モダンHTML, セマンティック, dialog, details | HTML, マークアップ, 要素 |
| **JavaScript - パターン** | `knowledge/javascript/patterns/` | DOM, イベント, 非同期, Utilities | JS, DOM, イベント, パターン |
| **JavaScript - アニメーション** | `knowledge/javascript/animation/` | requestAnimationFrame, 補間 | JS アニメーション, 数学的補間 |
| **パフォーマンス** | `knowledge/cross-cutting/performance/` | 最適化, Core Web Vitals, lazy-load | 速度, 最適化, LCP, CLS |
| **アクセシビリティ** | `knowledge/cross-cutting/accessibility/` | WCAG, a11y, リンク | a11y, アクセシビリティ, WCAG |
| **ブラウザ互換性** | `knowledge/cross-cutting/browser-compat/` | ブラウザバグ, 回避策, workarounds | バグ, 回避, Safari, iOS |
| **Apple Style Guide** | `knowledge/apple-style-guide/` | Apple製品のライティング規約、UI用語、スタイルガイド | Apple, ライティング, UI用語, 製品名, スタイル規約, 表記 |
| **Human Interface Guidelines** | `knowledge/human-interface-guidelines/` | Appleデザイン原則、iOS/macOS UI設計 | HIG, Apple design, iOS, macOS, SwiftUI, UIKit, アプリデザイン |
| **Material Design 3** | `knowledge/material-design-3/` | Googleデザインシステム、Material You、デザイン哲学 | Material Design, Material You, Google, デザインシステム, Dynamic Color |

### Step 4: 重複チェックと処理方針の決定

**重要**: ナレッジ追加前に必ず既存ナレッジとの重複をチェックする。

#### 4-1. 既存ナレッジの検索

以下のコマンドで該当トピックの既存ファイルを検索：

```bash
# キーワードで検索（例: Container Query）
find knowledge -type f -name "*.md" | xargs grep -l "container.*query\|@container"

# ファイル名で検索
find knowledge -type f -name "*container*"
```

#### 4-2. 処理方針の決定

| 状況 | 対応 |
|------|------|
| **完全に新しい情報** | 新規ファイル作成 |
| **既存ファイルに追記可能** | 既存ファイルの末尾に追加 |
| **既存情報の更新** | 既存セクションを Edit ツールで更新 |
| **複数記事の統合** | 情報を統合して1つのファイルを作成/更新 |
| **古い情報の置き換え** | 古いセクションを削除し、新情報を追加 |
| **明らかに古く有用でない** | ナレッジ化しない |

#### 4-3. 古い情報の判断基準

以下の場合は「古く有用でない」と判断し、ナレッジ化しない：

- **ブラウザサポートが終了した技術**（例: IE11専用のハック）
- **非推奨になった API/構文**（公式ドキュメントで deprecated）
- **より良い代替手段がある古い手法**（例: Polyfill が不要になった機能）
- **セキュリティ上の問題がある実装**
- **5年以上前の記事で、現在の標準と乖離している内容**

ただし、以下は例外的に保存：

- **歴史的価値のある情報**（「なぜこの書き方が避けられるようになったか」の理解）
- **レガシーコード保守に必要な情報**（明示的に「レガシー」とタグ付け）

#### 4-4. 分割と統合の判断

**分割すべき場合**:
- 1つのファイルが500行を超える
- 複数の独立したトピックが含まれる
- 異なるカテゴリに属する情報が混在

**統合すべき場合**:
- 同じトピックが複数ファイルに分散している
- 内容が薄い複数ファイルを1つにまとめた方が理解しやすい
- 相互に強く関連するトピック（例: Container Query と Container Query Units）

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

1. `~/.claude/skills/managing-frontend-knowledge/knowledge/[カテゴリ]/[ファイル名].md` を Read
2. 処理方針に従って更新：
   - **新規**: Write ツールで新規ファイル作成
   - **追記**: Edit ツールで既存ファイルの末尾に追加
   - **更新**: Edit ツールで既存セクションを置き換え
   - **統合**: 複数ファイルの内容を統合して1つのファイルを作成
3. ファイルが存在しない場合は新規作成し、YAML frontmatterを追加
4. YAML frontmatter形式:
   ```yaml
   ---
   title: タイトル
   category: css/layout (カテゴリパス)
   tags: [タグ1, タグ2, タグ3]
   browser_support: ブラウザ対応状況
   created: YYYY-MM-DD
   updated: YYYY-MM-DD
   ---
   ```

### Step 6: 確認

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

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

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

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: ナレッジ参照（実装時・回答時）

## 使い方

### 実装タスク時の自発的参照（推奨）

Web開発の実装タスクやコーディング作業を行う際、以下の流れで自発的にナレッジベースを参照する：

1. **タスク内容からキーワードを抽出**
   - 例: 「レスポンシブなカードコンポーネント」→ Container Query、Grid、clamp()
   - 例: 「アニメーション実装」→ View Transitions、prefers-reduced-motion
   - 例: 「モーダル実装」→ dialog要素、Popover API

2. **該当カテゴリを特定** (上記カテゴリ一覧を参照)

3. **ナレッジファイルを Read**
   - `~/.claude/skills/managing-frontend-knowledge/knowledge/` 内の該当ファイル

4. **ベストプラクティスを適用して実装**
   - ナレッジに基づいた最新の手法を使用
   - ブラウザサポート情報を考慮
   - アクセシビリティやパフォーマンスの考慮事項を反映

**効果**: 作業の精度向上、実装速度向上、最新のベストプラクティス適用

### 質問への回答時

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

### ディレクトリ構造

```
knowledge/
├── INDEX.md                          # 全体インデックス
├── css/
│   ├── layout/                       # Grid, Flexbox, 配置
│   ├── animation/                    # Transitions, アニメーション
│   ├── visual/                       # filter, mask, shape
│   ├── typography/                   # フォント, テキスト
│   ├── selectors/                    # @scope, :has, 擬似クラス
│   ├── values/                       # clamp, 単位, カスタムプロパティ
│   ├── components/                   # Popover, Anchor Positioning
│   └── theming/                      # light-dark, テーマ
├── javascript/
│   ├── patterns/                     # DOM, イベント, パターン
│   └── animation/                    # requestAnimationFrame, 補間
├── html/                             # モダンHTML, セマンティック
├── cross-cutting/
│   ├── performance/                  # 最適化, Core Web Vitals
│   ├── accessibility/                # WCAG, a11y
│   └── browser-compat/               # ブラウザバグ, 回避策
├── apple-style-guide/               # Appleライティング規約
├── human-interface-guidelines/      # Apple HIG、デザイン原則
└── material-design-3/               # Material Design 3、デザイン哲学
```

## 回答フォーマット

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

[説明]

### コード例

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

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

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

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

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

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

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

## 注意事項

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