Skill: Resource Curator for Concept Pages

このスキルを使用して、コンセプトドキュメンテーションページの高品質な外部リソース（記事、ビデオ、コース）を見つけ、評価し、追加、保守します。これには既存リソースの破損したリンクと古いコンテンツの監査が含まれます。

使用時期

• 新しいコンセプトページにリソースを追加する場合
• 既存ページのリソースをリフレッシュする場合
• 破損したリンクや古いリンクを監査する場合
• コミュニティが提供したリソースをレビューする場合
• 定期的なリンク保守時

リソース選定方法論

包括的なリソース選定のために、次の5つのフェーズに従います。

フェーズ1: 既存リソースの監査

新しいリソースを追加する前に、既存のものを監査します：

1. リンクのアクセス可能性を確認 — 各リンクが200を返していますか？
2. コンテンツの正確性を検証 — コンテンツはまだ正確ですか？
3. 公開日を確認 — トピックに対して古すぎませんか？
4. 古いコンテンツを特定 — 古い構文やパターンを使用していますか？
5. 説明をレビュー — 具体的ですか、それとも一般的ですか？

フェーズ2: リソースギャップの特定

現在のリソースをターゲットと比較します：

セクション	ターゲット数	アイコン
Reference	2-4 MDN リンク	book
Articles	4-6 記事	newspaper
Videos	3-4 ビデオ	video
Courses	1-3（オプション）	graduation-cap
Books	1-2（オプション）	book

以下を確認してください：

• 初心者と上級学習者の両方のためのリソースが十分にありますか？
• 視覚的コンテンツ（図、アニメーション）はありますか？
• 公式リファレンス（MDN）が含まれていますか？
• 教育スタイルの多様性はありますか？

フェーズ3: 新しいリソースの検索

ターゲットを絞ったクエリを使用して信頼できるソースを検索します：

記事の場合：

[concept] javascript tutorial site:javascript.info
[concept] javascript explained site:freecodecamp.org
[concept] javascript site:dev.to
[concept] javascript deep dive site:2ality.com
[concept] javascript guide site:css-tricks.com

ビデオの場合：

YouTube: [concept] javascript explained
YouTube: [concept] javascript tutorial
YouTube: jsconf [concept]
YouTube: [concept] javascript fireship
YouTube: [concept] javascript web dev simplified

MDN の場合：

[concept] site:developer.mozilla.org
[API name] MDN

フェーズ4: 説明を書く

すべてのリソースに具体的で価値のある説明が必要です：

フォーミュラ：

文1: このリソースがユニークな点、または具体的にカバーしている内容
文2: 読者がクリックすべき理由（何を得るか、誰に最適か）

フェーズ5: フォーマットと整理

• 正しいCardシンタックスと適切なアイコンを使用する
• リソースを論理的に順序付ける（基礎的なものが最初、上級的なものが後）
• 一貫したフォーマットを確保する

---

信頼できるソース

リファレンスソース（優先順序）

優先度	ソース	URL	最適な用途
1	MDN Web Docs	developer.mozilla.org	API ドキュメント、ガイド、互換性
2	ECMAScript 仕様	tc39.es/ecma262	権威あるビヘイビア
3	Node.js Docs	nodejs.org/docs	Node 固有のAPI
4	Web.dev	web.dev	パフォーマンス、ベストプラクティス
5	Can I Use	caniuse.com	ブラウザ互換性

記事ソース（優先順序）

優先度	ソース	なぜ信頼できるのか
1	javascript.info	包括的、練習問題、よく保守されている
2	MDN ガイド	公式、正確、定期的に更新される
3	freeCodeCamp	初心者向け、実践的
4	2ality（Dr. Axel）	深い技術的説明、仕様重視
5	CSS-Tricks	DOM、視覚的トピック、よく書かれている
6	dev.to（Lydia Hallie）	視覚的な説明、アニメーション
7	LogRocket Blog	実用的なチュートリアル、実世界的
8	Smashing Magazine	深掘り、よく調査されている
9	Digital Ocean	明確なチュートリアル、例
10	Kent C. Dodds	テスト、React、ベストプラクティス

