resource-curator

技能：概念页面资源策展

使用此技能为概念文档页面查找、评估、添加和维护高质量的外部资源（文章、视频、课程）。还包括检查现有资源是否有失效链接和过时内容。

适用场景

• 为新的概念页面添加资源
• 更新现有页面上的资源
• 检查是否有失效或过时的链接
• 审核社区贡献的资源
• 定期维护链接

资源策展方法

按以下五个阶段全面策展资源。

阶段 1：审核现有资源

添加新资源之前，先审核已有资源：

1. 检查链接是否可访问 — 每个链接是否都返回 200？
2. 核实内容准确性 — 内容是否仍然正确？
3. 检查发布日期 — 对于该主题来说是否太旧？
4. 识别过时内容 — 是否使用了旧语法或旧模式？
5. 检查描述 — 描述是否具体，还是过于笼统？

阶段 2：找出资源缺口

将现有资源与目标数量进行比较：

部分	目标数量	图标
参考资料	2-4 个 MDN 链接	book
文章	4-6 篇	newspaper
视频	3-4 个	video
课程	1-3 门（可选）	graduation-cap
书籍	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：撰写描述

每项资源都需要具体且有价值的描述：

公式：

Sentence 1: What makes this resource unique OR what it specifically covers
Sentence 2: Why reader should click (what they'll gain, who it's best for)

阶段 5：格式化和整理

• 使用正确的 Card 语法和合适的图标
• 按逻辑顺序排列资源（先基础内容，再进阶内容）
• 确保格式一致

---

可信来源

参考资料来源（按优先级排序）

优先级	来源	URL	最适合的内容
1	MDN Web Docs	developer.mozilla.org	API 文档、指南、兼容性
2	ECMAScript Spec	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 Guides	官方、准确、定期更新
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	节奏快、现代、有趣	快速概览、现代 JavaScript
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 月发布
Promises	2015 年及之后	ES6 引入了原生 Promise
async/await	2017 年及之后	ES2017 特性
ES Modules	2018 年及之后	浏览器支持稳定
可选链（?.）	2020 年及之后	ES2020 特性
空值合并（??）	2020 年及之后	ES2020 特性
顶层 await	2022 年及之后	ES2022 特性
基础知识（闭包、作用域、this）	任意	核心概念不会改变
DOM 操作	2018 年及之后	优先采用现代 API
Fetch API	2017 年及之后	已广泛支持

经验法则： 对于时效性较强的主题，优先选择过去 3–5 年内发布的内容。对于基础知识，较早的经典内容往往也很出色。

---

描述撰写指南

公式

Sentence 1: What makes this resource unique OR what it specifically covers
Sentence 2: Why reader should click (what they'll gain, who it's best for)

优秀示例

<Card title="JavaScript Visualized: Promises & Async/Await — Lydia Hallie" icon="newspaper" href="https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke">
  Animated GIFs showing the call stack, microtask queue, and event loop in action. 
  The visuals make Promise execution order finally click for visual learners.
</Card>

<Card title="What the heck is the event loop anyway? — Philip Roberts" icon="video" href="https://www.youtube.com/watch?v=8aGhZQkoFbQ">
  The legendary JSConf talk that made the event loop click for millions of developers. 
  Philip Roberts' live visualizations are the gold standard — a must-watch.
</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's deep dive into JavaScript's scope mechanics and closure behavior. 
  Goes beyond the basics into edge cases and mental models for truly understanding scope.
</Card>

<Card title="JavaScript Promises in 10 Minutes — Web Dev Simplified" icon="video" href="https://www.youtube.com/watch?v=DHvZLI7Db8E">
  Quick, clear explanation covering Promise creation, chaining, and error handling. 
  Perfect starting point if you're new to async 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">
  The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. 
  Essential reading once you know async/await basics but want to write faster code.
</Card>

不佳示例（避免使用）

<Card title="Promises Tutorial" icon="newspaper" href="...">
  A comprehensive guide to Promises in JavaScript.
</Card>


<Card title="Learn Closures" icon="video" href="...">
  This video explains closures in JavaScript.
</Card>


<Card title="JavaScript Guide" icon="newspaper" href="...">
  Everything you need to know about JavaScript.
</Card>


<Card title="Understanding the Event Loop" icon="video" href="...">
  A video about understanding the event loop.
</Card>

应避免使用的词语和短语

