concept-workflow について
concept-workflowは、概念ドキュメントページの新規作成や全面改稿を支援するスキルです。リソース収集、執筆、テスト、事実確認、SEOレビューを順に進めます。
主な機能
- 015段階のドキュメント制作を編成
- 02外部学習リソースの収集
- 03概念ページとコード例の執筆
- 04コード例のテスト作成と実行
- 05技術的正確性の確認とSEOレビュー
活用シーン
- 01概念ページを一から作成
- 02既存の概念ページを全面改稿
- 03手順に沿ったテストと正確性の確認
- 04公開前のSEO要件チェック
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/concept-workflowを入力して読み込まれたか確認します。
詳細
スキル：コンセプトページの完全なワークフロー
このスキルでは、最初から最後まで、高品質なコンセプトページを作成します。次の5つの専門スキルを最適な順序で実行します。
- リソースの選定 — 質の高い学習リソースを探す
- コンセプトの執筆 — ドキュメントページを執筆する
- テストの作成 — コード例のテストを作成する
- ファクトチェック — 技術的な正確性を確認する
- SEO レビュー — 検索での見つけやすさを最適化する
使用するタイミング
- 新しいコンセプトページをゼロから作成するとき
- 既存のコンセプトページを全面的に書き直すとき
- 品質チェックをすべて含む、最初から最後までのワークフローが必要なとき
一部のタスクには、代わりに個別のスキルを使用してください：
- リソースを追加するだけの場合は、
resource-curatorを使用します - コンテンツを執筆するだけの場合は、
write-conceptを使用します - テストを追加するだけの場合は、
test-writerを使用します - 正確性を確認するだけの場合は、
fact-checkを使用します - SEO を最適化するだけの場合は、
seo-reviewを使用します
ワークフローの概要
┌─────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE CONCEPT WORKFLOW │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: Concept name (e.g., "hoisting", "event-loop", "promises") │
│ │
│ ┌──────────────────┐ │
│ │ PHASE 1: RESEARCH │ │
│ │ resource-curator │ Find MDN refs, articles, videos │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 2: WRITE │ │
│ │ write-concept │ Create the documentation page │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 3: TEST │ │
│ │ test-writer │ Generate tests for all code examples │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 4: VERIFY │ │
│ │ fact-check │ Verify accuracy, run tests, check links │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 5: OPTIMIZE│ │
│ │ seo-review │ SEO audit and final optimizations │
│ └────────┬─────────┘ │
│ ▼ │
│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
フェーズ1：リソースの選定
スキル： resource-curator
目標： 執筆前に質の高い外部リソースを集める
実施内容
- コンセプトのカテゴリを特定する（基礎、非同期、OOP など）
- MDN の資料を探す — 公式ドキュメント
- 質の高い記事を探す — 信頼できる情報源から4〜6件を目標にする
- 質の高い動画を探す — 信頼できる制作者による3〜4本を目標にする
- 各リソースを評価する — 品質基準を確認する
- 具体的な説明を書く — それぞれ2文
- Card コンポーネントとして整形する — ページに貼り付けられる状態にする
成果物
- 説明付きの MDN／参考資料リンクのリスト（2〜4件）
- 説明付きの記事リンクのリスト（4〜6件）
- 説明付きの動画リンクのリスト（3〜4本）
- 任意：コースまたは書籍を1〜2件
品質ゲート
フェーズ2に進む前に：
- すべてのリンクが有効であることを確認済み（200 応答）
- すべてのリソースが JavaScript に焦点を当てている
- 説明が具体的で、一般論にとどまっていない
- 初心者向けと上級者向けのコンテンツが含まれている
フェーズ2：コンセプトの執筆
スキル： write-concept
目標： ドキュメントページ全体を作成する
実施内容
- ファイル構成のカテゴリを決める
- フロントマターを作成する（title、sidebarTitle、description）
- 冒頭のフックを書く — 読者を引き込む質問
- 冒頭のコード例を追加する — 最初の200語以内に簡単な例を示す
- 「学べること」ボックスを書く — 箇条書きで5〜7項目
- 本文のセクションを書く：
- [コンセプト] とは？（フィーチャードスニペット向けの40〜60語の定義を含める）
- 現実世界のたとえ
- 仕組み（図を含める）
- コード例（複数用意し、段階的に複雑にする）
- よくある間違い
- エッジケース
- 重要なポイントを追加する — 8〜10項目の番号付きリスト
- 理解度チェックを追加する — 5〜6件の Q&A アコーディオン
- 関連コンセプトを追加する — 関連トピックへのリンクを含む4つの Card
- リソースを追加する — フェーズ1で選定したリソースを貼り付ける
成果物
/docs/concepts/{concept-name}.mdxにある完全な.mdxファイル- （新規の場合）
docs.jsonのナビゲーションにファイルを追加
品質ゲート
フェーズ3に進む前に：
- フロントマターが完成している（title、sidebarTitle、description）
- 質問形式のフックで始まっている
- 最初の200語以内にコード例がある
- 「学べること」の Info ボックスがある
- 必要なセクションがすべてそろっている
- リソースセクションが完成している
- 1,500語以上ある
フェーズ3：テストの作成
スキル： test-writer
目標： すべてのコード例を対象とする包括的なテストを作成する
実施内容
- コンセプトページを確認し、すべてのコード例を探す
- 例を分類する：
- テスト可能（console.log、戻り値）
- DOM 固有（jsdom が必要）
- エラー例（toThrow）
- 概念説明のみ（対象外）
- テストファイルを作成する —
tests/{category}/{concept}/{concept}.test.js - DOM テストファイルを作成する（必要な場合）—
tests/{category}/{concept}/{concept}.dom.test.js - 各コード例のテストを、ソースの行番号参照付きで作成する
- テストを実行し、すべて成功することを確認する
成果物
- テストファイル：
tests/{category}/{concept-name}/{concept-name}.test.js - DOM テストファイル（該当する場合）：
tests/{category}/{concept-name}/{concept-name}.dom.test.js - すべてのテストが合格すること
品質ゲート
フェーズ 4 に進む前に：
- テスト可能なコード例すべてにテストがある
- コメントにソースの行参照がある
- テストに合格する：
npm test -- tests/{category}/{concept}/ - DOM テストは jsdom ディレクティブ付きで別ファイルにある
フェーズ 4：ファクトチェック
スキル： fact-check
目標： すべてのコンテンツの技術的な正確性を検証する
実施内容
-
コード例を検証する：
- テストを実行する：
npm test -- tests/{category}/{concept}/ - テストされていない例を手動で確認する
- 出力コメントが実際の出力と一致することを確認する
- テストを実行する：
-
MDN／仕様に関する主張を検証する：
- MDN のリンクをすべてクリックし、正常に機能することを確認する
- API の説明を MDN と照合する
- 細かな主張について ECMAScript の仕様を確認する
-
外部リソースを検証する：
- 記事や動画へのリンクがすべて機能することを確認する
- 内容をざっと読み、正確性を確認する
- 説明が内容と一致することを確認する
-
技術的な主張を監査する：
- 「常に／決して」といった断定的な表現を探す
- パフォーマンスに関する主張を検証する
- よくある誤解がないか確認する
-
ファクトチェックレポートを作成する
成果物
- 以下を記録したファクトチェックレポート：
- コードの検証結果
- リンクの確認結果
- 見つかった問題と実施した修正
品質ゲート
フェーズ 5 に進む前に：
- すべてのテストに合格している
- MDN のリンクがすべて有効である
- 外部リソースにすべてアクセスできる
- 技術的な不正確さがない
- よくある誤解がない
フェーズ 5：SEO レビュー
スキル： seo-review
目標： 検索での可視性を最適化する
実施内容
-
タイトルタグを監査する：
- 50～60 文字
- 前半に主要キーワードを含める
- "in JavaScript" で終わる
- 読者を引き付けるフックを含める
-
メタディスクリプションを監査する：
- 150～160 文字
- 行動を促す語（Learn、Understand、Discover）で始める
- 主要キーワードを含める
- 具体的な価値を提示する
-
キーワードの配置を監査する：
- タイトルにキーワードがある
- 説明にキーワードがある
- 最初の 100 語以内にキーワードがある
- 少なくとも 1 つの H2 にキーワードがある
-
コンテンツ構成を監査する：
- 冒頭に問いかけのフックがある
- 最初の 200 語以内にコードがある
- 「学べること」ボックスがある
- 段落が短い
-
強調スニペット向けの最適化を監査する：
- 「What is」H2 の後に 40～60 語の定義がある
- H2 が疑問文形式である
- ハウツーコンテンツに番号付きの手順がある
-
内部リンクを監査する：
- 関連する概念へのリンクが 3～5 個ある
- アンカーテキストが具体的である
- 「関連する概念」セクションが完成している
-
スコアを算出し、問題を修正する
成果物
- スコア（X/27）を含む SEO 監査レポート
- 優先度の高い修正をすべて実施する
品質ゲート
完了とする前に：
- 27 点中 24 点以上（90% 以上）
- タイトルを最適化済み
- メタディスクリプションを最適化済み
- キーワードが自然に配置されている
- 強調スニペット向けに最適化済み
- 内部リンクが完成している
ワークフロー全体のチェックリスト
このマスターリストを使って、すべてのフェーズの進捗を確認してください。
# Concept Workflow: [Concept Name]
**Started:** YYYY-MM-DD
**Target Category:** {category}
**File Path:** `/docs/concepts/{concept-name}.mdx`
**Test Path:** `/tests/{category}/{concept-name}/`
---
## Phase 1: Resource Curation
- [ ] MDN references found (2-4)
- [ ] Articles found (4-6)
- [ ] Videos found (3-4)
- [ ] All links verified working
- [ ] Descriptions written (specific, 2 sentences)
- [ ] Resources formatted as Cards
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 2: Concept Writing
- [ ] Frontmatter complete
- [ ] Opening hook written
- [ ] Opening code example added
- [ ] "What you'll learn" box added
- [ ] Main content sections written
- [ ] Key Takeaways added
- [ ] Test Your Knowledge added
- [ ] Related Concepts added
- [ ] Resources pasted from Phase 1
- [ ] Added to docs.json (if new)
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 3: Test Writing
- [ ] Code examples extracted and categorized
- [ ] Test file created
- [ ] DOM test file created (if needed)
- [ ] All testable examples have tests
- [ ] Source line references added
- [ ] Tests run and passing
**Test Results:** X passing, X failing
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 4: Fact Checking
- [ ] All tests passing
- [ ] Code examples verified accurate
- [ ] MDN links checked (X/X valid)
- [ ] External resources checked (X/X valid)
- [ ] Technical claims audited
- [ ] No misconceptions found
- [ ] Issues fixed
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 5: SEO Review
- [ ] Title tag optimized (50-60 chars)
- [ ] Meta description optimized (150-160 chars)
- [ ] Keywords placed correctly
- [ ] Content structure verified
- [ ] Featured snippet optimized
- [ ] Internal links complete
**SEO Score:** X/27 (X%)
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Final Status
**All Phases Complete:** ⬜ No | ✅ Yes
**Ready to Publish:** ⬜ No | ✅ Yes
**Completed:** YYYY-MM-DD
実行手順
このワークフローを実行する際は、次の手順に従ってください。
ステップ 1：初期化
Starting concept workflow for: [CONCEPT NAME]
Category: [fundamentals/functions-execution/web-platform/etc.]
File: /docs/concepts/[concept-name].mdx
Tests: /tests/[category]/[concept-name]/
ステップ 2：各フェーズを実行する
各フェーズで：
-
フェーズをアナウンスする：
## Phase X: [Phase Name] Using skill: [skill-name] -
スキルを読み込み、詳細な指示を確認する
-
スキルの方法に従ってフェーズを実行する
-
完了を報告する：
Phase X complete: - [Deliverable 1] - [Deliverable 2] - Quality gates: ✅ All passed -
品質ゲートに合格してから次のフェーズに進む
ステップ 3：最終レポート
すべてのフェーズが完了したら：
# Workflow Complete: [Concept Name]
## Summary
- **Concept Page:** `/docs/concepts/[concept-name].mdx`
- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`
- **Word Count:** X,XXX words
- **Code Examples:** XX (XX tested)
- **Resources:** X MDN, X articles, X videos
## Quality Metrics
- **Tests:** XX passing
- **Fact Check:** ✅ All verified
- **SEO Score:** XX/27 (XX%)
## Files Created/Modified
1. `/docs/concepts/[concept-name].mdx` (created)
2. `/docs/docs.json` (updated navigation)
3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)
## Ready to Publish: ✅ Yes
フェーズ間の依存関係
一部のフェーズは部分的に並行して進められますが、基本的な流れは次のとおりです。
Phase 1 (Resources) ──┐
├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐
│ │
│ ┌───────────────────────────────────┘
│ ▼
└──► Phase 4 (Fact Check) ──► Phase 5 (SEO)
- フェーズ 1 の後にフェーズ 2： リソースをもとに執筆内容を決める
- フェーズ 2 の後にフェーズ 3： テストを書くにはコンテンツが必要
- フェーズ 3 の後にフェーズ 4： テストはファクトチェックの一部
- フェーズ 4 の後にフェーズ 5： SEO の仕上げを行う前に、正確性の問題を修正する
スキルリファレンス
| フェーズ | スキル | 目的 |
|---|---|---|
| 1 | resource-curator | 外部リソースを探して評価する |
| 2 | write-concept | ドキュメントページを作成する |
| 3 | test-writer | コード例のテストを生成する |
| 4 | fact-check | 技術的な正確性を検証する |
| 5 | seo-review | 検索での可視性を最適化する |
各スキルには、それぞれの SKILL.md ファイルに詳細な手順が記載されています。包括的なガイダンスを得るには、各フェーズで適切なスキルを読み込んでください。
所要時間の目安
| フェーズ | 推定時間 | 備考 |
|---|---|---|
| フェーズ 1：リソース | 15-30 分 | 質の高いリソースが利用できるかによって異なります |
| フェーズ 2：執筆 | 1-3 時間 | 概念の複雑さによって異なります |
| フェーズ 3：テスト | 30-60 分 | コード例の数によって異なります |
| フェーズ 4：ファクトチェック | 15-30 分 | ほとんどはテストで自動化できます |
| フェーズ 5：SEO | 15-30 分 | 主にチェックリストで確認します |
| 合計 | 2-5 時間 | 完全な概念ページを作成する場合 |
クイックスタート
新しい概念のワークフローを開始するには：
1. Determine the concept name and category
2. Load this skill (concept-workflow)
3. Execute Phase 1: Load resource-curator, find resources
4. Execute Phase 2: Load write-concept, write the page
5. Execute Phase 3: Load test-writer, create tests
6. Execute Phase 4: Load fact-check, verify accuracy
7. Execute Phase 5: Load seo-review, optimize SEO
8. Generate final report
9. Commit changes
開始時のプロンプト例：
「concept-workflow スキルを使って、「hoisting」の完全な概念ページを作成してください」
これにより、ワークフロー全体が実行され、完全で、テスト済み、検証済み、SEO 最適化済みの概念ページが作成されます。
コメント
Markdown 対応