ビデオクリエイター（優先順序）

優先度	クリエイター	スタイル	最適な用途
1	Fireship	高速、モダン、エンターテインメント性	クイック概要、モダン JS
2	Web Dev Simplified	明確、初心者向け	初心者、基礎
3	Fun Fun Function	深掘り、個性的	「なぜ」を理解する
4	Traversy Media	包括的なクラッシュコース	トピックの全体像
5	JSConf/dotJS	専門家会議トーク	上級、深掘り
6	Academind	徹底的な説明	完全な理解
7	The Coding Train	クリエイティブ、視覚的	視覚学習者向け
8	Wes Bos	実用的、実世界的	応用学習
9	The Net Ninja	ステップバイステップチュートリアル	一緒に学ぶ
10	Programming with Mosh	プロフェッショナル、明確	キャリア重視

コースソース

ソース	タイプ	注記
javascript.info	無料	包括的、練習問題
Piccalilli	無料	よく書かれている、モダン
freeCodeCamp	無料	プロジェクトベース
Frontend Masters	有料	専門家インストラクター
Egghead.io	有料	短く、フォーカスされたレッスン
Udemy（高評価）	有料	レビューを注意深く確認
Codecademy	フリーミアム	インタラクティブ

---

品質基準

必須項目（必須）

• リンクが機能する — 200 を返す（404、301、5xx ではない）
• JavaScript に焦点 — 主に C#、Python、Java などではない
• 技術的に正確 — 事実誤認やアンチパターンがない
• アクセス可能 — 無料またはアクセス可能な無料プレビューがある

推奨項目（好ましい）

• 十分に最新 — 以下の公開日ガイドラインを参照
• 評判のあるソース — 信頼できるソースリストまたは有名なクリエイターから
• ユニークな視点 — 既存のリソースの重複がない
• 適切な深さ — コンセプトの複雑さに合致
• 良い評価 — ポジティブなコメント、高い閲覧数（ビデオの場合）

警告フラグ（却下）

警告フラグ	なぜ重要か
var をどこでも使用	ES6+ トピックで古い
アンチパターンを教える	学習者に有害
主に他の言語	焦点が違う
ハードペイウォール（プレビューなし）	アクセス不可
モダンなトピックで 2015 年以前	時代遅れの可能性
低品質なコメント	しばしば問題を示す
事実誤認	誤情報を広める
クリックベイトタイトル、薄いコンテンツ	読者の時間を無駄にする

---

公開日ガイドライン

トピックカテゴリー	最小年	理由
ES6+ 機能	2015年以降	ES6 は 2015 年 6 月にリリース
Promise	2015年以降	ES6 でネイティブ Promise
async/await	2017年以降	ES2017 の機能
ES Modules	2018年以降	安定したブラウザサポート
Optional chaining (?.)	2020年以降	ES2020 の機能
Nullish coalescing (??)	2020年以降	ES2020 の機能
Top-level await	2022年以降	ES2022 の機能
基礎知識（クロージャ、スコープ、this）	任意	コアコンセプトは変わらない
DOM 操作	2018年以降	モダン API を推奨
Fetch API	2017年以降	広くサポートされている

経験則： 時間に敏感なトピックの場合、過去 3～5 年のコンテンツを推奨します。基礎知識については、古い古典的なコンテンツがしばしば優れています。

---

説明作成ガイド

フォーミュラ

文1: このリソースがユニークな点、または具体的にカバーしている内容
文2: 読者がクリックすべき理由（何を得るか、誰に最適か）

良い例

<Card title="JavaScript Visualized: Promises & Async/Await — Lydia Hallie" icon="newspaper" href="https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke">
  呼び出しスタック、マイクロタスクキュー、イベントループを動作中に示すアニメーション GIF。
  ビジュアル学習者にとって Promise 実行順序がようやく理解できるようになります。
</Card>

<Card title="What the heck is the event loop anyway? — Philip Roberts" icon="video" href="https://www.youtube.com/watch?v=8aGhZQkoFbQ">
  何百万人の開発者にイベントループを理解させた伝説の JSConf トーク。
  Philip Roberts のライブビジュアライゼーションはゴールドスタンダードで、必見です。