避免使用	原因	替代表述
“……的综合指南”	含义模糊，使用过度	明确说明涵盖的内容
“全面了解……”	过于笼统	具体会学到什么？
“你需要知道的一切……”	言过其实	具体说明
“关于……的优秀教程”	主观且空泛	它优秀在哪里？
“解释了 X”	过于基础	如何解释？有什么独特之处？
“深入了解……”	含义模糊	深入到什么程度？涉及哪个方面？

值得使用的词语和短语

推荐短语	示例
“逐步讲解”	“从零开始构建 Promise 的逐步讲解”
“可视化讲解”	“配有动画图表的可视化讲解”
“深入探讨”	“深入探讨 V8 的优化策略”
“实用示例”	“React hooks 中闭包的实用示例”
“首选参考资料”	“数组方法签名的首选参考资料”
“终于让 X 豁然开朗”	“终于让原型链豁然开朗”
“非常适合初学者”	“非常适合刚接触异步代码的初学者”
“涵盖 X、Y 和 Z”	“涵盖创建、链式调用和错误处理”

---

链接审核流程

步骤 1：检查每个链接

检查概念页面中的每项资源：

1. 点击链接——能否正常加载？
2. 记录 HTTP 状态码：

状态码	含义	操作
200	正常	保留，继续检查内容
301/302	重定向	更新为最终 URL
404	未找到	删除或寻找替代资源
403	禁止访问	手动检查，可能受地理位置限制
5xx	服务器错误	稍后重试，可能只是暂时问题

步骤 2：验证内容

检查每个可访问的链接：

1. 浏览内容——内容是否仍然准确？
2. 检查日期——内容何时发布或更新？
3. 确认是否聚焦 JavaScript——内容是否主要与 JS 有关？
4. 留意危险信号——反模式、错误、过时语法

步骤 3：审核描述

检查每项资源：

1. 阅读现有描述——是否具体？
2. 对照实际内容——描述是否吻合？
3. 检查泛泛的措辞——例如“全面指南”等。
4. 找出改进之处——如何让描述更具体？

步骤 4：差距分析

审核完所有资源后：

1. 按版块统计数量——是否达到目标？
2. 检查多样性——是否兼顾入门和进阶内容？是否同时包含视觉和文本资源？
3. 找出缺失的类型——是否没有 MDN？是否没有视频？
4. 记录建议——应该添加什么？

---

资源版块模板

参考资料版块

## Reference

