resource-curator

SKILL.md

Skill: Resource Curator for Concept Pages

Use this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.

When to Use

Adding resources to a new concept page

Refreshing resources on existing pages

Auditing for broken or outdated links

Reviewing community-contributed resources

Periodic link maintenance

Resource Curation Methodology

Follow these five phases for comprehensive resource curation.

Phase 1: Audit Existing Resources

Before adding new resources, audit what's already there:

Check link accessibility — Does each link return 200?

Verify content accuracy — Is the content still correct?

Check publication dates — Is it too old for the topic?

Identify outdated content — Does it use old syntax/patterns?

Review descriptions — Are they specific or generic?

Phase 2: Identify Resource Gaps

Compare current resources against targets:

Section
Target Count
Icon

Reference
2-4 MDN links
book

Articles
4-6 articles
newspaper

Videos
3-4 videos
video

Courses
1-3 (optional)
graduation-cap

Books
1-2 (optional)
book

Ask:

Are there enough resources for beginners AND advanced learners?

Is there visual content (diagrams, animations)?

Are official references (MDN) included?

Is there diversity in teaching styles?

Phase 3: Find New Resources

Search trusted sources using targeted queries:

For Articles:

[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

For Videos:

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

For MDN:

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

Phase 4: Write Descriptions

Every resource needs a specific, valuable description:

Formula:

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)

Phase 5: Format and Organize

Use correct Card syntax with proper icons

Order resources logically (foundational first, advanced later)

Ensure consistent formatting

Trusted Sources

Reference Sources (Priority Order)

Priority
Source
URL
Best For

1
MDN Web Docs
developer.mozilla.org
API docs, guides, compatibility

2
ECMAScript Spec
tc39.es/ecma262
Authoritative behavior

3
Node.js Docs
nodejs.org/docs
Node-specific APIs

4
Web.dev
web.dev
Performance, best practices

5
Can I Use
caniuse.com
Browser compatibility

Article Sources (Priority Order)

Priority
Source
Why Trusted

1
javascript.info
Comprehensive, exercises, well-maintained

2
MDN Guides
Official, accurate, regularly updated

3
freeCodeCamp
Beginner-friendly, practical

4
2ality (Dr. Axel)
Deep technical dives, spec-focused

5
CSS-Tricks
DOM, visual topics, well-written

6
dev.to (Lydia Hallie)
Visual explanations, animations

7
LogRocket Blog
Practical tutorials, real-world

8
Smashing Magazine
In-depth, well-researched

9
Digital Ocean
Clear tutorials, examples

10
Kent C. Dodds
Testing, React, best practices

Video Creators (Priority Order)

Priority
Creator
Style
Best For

1
Fireship
Fast, modern, entertaining
Quick overviews, modern JS

2
Web Dev Simplified
Clear, beginner-friendly
Beginners, fundamentals

3
Fun Fun Function
Deep-dives, personality
Understanding "why"

4
Traversy Media
Comprehensive crash courses
Full topic coverage

5
JSConf/dotJS
Expert conference talks
Advanced, in-depth

6
Academind
Thorough explanations
Complete understanding

7
The Coding Train
Creative, visual
Visual learners

8
Wes Bos
Practical, real-world
Applied learning

9
The Net Ninja
Step-by-step tutorials
Following along

10
Programming with Mosh
Professional, clear
Career-focused

Course Sources

Source
Type
Notes

javascript.info
Free
Comprehensive, exercises

Piccalilli
Free
Well-written, modern

freeCodeCamp
Free
Project-based

Frontend Masters
Paid
Expert instructors

Egghead.io
Paid
Short, focused lessons

Udemy (top-rated)
Paid
Check reviews carefully

Codecademy
Freemium
Interactive

Quality Criteria

Must Have (Required)

 Link works — Returns 200 (not 404, 301, 5xx)

 JavaScript-focused — Not primarily about C#, Python, Java, etc.

 Technically accurate — No factual errors or anti-patterns

 Accessible — Free or has meaningful free preview

Should Have (Preferred)

 Recent enough — See publication date guidelines below

 Reputable source — From trusted sources list or well-known creator

 Unique perspective — Not duplicate of existing resources

 Appropriate depth — Matches concept complexity

 Good engagement — Positive comments, high views (for videos)

Red Flags (Reject)

Red Flag
Why It Matters

Uses var everywhere
Outdated for ES6+ topics

Teaches anti-patterns
Harmful to learners

Primarily other languages
Wrong focus

Hard paywall (no preview)
Inaccessible

Pre-2015 for modern topics
Likely outdated

Low quality comments
Often indicates issues

Factual errors
Spreads misinformation

Clickbait title, thin content
Wastes reader time

Publication Date Guidelines

Topic Category
Minimum Year
Reasoning

ES6+ Features
2015+
ES6 released June 2015

Promises
2015+
Native Promises in ES6