</Card>

<Card title="You Don't Know JS: Scope & Closures — Kyle Simpson" icon="book" href="https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md">
  Kyle Simpson による JavaScript のスコープメカニクスとクロージャビヘイビアの深掘り。
  基礎を超えて、スコープを真に理解するためのエッジケースとメンタルモデルに踏み込みます。
</Card>

<Card title="JavaScript Promises in 10 Minutes — Web Dev Simplified" icon="video" href="https://www.youtube.com/watch?v=DHvZLI7Db8E">
  Promise 作成、チェーン、エラーハンドリングをカバーする迅速で明確な説明。
  非同期 JavaScript が初めての場合に最適な出発点。
</Card>

<Card title="How to Escape Async/Await Hell — Aditya Agarwal" icon="newspaper" href="https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c">
  ピザとドリンク注文の比喩が並列実行と順序実行の違いを明確にします。
  async/await の基礎を知っているが、より高速なコードを書きたい場合の必読書。
</Card>

悪い例（避ける）

<!-- 非常に一般的 -->
<Card title="Promises Tutorial" icon="newspaper" href="...">
  JavaScript の Promise に関する包括的なガイド。
</Card>

<!-- 価値提案がない -->
<Card title="Learn Closures" icon="video" href="...">
  このビデオは JavaScript のクロージャについて説明しています。
</Card>

<!-- 曖昧、具体性がない -->
<Card title="JavaScript Guide" icon="newspaper" href="...">
  JavaScript について知っておく必要があるすべてのこと。
</Card>

<!-- タイトルをそのまま繰り返している -->
<Card title="Understanding the Event Loop" icon="video" href="...">
  イベントループを理解することについてのビデオ。
</Card>

避けるべき言葉と表現

避ける	なぜ	代わりに使用
「...への包括的なガイド」	曖昧、使い古された	カバーされている内容を明確にする
「...についてすべて学ぶ」	一般的	具体的に何を学ぶのか？
「知っておく必要があるすべてのこと...」	大げさ	具体的に
「...についての素晴らしいチュートリアル」	主観的なフィラー	なぜ素晴らしいのか？
「X について説明しています」	基本的すぎる	どのように説明するのか？何がユニークか？
「...への深掘り」	曖昧	どの深さ？どの側面？

機能する言葉と表現

良い表現	例
「ステップバイステップのウォークスルー」	「最初から Promise を構築するステップバイステップのウォークスルー」
「ビジュアル説明」	「アニメーション図によるビジュアル説明」
「...への深掘り」	「V8 の最適化戦略への深掘り」
「...の実例」	「React フックでのクロージャの実例」
「...のゴーツーリファレンス」	「配列メソッドシグネチャのゴーツーリファレンス」
「最後に X がクリックになる」	「最後にプロトタイプチェーンがクリックになる」
「初心者に最適」	「非同期コードに新しい初心者に最適」
「X、Y、Z をカバー」	「作成、チェーン、エラーハンドリングをカバー」

---

リンク監査プロセス

ステップ1: 各リンクをチェック

コンセプトページの各リソースについて：

1. リンクをクリック — 読み込まれますか？
2. HTTP ステータスを記録：

ステータス	意味	アクション
200	OK	保持し、コンテンツチェックに進む
301/302	リダイレクト	最終 URL に更新
404	見つかりません	削除または代替を検索
403	禁止	手動で確認、地域制限の可能性
5xx	サーバーエラー	後で再試行、一時的な可能性

ステップ2: コンテンツ検証

アクセス可能な各リンクについて：

1. コンテンツをスキャン — 正確ですか？
2. 日付を確認 — 公開または更新されたのはいつですか？
3. JavaScript フォーカスを確認 — 主に JS ですか？
4. 警告フラグを探す — アンチパターン、エラー、古い構文

ステップ3: 説明レビュー

各リソースについて：

1. 現在の説明を読む — 具体的ですか？
2. 実際のコンテンツと比較 — 一致していますか？
3. 一般的な表現をチェック — 「包括的なガイド」など
4. 改善を特定 — より具体的にするにはどうするか？

