/concept-workflow

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

Skill: Complete Concept Workflow

Use this skill to create a complete, high-quality concept page from start to finish. This skill orchestrates all five specialized skills in the optimal order:

1. **Resource Curation** — Find quality learning resources 2. **Concept Writing** — Write the documentation page 3. **Test Writing** — Create tests for code examples 4. **Fact Checking** — Verify technical accuracy 5. **SEO Review** — Optimize for search visibility

When to Use

• Creating a brand new concept page from scratch
• Completely rewriting an existing concept page
• When you want a full end-to-end workflow with all quality checks

**For partial tasks, use individual skills instead:**

• Just adding resources? Use `resource-curator`
• Just writing content? Use `write-concept`
• Just adding tests? Use `test-writer`
• Just verifying accuracy? Use `fact-check`
• Just optimizing SEO? Use `seo-review`

---

Workflow Overview

┌─────────────────────────────────────────────────────────────────────────────┐
│                     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              │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘

---

Phase 1: Resource Curation

**Skill:** `resource-curator` **Goal:** Gather high-quality external resources before writing

What to Do

1. **Identify the concept category** (fundamentals, async, OOP, etc.) 2. **Search for MDN references** — Official documentation 3. **Find quality articles** — Target 4-6 from trusted sources 4. **Find quality videos** — Target 3-4 from trusted creators 5. **Evaluate each resource** — Check quality criteria 6. **Write specific descriptions** — 2 sentences each 7. **Format as Card components** — Ready to paste into the page

Deliverables

• List of 2-4 MDN/reference links with descriptions
• List of 4-6 article links with descriptions
• List of 3-4 video links with descriptions
• Optional: 1-2 courses or books

Quality Gates

Before moving to Phase 2:

• [ ] All links verified working (200 response)
• [ ] All resources are JavaScript-focused
• [ ] Descriptions are specific, not generic
• [ ] Mix of beginner and advanced content

---

Phase 2: Concept Writing

**Skill:** `write-concept` **Goal:** Create the full documentation page

What to Do

1. **Determine the category** for file organization 2. **Create the frontmatter** (title, sidebarTitle, description) 3. **Write the opening hook** — Question that draws readers in 4. **Add opening code example** — Simple example in first 200 words 5. **Write "What you'll learn" box** — 5-7 bullet points 6. **Write main content sections:**

• What is [concept]? (with 40-60 word definition for featured snippet)
• Real-world analogy
• How it works (with diagrams)
• Code examples (multiple, progressive complexity)
• Common mistakes
• Edge cases

7. **Add Key Takeaways** — 8-10 numbered points 8. **Add Test Your Knowledge** — 5-6 Q&A accordions 9. **Add Related Concepts** — 4 Cards linking to related topics 10. **Add Resources** — Paste resources from Phase 1

Deliverables

• Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`
• File added to `docs.json` navigation (if new)

Quality Gates

Before moving to Phase 3:

• [ ] Frontmatter complete (title, sidebarTitle, des