concept-workflow by leonardomso

---
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, description)
- [ ] Opens with question hook
- [ ] Code example in first 200 words
- [ ] "What you'll learn" Info box present
- [ ] All required sections present
- [ ] Resources section complete
- [ ] 1,500+ words

---

## Phase 3: Test Writing

**Skill:** `test-writer`
**Goal:** Create comprehensive tests for all code examples

### What to Do

1. **Scan the concept page** for all code examples
2. **Categorize examples:**
   - Testable (console.log, return values)
   - DOM-specific (needs jsdom)
   - Error examples (toThrow)
   - Conceptual (skip)
3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`
4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`
5. **Write tests** for each code example with source line references
6. **Run tests** to verify all pass

### Deliverables

- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`
- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`
- All tests passing

### Quality Gates

Before moving to Phase 4:
- [ ] All testable code examples have tests
- [ ] Source line references in comments
- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`
- [ ] DOM tests in separate file with jsdom directive

---

## Phase 4: Fact Checking

**Skill:** `fact-check`
**Goal:** Verify technical accuracy of all content

### What to Do

1. **Verify code examples:**
   - Run tests: `npm test -- tests/{category}/{concept}/`
   - Check any untested examples manually
   - Verify output comments match actual outputs

2. **Verify MDN/spec claims:**
   - Click all MDN links — verify they work
   - Compare API descriptions to MDN
   - Check ECMAScript spec for nuanced claims

3. **Verify external resources:**
   - Check all article/video links work
   - Skim content for accuracy
   - Verify descriptions match content

4. **Audit technical claims:**
   - Look for "always/never" statements
   - Verify performance claims
   - Check for common misconceptions

5. **Generate fact-check report**

### Deliverables

- Fact-check report documenting:
  - Code verification results
  - Link check results
  - Any issues found and fixes made

### Quality Gates

Before moving to Phase 5:
- [ ] All tests passing
- [ ] All MDN links valid
- [ ] All external resources accessible
- [ ] No technical inaccuracies found
- [ ] No common misconceptions

---

## Phase 5: SEO Review

**Skill:** `seo-review`
**Goal:** Optimize for search visibility

### What to Do

1. **Audit title tag:**
   - 50-60 characters
   - Primary keyword in first half
   - Ends with "in JavaScript"
   - Contains compelling hook

2. **Audit meta description:**
   - 150-160 characters
   - Starts with action word (Learn, Understand, Discover)
   - Contains primary keyword
   - Promises specific value

3. **Audit keyword placement:**
   - Keyword in title
   - Keyword in description
   - Keyword in first 100 words
   - Keyword in at least one H2

4. **Audit content structure:**
   - Question hook opening
   - Code in first 200 words
   - "What you'll learn" box
   - Short paragraphs

5. **Audit featured snippet optimization:**
   - 40-60 word definition after "What is" H2
   - Question-format H2s
   - Numbered steps for how-to content

6. **Audit internal linking:**
   - 3-5 related concepts linked
   - Descriptive anchor text
   - Related Concepts section complete

7. **Calculate score** and fix any issues

### Deliverables

- SEO audit report with score (X/27)
- All high-priority fixes implemented

### Quality Gates

Before marking complete:
- [ ] Score 24+ out of 27 (90%+)
- [ ] Title optimized
- [ ] Meta description optimized
- [ ] Keywords placed naturally
- [ ] Featured snippet optimized
- [ ] Internal links complete

---

## Complete Workflow Checklist

Use this master checklist to track progress through all phases.

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

---

## Execution Instructions

When executing this workflow, follow these steps:

### Step 1: Initialize

```markdown
Starting concept workflow for: [CONCEPT NAME]

Category: [fundamentals/functions-execution/web-platform/etc.]
File: /docs/concepts/[concept-name].mdx
Tests: /tests/[category]/[concept-name]/
```

### Step 2: Execute Each Phase

For each phase:

1. **Announce the phase:**
   ```markdown
   ## Phase X: [Phase Name]
   Using skill: [skill-name]
   ```

2. **Load the skill** to get detailed instructions

3. **Execute the phase** following the skill's methodology

4. **Report completion:**
   ```markdown
   Phase X complete:
   - [Deliverable 1]
   - [Deliverable 2]
   - Quality gates: ✅ All passed
   ```

5. **Move to next phase** only after quality gates pass

### Step 3: Final Report

After all phases complete:

```markdown
# 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 Dependencies

Some phases can be partially parallelized, but the general flow should be:

```
Phase 1 (Resources) ──┐
                      ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐
                      │                                             │
                      │         ┌───────────────────────────────────┘
                      │         ▼
                      └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)
```

- **Phase 1 before Phase 2:** Resources inform what to write
- **Phase 2 before Phase 3:** Need content before writing tests
- **Phase 3 before Phase 4:** Tests are part of fact-checking
- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish

---

## Skill Reference

| Phase | Skill | Purpose |
|-------|-------|---------|
| 1 | `resource-curator` | Find and evaluate external resources |
| 2 | `write-concept` | Write the documentation page |
| 3 | `test-writer` | Generate tests for code examples |
| 4 | `fact-check` | Verify technical accuracy |
| 5 | `seo-review` | Optimize for search visibility |

Each skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.

---

## Time Estimates

| Phase | Estimated Time | Notes |
|-------|---------------|-------|
| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |
| Phase 2: Writing | 1-3 hours | Depends on concept complexity |
| Phase 3: Tests | 30-60 min | Depends on number of code examples |
| Phase 4: Fact Check | 15-30 min | Most automated via tests |
| Phase 5: SEO | 15-30 min | Mostly checklist verification |
| **Total** | **2-5 hours** | For a complete concept page |

---

## Quick Start

To start the workflow for a new concept:

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

**Example prompt to start:**

> "Create a complete concept page for 'hoisting' using the concept-workflow skill"

This will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.