ステップ4: ギャップ分析

すべてのリソースの監査後：

1. セクション別にカウント — ターゲットを満たしていますか？
2. 多様性をチェック — 初心者AND上級者？視覚的AND テキスト？
3. 欠落しているタイプを特定 — MDN がない？ビデオがない？
4. 推奨事項をメモ — 何を追加すべきか？

---

リソースセクションテンプレート

リファレンスセクション

## Reference

<CardGroup cols={2}>
  <Card title="[Main Topic] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
    [特定の側面] をカバーする公式 MDN ドキュメンテーション。
    [何に最適か] の権威あるリファレンス。
  </Card>
  <Card title="[Related API/Concept] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
    [このリファレンスがカバーするもの]。
    [特定の側面] を理解するための必読。
  </Card>
</CardGroup>

記事セクション

## Articles

<CardGroup cols={2}>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [ユニークな点/カバー内容]。
    [なぜ読むのか/対象者]。
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [具体的なカバレッジ]。
    [価値提案]。
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [ユニークな角度]。
    [読む価値がある理由]。
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [カバー内容]。
    [誰に最適か]。
  </Card>
</CardGroup>

ビデオセクション

## Videos

<CardGroup cols={2}>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [カバー内容/ユニークなアプローチ]。
    [視聴理由/対象者]。
  </Card>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [具体的なフォーカス]。
    [何が目立つか]。
  </Card>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [カバレッジ]。
    [価値]。
  </Card>
</CardGroup>

書籍セクション（オプション）

<Card title="[Book Title] — [Author]" icon="book" href="...">
  [本がカバーする内容とそのアプローチ]。
  [誰が読むべきか、何を得るか]。
</Card>

コースセクション（オプション）

<CardGroup cols={2}>
  <Card title="[Course Title] — [Platform]" icon="graduation-cap" href="...">
    [コースがカバーする内容]。
    [フォーマットと対象者]。
  </Card>
</CardGroup>

---

リソース監査レポートテンプレート

監査結果を記録するために、このテンプレートを使用します。

# リソース監査レポート: [コンセプト名]

**ファイル:** `/docs/concepts/[slug].mdx`
**日付:** YYYY-MM-DD
**監査者:** [名前/Claude]

---

## サマリー

| メトリック | カウント |
|--------|-------|
| 合計リソース | XX |
| 機能するリンク (200) | XX |
| 破損したリンク (404) | XX |
| リダイレクト (301/302) | XX |
| 古いコンテンツ | XX |
| 一般的な説明 | XX |

## リソース数 vs ターゲット

| セクション | 現在 | ターゲット | ステータス |
|---------|---------|--------|--------|
| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |
| Articles | X | 4-6 | ✅/⚠️/❌ |
| Videos | X | 3-4 | ✅/⚠️/❌ |
| Courses | X | 0-3 | ✅/⚠️/❌ |

---

## 破損したリンク（削除または置換）

| リソース | 行 | URL | ステータス | アクション |
|----------|-----|-----|--------|--------|
| [タイトル] | XX | [URL] | 404 | 削除 |
| [タイトル] | XX | [URL] | 404 | [代替案] で置換 |

---

## リダイレクト（URL を更新）

| リソース | 行 | 古い URL | 新しい URL |
|----------|-----|---------|---------|
| [タイトル] | XX | [古い] | [新しい] |

---

## 古いリソース（置換を検討）

| リソース | 行 | 問題 | 推奨事項 |
|----------|-----|-------|----------------|
| [タイトル] | XX | 2014 年公開、全体で var を使用 | [モダンな代替案] で置換 |
| [タイトル] | XX | ES6 前、let/const について記載がない | 更新版を見つけるまたは置換 |

---

## 説明の改善が必要

| リソース | 行 | 現在 | 提案 |
|----------|-----|---------|-----------|
| [タイトル] | XX | 「クロージャについてのガイド」 | 「[具体的な説明と価値提案]」 |
| [タイトル] | XX | 「Promise について学ぶ」 | 「[ユニークな点]。[読む理由]。」 |

---

## 欠落しているリソース（推奨事項）

