Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

concept-workflow

Name: concept-workflow
Author: leonardomso

JavaScriptのコンセプトドキュメントを一から完成まで作成するエンドツーエンドのワークフローで、リサーチから最終レビューまでのすべてのスキルを統合的に orchestrate します。ドキュメント作成プロセス全体を自動化・体系化したい場合に活用できます。

description の原文を見る

End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review

SKILL.md 本文

スキル: 完全なコンセプトワークフロー

このスキルを使用して、最初から最後まで完全で高品質なコンセプトページを作成します。このスキルは、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コンポーネントとしてフォーマットする — ページに貼り付け可能な形で

成果物

2～4個のMDN/参考資料リンクと説明
4～6個の記事リンクと説明
3～4個のビデオリンクと説明
オプション: 1～2個のコースまたは書籍

品質ゲート

フェーズ2に進む前に:

すべてのリンクが動作確認済み (200レスポンス)
すべてのリソースがJavaScript重視
説明は具体的で、汎用的ではない
初級と上級のコンテンツが混在

フェーズ2: コンセプト作成

スキル: write-concept 目的: 完全なドキュメントページを作成する

やること

ファイル構成のカテゴリを決定する
frontmatterを作成する (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に進む前に:

frontmatter完全 (title, sidebarTitle, description)
質問フックで開く
最初の200語内にコード例
「学習内容」情報ボックス表示
すべての必須セクション表示
リソースセクション完全
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リンクをクリック — 動作確認
- MDNとAPI説明を比較
- 微妙なクレームについて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個の関連コンセプトがリンク
- 説明的なアンカーテキスト
- 関連コンセプトセクション完全
スコアを計算 し、問題を修正

成果物

SEO監査レポート (X/27のスコア付き)
すべての高優先度修正が実装

品質ゲート

完了とマークする前に:

スコア27点中24点以上 (90%以上)
タイトルが最適化
メタディスクリプションが最適化
キーワードが自然に配置
フィーチャードスニペットが最適化
内部リンク完全

完全なワークフローチェックリスト

このマスターチェックリストを使用してすべてのフェーズの進行状況を追跡します。

# コンセプトワークフロー: [コンセプト名]

**開始:** YYYY-MM-DD
**対象カテゴリ:** {category}
**ファイルパス:** `/docs/concepts/{concept-name}.mdx`
**テストパス:** `/tests/{category}/{concept-name}/`

---

## フェーズ1: リソースキュレーション
- [ ] MDN参考資料が見つかった (2-4)
- [ ] 記事が見つかった (4-6)
- [ ] ビデオが見つかった (3-4)
- [ ] すべてのリンクが動作確認済み
- [ ] 説明が書かれた (具体的、各2文)
- [ ] リソースがCardとしてフォーマットされた

**ステータス:** ⬜ 未開始 | 🟡 進行中 | ✅ 完了

---

## フェーズ2: コンセプト作成
- [ ] Frontmatterが完全
- [ ] オープニングフックが書かれた
- [ ] オープニングコード例が追加
- [ ] 「学習内容」ボックスが追加
- [ ] メインコンテンツセクションが書かれた
- [ ] 主要なポイントが追加
- [ ] 知識テストが追加
- [ ] 関連コンセプトが追加
- [ ] リソースがフェーズ1から貼り付けられた
- [ ] docs.jsonに追加 (新規の場合)

**ステータス:** ⬜ 未開始 | 🟡 進行中 | ✅ 完了

---

## フェーズ3: テスト作成
- [ ] コード例が抽出・分類
- [ ] テストファイルが作成
- [ ] DOMテストファイルが作成 (必要に応じて)
- [ ] すべてのテスト可能な例にテスト
- [ ] ソース行参照が追加
- [ ] テストが実行され、パス

**テスト結果:** X パス、X 失敗

**ステータス:** ⬜ 未開始 | 🟡 進行中 | ✅ 完了

---

## フェーズ4: ファクトチェック
- [ ] すべてのテストがパス
- [ ] コード例の正確性が確認
- [ ] MDNリンクがチェック (X/X 有効)
- [ ] 外部リソースがチェック (X/X 有効)
- [ ] 技術的クレームが監査
- [ ] 誤解が見つからない
- [ ] 問題が修正

**ステータス:** ⬜ 未開始 | 🟡 進行中 | ✅ 完了

---

## フェーズ5: SEOレビュー
- [ ] タイトルタグが最適化 (50-60文字)
- [ ] メタディスクリプションが最適化 (150-160文字)
- [ ] キーワードが正しく配置
- [ ] コンテンツ構造が確認
- [ ] フィーチャードスニペットが最適化
- [ ] 内部リンクが完全

**SEOスコア:** X/27 (X%)

**ステータス:** ⬜ 未開始 | 🟡 進行中 | ✅ 完了

---

## 最終ステータス

**すべてのフェーズ完了:** ⬜ いいえ | ✅ はい
**公開準備完了:** ⬜ いいえ | ✅ はい
**完了:** YYYY-MM-DD

実行指示

このワークフローを実行する場合は、以下のステップに従います:

ステップ1: 初期化

コンセプトワークフロー開始: [コンセプト名]

カテゴリ: [fundamentals/functions-execution/web-platform/等]
ファイル: /docs/concepts/[concept-name].mdx
テスト: /tests/[category]/[concept-name]/

ステップ2: 各フェーズを実行

各フェーズについて:

フェーズを告知:

## フェーズ X: [フェーズ名]
使用スキル: [skill-name]

スキルを読み込む 詳細な指示を取得
フェーズを実行 スキルの方法論に従う

完了を報告:

フェーズ X 完了:
- [成果物 1]
- [成果物 2]
- 品質ゲート: ✅ すべてパス

次のフェーズに移動 品質ゲートがパスした後のみ

ステップ3: 最終レポート

すべてのフェーズ完了後:

# ワークフロー完了: [コンセプト名]

## サマリー
- **コンセプトページ:** `/docs/concepts/[concept-name].mdx`
- **テストファイル:** `/tests/[category]/[concept-name]/[concept-name].test.js`
- **単語数:** X,XXX 単語
- **コード例:** XX (XX テスト済み)
- **リソース:** X MDN、X 記事、X ビデオ

## 品質メトリクス
- **テスト:** XX パス
- **ファクトチェック:** ✅ すべて確認
- **SEOスコア:** XX/27 (XX%)

## 作成・修正されたファイル
1. `/docs/concepts/[concept-name].mdx` (作成)
2. `/docs/docs.json` (ナビゲーション更新)
3. `/tests/[category]/[concept-name]/[concept-name].test.js` (作成)

## 公開準備完了: ✅ はい

フェーズの依存関係

一部のフェーズは部分的に並列化できますが、一般的なフローは:

フェーズ1 (リソース) ──┐
                      ├──► フェーズ2 (作成) ──► フェーズ3 (テスト) ──┐
                      │                                             │
                      │         ┌───────────────────────────────────┘
                      │         ▼
                      └──► フェーズ4 (ファクトチェック) ──► フェーズ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. コンセプト名とカテゴリを決定
2. このスキル (concept-workflow) を読み込む
3. フェーズ1を実行: resource-curator を読み込み、リソースを見つける
4. フェーズ2を実行: write-concept を読み込み、ページを作成
5. フェーズ3を実行: test-writer を読み込み、テストを作成
6. フェーズ4を実行: fact-check を読み込み、正確性を検証
7. フェーズ5を実行: seo-review を読み込み、SEOを最適化
8. 最終レポートを生成
9. 変更をコミット

開始するプロンプト例:

"concept-workflow スキルを使用して 'hoisting' の完全なコンセプトページを作成してください"

これにより、完全でテストされ、検証され、SEO最適化されたコンセプトページを作成する、完全なエンドツーエンドワークフローがトリガーされます。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: leonardomso
リポジトリ: leonardomso/33-js-concepts
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/leonardomso/33-js-concepts / ライセンス: MIT

SKILL.md 本文

スキル: 完全なコンセプトワークフロー

使用する場合

ワークフロー概要

フェーズ1: リソースキュレーション

やること

成果物

品質ゲート

フェーズ2: コンセプト作成

やること

成果物

品質ゲート

フェーズ3: テスト作成

やること

成果物

品質ゲート

フェーズ4: ファクトチェック

やること

成果物

品質ゲート

フェーズ5: SEOレビュー

やること

成果物

品質ゲート

完全なワークフローチェックリスト

実行指示

ステップ1: 初期化

ステップ2: 各フェーズを実行

ステップ3: 最終レポート

フェーズの依存関係

スキルリファレンス

時間見積もり

クイックスタート

詳細情報

関連スキル

doubt-driven-development

apprun-skills

desloppify

debugging-and-error-recovery

test-driven-development

incremental-implementation