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

概要

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

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

使用場面

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

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

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

収集モード

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

参照モード（質問対応）

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

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

実行モード

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

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

2. 整理モード

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

収集フロー

Step 1: コンテンツ取得

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

Step 2: 要約・構造化

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

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

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

## [テクニック名]

> 出典: [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. 既存ナレッジの検索

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

# キーワードで検索（例: 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: ファイル更新

~/.claude/skills/managing-frontend-knowledge/knowledge/[カテゴリ]/[ファイル名].md を Read
処理方針に従って更新：
- 新規: Write ツールで新規ファイル作成
- 追記: Edit ツールで既存ファイルの末尾に追加
- 更新: Edit ツールで既存セクションを置き換え
- 統合: 複数ファイルの内容を統合して1つのファイルを作成
ファイルが存在しない場合は新規作成し、YAML frontmatterを追加

YAML frontmatter形式:

---
title: タイトル
category: css/layout (カテゴリパス)
tags: [タグ1, タグ2, タグ3]
browser_support: ブラウザ対応状況
created: YYYY-MM-DD
updated: YYYY-MM-DD
---

Step 6: 確認

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

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

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

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

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

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

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

分割の判断基準

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

分割時のルール

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

分割例

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

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
   📝 モーション軽減対応パターン

🔗 相互参照を設定済み

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

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

チェック項目

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

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

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

統合時の報告

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

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

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

カテゴリが不明な場合

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

出力例（追加モード）

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

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

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

整理モード

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

整理タスク

1. 類似ナレッジの統合

統合プロセス:

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

統合の判断基準:

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

統合後のフォーマット:

## [テクニック名]

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

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

2. 古い情報の更新

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

3. カテゴリの再編成

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

4. フォーマット統一

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

整理フロー

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

出力例（整理モード）

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

タスク内容からキーワードを抽出
- 例: 「レスポンシブなカードコンポーネント」→ Container Query、Grid、clamp()
- 例: 「アニメーション実装」→ View Transitions、prefers-reduced-motion
- 例: 「モーダル実装」→ dialog要素、Popover API
該当カテゴリを特定 (上記カテゴリ一覧を参照)
ナレッジファイルを Read
- ~/.claude/skills/managing-frontend-knowledge/knowledge/ 内の該当ファイル
ベストプラクティスを適用して実装
- ナレッジに基づいた最新の手法を使用
- ブラウザサポート情報を考慮
- アクセシビリティやパフォーマンスの考慮事項を反映

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

質問への回答時

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

ディレクトリ構造

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、デザイン哲学

回答フォーマット

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

[説明]

### コード例

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

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

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

該当カテゴリがない場合

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

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

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

注意事項

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