关于 concept-workflow
concept-workflow 是用于从头到尾创建或重写概念文档页的工作流技能，面向文档作者。它按顺序编排资源整理、内容编写、测试、事实核查和 SEO 审查五个阶段，并提供各阶段的检查清单。
主要功能
- 01编排五阶段概念文档工作流
- 02整理外部学习资源
- 03编写概念文档与代码示例
- 04为示例创建测试并运行验证
- 05核查技术准确性并审查 SEO
适用场景
- 01从零创建完整的概念文档页
- 02全面重写现有概念文档页
- 03按阶段完成文档测试与准确性检查
- 04在发布前检查文档的 SEO 要求
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/concept-workflow确认已加载。
详细介绍
技能：完整的概念工作流
使用此技能，从头到尾创建完整、高质量的概念页面。此技能会按最佳顺序编排全部五项专用技能：
- 资源整理 — 查找优质学习资源
- 概念撰写 — 编写文档页面
- 测试编写 — 为代码示例创建测试
- 事实核查 — 验证技术准确性
- 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 个问答折叠面板
- 添加相关概念 — 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 链接，确认链接有效
- 将 API 描述与 MDN 内容进行比较
- 检查 ECMAScript 规范中的细节说明
-
核实外部资源：
- 检查所有文章和视频链接是否有效
- 浏览内容，确认准确性
- 确认描述与内容相符
-
审核技术说法：
- 查找包含“总是/从不”的说法
- 核实性能方面的说法
- 检查常见误解
-
生成事实核查报告
交付物
- 事实核查报告，记录：
- 代码核实结果
- 链接检查结果
- 发现的问题及所做的修复
质量门槛
进入第 5 阶段前：
- 所有测试均通过
- 所有 MDN 链接均有效
- 所有外部资源均可访问
- 未发现技术错误
- 不存在常见误解
第 5 阶段：SEO 审核
技能： seo-review
目标： 提高搜索可见度
要做什么
-
审核标题标签：
- 长度为 50–60 个字符
- 前半部分包含主要关键词
- 以“in JavaScript”结尾
- 包含吸引人的亮点
-
审核元描述：
- 长度为 150–160 个字符
- 以行动词开头（Learn、Understand、Discover）
- 包含主要关键词
- 明确说明能带来的具体价值
-
审核关键词布局：
- 标题中包含关键词
- 描述中包含关键词
- 前 100 个词中包含关键词
- 至少一个 H2 标题中包含关键词
-
审核内容结构：
- 以问题引入
- 前 200 个词中包含代码
- 包含“What you'll learn”信息框
- 段落简短
-
审核精选摘要优化：
- 在“What is”H2 标题后提供 40–60 词的定义
- H2 标题采用疑问句形式
- 操作指南内容使用编号步骤
-
审核内部链接：
- 链接至 3–5 个相关概念
- 使用描述性锚文本
- 完整填写“Related Concepts”部分
-
计算分数并修复所有问题
交付物
- SEO 审核报告及评分（X/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