End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review
apm install @leonardomso/concept-workflow
[](https://apm-p1ls2dz87-atlamors-projects.vercel.app/packages/@leonardomso/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, 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.