<CardGroup cols={2}>
  <Card title="[Main Topic] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
    Official MDN documentation covering [specific aspects]. 
    The authoritative reference for [what it's best for].
  </Card>
  <Card title="[Related API/Concept] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
    [What this reference covers]. 
    Essential reading for understanding [specific aspect].
  </Card>
</CardGroup>

文章版块

## Articles

<CardGroup cols={2}>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [What makes it unique/what it covers]. 
    [Why read this one/who it's for].
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [Specific coverage]. 
    [Value proposition].
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [Unique angle]. 
    [Why it's worth reading].
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [What it covers]. 
    [Best for whom].
  </Card>
</CardGroup>

视频版块

## Videos

<CardGroup cols={2}>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [What it covers/unique approach]. 
    [Why watch/who it's for].
  </Card>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [Specific focus]. 
    [What makes it stand out].
  </Card>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [Coverage]. 
    [Value].
  </Card>
</CardGroup>

书籍版块（可选）

<Card title="[Book Title] — [Author]" icon="book" href="...">
  [What the book covers and its approach]. 
  [Who should read it and what they'll gain].
</Card>

课程版块（可选）

<CardGroup cols={2}>
  <Card title="[Course Title] — [Platform]" icon="graduation-cap" href="...">
    [What the course covers]. 
    [Format and who it's best for].
  </Card>
</CardGroup>

---

资源审核报告模板

使用此模板记录审核结果。

# Resource Audit Report: [Concept Name]

**File:** `/docs/concepts/[slug].mdx`
**Date:** YYYY-MM-DD
**Auditor:** [Name/Claude]

---

## Summary

| Metric | Count |
|--------|-------|
| Total Resources | XX |
| Working Links (200) | XX |
| Broken Links (404) | XX |
| Redirects (301/302) | XX |
| Outdated Content | XX |
| Generic Descriptions | XX |

## Resource Count vs Targets

| Section | Current | Target | Status |
|---------|---------|--------|--------|
| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |
| Articles | X | 4-6 | ✅/⚠️/❌ |
| Videos | X | 3-4 | ✅/⚠️/❌ |
| Courses | X | 0-3 | ✅/⚠️/❌ |

---

## Broken Links (Remove or Replace)

| Resource | Line | URL | Status | Action |
|----------|------|-----|--------|--------|
| [Title] | XX | [URL] | 404 | Remove |
| [Title] | XX | [URL] | 404 | Replace with [alternative] |

---

## Redirects (Update URLs)

| Resource | Line | Old URL | New URL |
|----------|------|---------|---------|
| [Title] | XX | [old] | [new] |

---

## Outdated Resources (Consider Replacing)

| Resource | Line | Issue | Recommendation |
|----------|------|-------|----------------|
| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |
| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |

---

## Description Improvements Needed

| Resource | Line | Current | Suggested |
|----------|------|---------|-----------|
| [Title] | XX | "A guide to closures" | "[Specific description with value prop]" |
| [Title] | XX | "Learn about promises" | "[What makes it unique]. [Why read it]." |

---

## Missing Resources (Recommendations)

| Type | Gap | Suggested Resource | URL |
|------|-----|-------------------|-----|
| Reference | No main MDN link | [Topic] — MDN | [URL] |
| Article | No beginner guide | [Title] — javascript.info | [URL] |
| Video | No visual explanation | [Title] — [Creator] | [URL] |
| Article | No advanced deep-dive | [Title] — 2ality | [URL] |

---

## Non-JavaScript Resources (Remove)

| Resource | Line | Issue |
|----------|------|-------|
| [Title] | XX | Primarily about C#, not JavaScript |

---

## Action Items

### High Priority (Do First)
1. **Remove broken link:** [Title] (line XX)
2. **Add missing MDN reference:** [Topic]
3. **Replace outdated resource:** [Title] with [alternative]

### Medium Priority
1. **Update redirect URL:** [Title] (line XX)
2. **Improve description:** [Title] (line XX)
3. **Add beginner-friendly article**

### Low Priority
1. **Add additional video resource**
2. **Consider adding course section**

---

## Verification Checklist

After making changes:

- [ ] All broken links removed or replaced
- [ ] All redirect URLs updated
- [ ] Outdated resources replaced
- [ ] Generic descriptions rewritten
- [ ] Missing resource types added
- [ ] Resource counts meet targets
- [ ] All new links verified working
- [ ] All descriptions are specific and valuable

---

快速参考

图标参考

内容类型	图标值
MDN/官方文档	book
文章/博客文章	newspaper
视频	video
课程	graduation-cap
书籍	book
相关概念	根据上下文选择

字符指南

元素	指南
卡片标题	保持简洁；视频标题中注明创作者
描述句 1	说明内容涵盖什么／有何独特之处
描述句 2	说明为什么值得阅读／观看，以及适合哪些人

资源排序

在每个版块内，按以下顺序排列资源：

1. 最基础、最适合入门的内容优先
2. 官方参考资料优先于社区内容
3. 最值得推荐的内容放在显眼位置
4. 进阶／小众内容放在最后

---

质量检查清单

链接验证

• 所有链接均返回 200（而非 404、301）
• 没有重定向链
• 没有未注明的硬性付费墙
• 有 HTTPS 版本时，所有 URL 均使用 HTTPS

内容质量

• 所有资源都聚焦 JavaScript
• 没有教授反模式的资源
• 发布日期符合主题要求
• 入门和进阶内容搭配合理
• 包含视觉和文本资源

描述质量

• 所有描述都具体（而非泛泛而谈）
• 描述说明了资源的独特价值
• 没有“……的全面指南”之类的说法
• 每条描述均为 2 个句子
• 描述与实际内容相符

完整性

• 2-4 项 MDN/官方参考资料
• 4-6 篇优质文章
• 3-4 个优质视频
• 资源排序合理
• 教学风格多样

---

总结

为概念页面整理资源时：

1. 先审核——检查所有现有链接和内容
2. 找出差距——对照目标（2-4 项参考资料、4-6 篇文章、3-4 个视频）
3. 寻找优质资源——搜索可信来源
4. 撰写具体描述——说明独特之处，以及值得阅读或观看的原因
5. 正确排版——使用正确的 Card 语法、图标和排序
6. 记录更改——使用审核报告模板

**请记住：**资源应该提升学习效果，而不是凑数。每个链接都应提供真正的价值。重质不重量——少数优质资源胜过大量平庸资源。