| タイプ | ギャップ | 推奨リソース | URL |
|------|-----|-------------------|-----|
| Reference | メイン MDN リンクなし | [トピック] — MDN | [URL] |
| Article | 初心者向けガイドなし | [タイトル] — javascript.info | [URL] |
| Video | ビジュアル説明なし | [タイトル] — [クリエイター] | [URL] |
| Article | 上級な深掘りなし | [タイトル] — 2ality | [URL] |

---

## JavaScript 以外のリソース（削除）

| リソース | 行 | 問題 |
|----------|-----|-------|
| [タイトル] | XX | 主に C#、JavaScript ではない |

---

## アクション項目

### 高優先度（最初に実施）
1. **破損したリンクを削除:** [タイトル]（行 XX）
2. **欠落した MDN リファレンスを追加:** [トピック]
3. **古いリソースを置換:** [タイトル] を [代替案] で置換

### 中優先度
1. **リダイレクト URL を更新:** [タイトル]（行 XX）
2. **説明を改善:** [タイトル]（行 XX）
3. **初心者向けの記事を追加**

### 低優先度
1. **追加のビデオリソースを追加**
2. **コースセクションの追加を検討**

---

## 検証チェックリスト

変更後：

- [ ] すべての破損したリンク削除または置換
- [ ] すべてのリダイレクト URL を更新
- [ ] 古いリソースを置換
- [ ] 一般的な説明を書き直し
- [ ] 欠落したリソースタイプを追加
- [ ] リソースカウントがターゲットを満たす
- [ ] すべての新しいリンクが機能していることを確認
- [ ] すべての説明が具体的で価値がある

---

クイックリファレンス

アイコンリファレンス

コンテンツタイプ	アイコン値
MDN/公式ドキュメント	book
記事/ブログ投稿	newspaper
ビデオ	video
コース	graduation-cap
書籍	book
関連コンセプト	文脈に応じた適切なもの

文字ガイドライン

要素	ガイドライン
Card タイトル	簡潔に、ビデオの場合はクリエイターを含める
説明文1	カバー内容/ユニークな点
説明文2	読む/視聴理由/対象者

リソース順序付け

各セクション内で、リソースを以下の順序で並べます：

1. 最も基礎的/初心者向けが最初
2. 公式リファレンスがコミュニティコンテンツより前
3. 最も推奨されたものが目立つ位置
4. 上級/ニッチなコンテンツが最後

---

品質チェックリスト

リンク検証

• すべてのリンクが 200 を返す（404、301 ではない）
• リダイレクトチェーンがない
• 通知がないハードペイウォールがない
• すべての URL は利用可能な場所で HTTPS

コンテンツ品質

• すべてのリソースが JavaScript に焦点を当てている
• アンチパターンを教えるリソースがない
• トピックに適切な公開日
• 初心者と上級コンテンツの混合
• ビジュアルとテキストリソースが含まれている

説明品質

• すべての説明が具体的（一般的ではない）
• 説明がユニークな価値を説明している
• 「...への包括的なガイド」フレーズなし
• 各説明は 2 文
• 説明が実際のコンテンツと一致している

完全性

• 2-4 の MDN/公式リファレンス
• 4-6 の高品質な記事
• 3-4 の高品質なビデオ
• リソースが論理的に順序付けられている
• 教育スタイルの多様性

---

サマリー

コンセプトページのリソースをキュレーションする場合：

1. 最初に監査 — 既存のすべてのリンクとコンテンツをチェック
2. ギャップを特定 — ターゲット（2-4 ref、4-6 記事、3-4 ビデオ）と比較
3. 品質なリソースを見つける — 信頼できるソースを検索
4. 具体的な説明を作成 — ユニークな点+読む/視聴理由
5. 正しくフォーマットする — 正しい Card シンタックス、アイコン、順序付け
6. 変更を記録 — 監査レポートテンプレートを使用

覚えておいてください： リソースは学習を強化する必要があり、ページを埋める必要はありません。すべてのリンクは本当の価値を提供する必要があります。質より量で。いくつかの優れたリソースが多くの平均的なものに勝ります。