async/await
2017+
ES2017 feature

ES Modules
2018+
Stable browser support

Optional chaining (?.)
2020+
ES2020 feature

Nullish coalescing (??)
2020+
ES2020 feature

Top-level await
2022+
ES2022 feature

Fundamentals (closures, scope, this)
Any
Core concepts don't change

DOM manipulation
2018+
Modern APIs preferred

Fetch API
2017+
Widespread support

Rule of thumb: For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.

Description Writing Guide

The Formula

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)

Good Examples

<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>

Bad Examples (Avoid)

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

<!-- NO VALUE PROPOSITION -->
<Card title="Learn Closures" icon="video" href="...">
  This video explains closures in JavaScript.
</Card>

<!-- VAGUE, NO SPECIFICS -->
<Card title="JavaScript Guide" icon="newspaper" href="...">
  Everything you need to know about JavaScript.
</Card>

<!-- JUST RESTATING THE TITLE -->
<Card title="Understanding the Event Loop" icon="video" href="...">
  A video about understanding the event loop.
</Card>

Words and Phrases to Avoid

Avoid
Why
Use Instead

"comprehensive guide to..."
Vague, overused
Specify what's covered

"learn all about..."
Generic
What specifically will they learn?

"everything you need to know..."
Hyperbolic
Be specific

"great tutorial on..."
Subjective filler
Why is it great?

"explains X"
Too basic
How does it explain? What's unique?

"in-depth look at..."
Vague
What depth? What aspect?

Words and Phrases That Work

Good Phrase
Example

"step-by-step walkthrough"
"Step-by-step walkthrough of building a Promise from scratch"

"visual explanation"
"Visual explanation with animated diagrams"

"deep dive into"
"Deep dive into V8's optimization strategies"

"practical examples of"
"Practical examples of closures in React hooks"

"the go-to reference for"
"The go-to reference for array method signatures"

"finally makes X click"
"Finally makes prototype chains click"

"perfect for beginners"
"Perfect for beginners new to async code"

"covers X, Y, and Z"
"Covers creation, chaining, and error handling"

Link Audit Process

Step 1: Check Each Link

For each resource in the concept page:

Click the link — Does it load?

Note the HTTP status:

Status
Meaning
Action

200
OK
Keep, continue to content check

301/302
Redirect
Update to final URL

404
Not Found
Remove or find replacement

403
Forbidden
Check manually, may be geo-blocked

5xx
Server Error
Retry later, may be temporary

Step 2: Content Verification

For each accessible link:

Skim the content — Is it still accurate?

Check the date — When was it published/updated?

Verify JavaScript focus — Is it primarily about JS?

Look for red flags — Anti-patterns, errors, outdated syntax

Step 3: Description Review

For each resource:

Read current description — Is it specific?

Compare to actual content — Does it match?

Check for generic phrases — "comprehensive guide", etc.

Identify improvements — How can it be more specific?

Step 4: Gap Analysis

After auditing all resources:

Count by section — Do we meet targets?

Check diversity — Beginner AND advanced? Visual AND text?

Identify missing types — No MDN? No videos?

Note recommendations — What should we add?

Resource Section Templates

Reference Section

## 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 Section

## 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 Section

## 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>

Books Section (Optional)

<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>

Courses Section (Optional)

<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 Template

Use this template to document audit findings.

# 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

Quick Reference

Icon Reference

Content Type
Icon Value

MDN/Official docs
book

Articles/Blog posts
newspaper

Videos
video

Courses
graduation-cap

Books
book

Related concepts
Context-appropriate

Character Guidelines

Element
Guideline

Card title
Keep concise, include creator for videos

Description sentence 1
What it covers / what's unique

Description sentence 2
Why read/watch / who it's for

Resource Ordering

Within each section, order resources:

Most foundational/beginner-friendly first

Official references before community content

Most highly recommended prominently placed

Advanced/niche content last

Quality Checklist

Link Verification

 All links return 200 (not 404, 301)

 No redirect chains

 No hard paywalls without notice

 All URLs are HTTPS where available

Content Quality

 All resources are JavaScript-focused

 No resources teaching anti-patterns

 Publication dates appropriate for topic

 Mix of beginner and advanced content

 Visual and text resources included

Description Quality

 All descriptions are specific (not generic)

 Descriptions explain unique value

 No "comprehensive guide to..." phrases

 Each description is 2 sentences

 Descriptions match actual content

Completeness

 2-4 MDN/official references

 4-6 quality articles

 3-4 quality videos

 Resources ordered logically

 Diversity in teaching styles

Summary

When curating resources for a concept page:

Audit first — Check all existing links and content

Identify gaps — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)

Find quality resources — Search trusted sources

Write specific descriptions — What's unique + why read/watch

Format correctly — Proper Card syntax, icons, ordering

Document changes — Use the audit report template

Remember: Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.