End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review
Add this skill
npx mdskills install leonardomso/concept-workflowComprehensive multi-phase workflow with detailed checklists and quality gates for each step
1---2name: concept-workflow3description: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review4---56# Skill: Complete Concept Workflow78Use 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:9101. **Resource Curation** — Find quality learning resources112. **Concept Writing** — Write the documentation page123. **Test Writing** — Create tests for code examples134. **Fact Checking** — Verify technical accuracy145. **SEO Review** — Optimize for search visibility1516## When to Use1718- Creating a brand new concept page from scratch19- Completely rewriting an existing concept page20- When you want a full end-to-end workflow with all quality checks2122**For partial tasks, use individual skills instead:**23- Just adding resources? Use `resource-curator`24- Just writing content? Use `write-concept`25- Just adding tests? Use `test-writer`26- Just verifying accuracy? Use `fact-check`27- Just optimizing SEO? Use `seo-review`2829---3031## Workflow Overview3233```34┌─────────────────────────────────────────────────────────────────────────────┐35│ COMPLETE CONCEPT WORKFLOW │36├─────────────────────────────────────────────────────────────────────────────┤37│ │38│ INPUT: Concept name (e.g., "hoisting", "event-loop", "promises") │39│ │40│ ┌──────────────────┐ │41│ │ PHASE 1: RESEARCH │ │42│ │ resource-curator │ Find MDN refs, articles, videos │43│ └────────┬─────────┘ │44│ ▼ │45│ ┌──────────────────┐ │46│ │ PHASE 2: WRITE │ │47│ │ write-concept │ Create the documentation page │48│ └────────┬─────────┘ │49│ ▼ │50│ ┌──────────────────┐ │51│ │ PHASE 3: TEST │ │52│ │ test-writer │ Generate tests for all code examples │53│ └────────┬─────────┘ │54│ ▼ │55│ ┌──────────────────┐ │56│ │ PHASE 4: VERIFY │ │57│ │ fact-check │ Verify accuracy, run tests, check links │58│ └────────┬─────────┘ │59│ ▼ │60│ ┌──────────────────┐ │61│ │ PHASE 5: OPTIMIZE│ │62│ │ seo-review │ SEO audit and final optimizations │63│ └────────┬─────────┘ │64│ ▼ │65│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │66│ │67└─────────────────────────────────────────────────────────────────────────────┘68```6970---7172## Phase 1: Resource Curation7374**Skill:** `resource-curator`75**Goal:** Gather high-quality external resources before writing7677### What to Do78791. **Identify the concept category** (fundamentals, async, OOP, etc.)802. **Search for MDN references** — Official documentation813. **Find quality articles** — Target 4-6 from trusted sources824. **Find quality videos** — Target 3-4 from trusted creators835. **Evaluate each resource** — Check quality criteria846. **Write specific descriptions** — 2 sentences each857. **Format as Card components** — Ready to paste into the page8687### Deliverables8889- List of 2-4 MDN/reference links with descriptions90- List of 4-6 article links with descriptions91- List of 3-4 video links with descriptions92- Optional: 1-2 courses or books9394### Quality Gates9596Before moving to Phase 2:97- [ ] All links verified working (200 response)98- [ ] All resources are JavaScript-focused99- [ ] Descriptions are specific, not generic100- [ ] Mix of beginner and advanced content101102---103104## Phase 2: Concept Writing105106**Skill:** `write-concept`107**Goal:** Create the full documentation page108109### What to Do1101111. **Determine the category** for file organization1122. **Create the frontmatter** (title, sidebarTitle, description)1133. **Write the opening hook** — Question that draws readers in1144. **Add opening code example** — Simple example in first 200 words1155. **Write "What you'll learn" box** — 5-7 bullet points1166. **Write main content sections:**117 - What is [concept]? (with 40-60 word definition for featured snippet)118 - Real-world analogy119 - How it works (with diagrams)120 - Code examples (multiple, progressive complexity)121 - Common mistakes122 - Edge cases1237. **Add Key Takeaways** — 8-10 numbered points1248. **Add Test Your Knowledge** — 5-6 Q&A accordions1259. **Add Related Concepts** — 4 Cards linking to related topics12610. **Add Resources** — Paste resources from Phase 1127128### Deliverables129130- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`131- File added to `docs.json` navigation (if new)132133### Quality Gates134135Before moving to Phase 3:136- [ ] Frontmatter complete (title, sidebarTitle, description)137- [ ] Opens with question hook138- [ ] Code example in first 200 words139- [ ] "What you'll learn" Info box present140- [ ] All required sections present141- [ ] Resources section complete142- [ ] 1,500+ words143144---145146## Phase 3: Test Writing147148**Skill:** `test-writer`149**Goal:** Create comprehensive tests for all code examples150151### What to Do1521531. **Scan the concept page** for all code examples1542. **Categorize examples:**155 - Testable (console.log, return values)156 - DOM-specific (needs jsdom)157 - Error examples (toThrow)158 - Conceptual (skip)1593. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`1604. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`1615. **Write tests** for each code example with source line references1626. **Run tests** to verify all pass163164### Deliverables165166- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`167- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`168- All tests passing169170### Quality Gates171172Before moving to Phase 4:173- [ ] All testable code examples have tests174- [ ] Source line references in comments175- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`176- [ ] DOM tests in separate file with jsdom directive177178---179180## Phase 4: Fact Checking181182**Skill:** `fact-check`183**Goal:** Verify technical accuracy of all content184185### What to Do1861871. **Verify code examples:**188 - Run tests: `npm test -- tests/{category}/{concept}/`189 - Check any untested examples manually190 - Verify output comments match actual outputs1911922. **Verify MDN/spec claims:**193 - Click all MDN links — verify they work194 - Compare API descriptions to MDN195 - Check ECMAScript spec for nuanced claims1961973. **Verify external resources:**198 - Check all article/video links work199 - Skim content for accuracy200 - Verify descriptions match content2012024. **Audit technical claims:**203 - Look for "always/never" statements204 - Verify performance claims205 - Check for common misconceptions2062075. **Generate fact-check report**208209### Deliverables210211- Fact-check report documenting:212 - Code verification results213 - Link check results214 - Any issues found and fixes made215216### Quality Gates217218Before moving to Phase 5:219- [ ] All tests passing220- [ ] All MDN links valid221- [ ] All external resources accessible222- [ ] No technical inaccuracies found223- [ ] No common misconceptions224225---226227## Phase 5: SEO Review228229**Skill:** `seo-review`230**Goal:** Optimize for search visibility231232### What to Do2332341. **Audit title tag:**235 - 50-60 characters236 - Primary keyword in first half237 - Ends with "in JavaScript"238 - Contains compelling hook2392402. **Audit meta description:**241 - 150-160 characters242 - Starts with action word (Learn, Understand, Discover)243 - Contains primary keyword244 - Promises specific value2452463. **Audit keyword placement:**247 - Keyword in title248 - Keyword in description249 - Keyword in first 100 words250 - Keyword in at least one H22512524. **Audit content structure:**253 - Question hook opening254 - Code in first 200 words255 - "What you'll learn" box256 - Short paragraphs2572585. **Audit featured snippet optimization:**259 - 40-60 word definition after "What is" H2260 - Question-format H2s261 - Numbered steps for how-to content2622636. **Audit internal linking:**264 - 3-5 related concepts linked265 - Descriptive anchor text266 - Related Concepts section complete2672687. **Calculate score** and fix any issues269270### Deliverables271272- SEO audit report with score (X/27)273- All high-priority fixes implemented274275### Quality Gates276277Before marking complete:278- [ ] Score 24+ out of 27 (90%+)279- [ ] Title optimized280- [ ] Meta description optimized281- [ ] Keywords placed naturally282- [ ] Featured snippet optimized283- [ ] Internal links complete284285---286287## Complete Workflow Checklist288289Use this master checklist to track progress through all phases.290291```markdown292# Concept Workflow: [Concept Name]293294**Started:** YYYY-MM-DD295**Target Category:** {category}296**File Path:** `/docs/concepts/{concept-name}.mdx`297**Test Path:** `/tests/{category}/{concept-name}/`298299---300301## Phase 1: Resource Curation302- [ ] MDN references found (2-4)303- [ ] Articles found (4-6)304- [ ] Videos found (3-4)305- [ ] All links verified working306- [ ] Descriptions written (specific, 2 sentences)307- [ ] Resources formatted as Cards308309**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete310311---312313## Phase 2: Concept Writing314- [ ] Frontmatter complete315- [ ] Opening hook written316- [ ] Opening code example added317- [ ] "What you'll learn" box added318- [ ] Main content sections written319- [ ] Key Takeaways added320- [ ] Test Your Knowledge added321- [ ] Related Concepts added322- [ ] Resources pasted from Phase 1323- [ ] Added to docs.json (if new)324325**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete326327---328329## Phase 3: Test Writing330- [ ] Code examples extracted and categorized331- [ ] Test file created332- [ ] DOM test file created (if needed)333- [ ] All testable examples have tests334- [ ] Source line references added335- [ ] Tests run and passing336337**Test Results:** X passing, X failing338339**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete340341---342343## Phase 4: Fact Checking344- [ ] All tests passing345- [ ] Code examples verified accurate346- [ ] MDN links checked (X/X valid)347- [ ] External resources checked (X/X valid)348- [ ] Technical claims audited349- [ ] No misconceptions found350- [ ] Issues fixed351352**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete353354---355356## Phase 5: SEO Review357- [ ] Title tag optimized (50-60 chars)358- [ ] Meta description optimized (150-160 chars)359- [ ] Keywords placed correctly360- [ ] Content structure verified361- [ ] Featured snippet optimized362- [ ] Internal links complete363364**SEO Score:** X/27 (X%)365366**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete367368---369370## Final Status371372**All Phases Complete:** ⬜ No | ✅ Yes373**Ready to Publish:** ⬜ No | ✅ Yes374**Completed:** YYYY-MM-DD375```376377---378379## Execution Instructions380381When executing this workflow, follow these steps:382383### Step 1: Initialize384385```markdown386Starting concept workflow for: [CONCEPT NAME]387388Category: [fundamentals/functions-execution/web-platform/etc.]389File: /docs/concepts/[concept-name].mdx390Tests: /tests/[category]/[concept-name]/391```392393### Step 2: Execute Each Phase394395For each phase:3963971. **Announce the phase:**398 ```markdown399 ## Phase X: [Phase Name]400 Using skill: [skill-name]401 ```4024032. **Load the skill** to get detailed instructions4044053. **Execute the phase** following the skill's methodology4064074. **Report completion:**408 ```markdown409 Phase X complete:410 - [Deliverable 1]411 - [Deliverable 2]412 - Quality gates: ✅ All passed413 ```4144155. **Move to next phase** only after quality gates pass416417### Step 3: Final Report418419After all phases complete:420421```markdown422# Workflow Complete: [Concept Name]423424## Summary425- **Concept Page:** `/docs/concepts/[concept-name].mdx`426- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`427- **Word Count:** X,XXX words428- **Code Examples:** XX (XX tested)429- **Resources:** X MDN, X articles, X videos430431## Quality Metrics432- **Tests:** XX passing433- **Fact Check:** ✅ All verified434- **SEO Score:** XX/27 (XX%)435436## Files Created/Modified4371. `/docs/concepts/[concept-name].mdx` (created)4382. `/docs/docs.json` (updated navigation)4393. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)440441## Ready to Publish: ✅ Yes442```443444---445446## Phase Dependencies447448Some phases can be partially parallelized, but the general flow should be:449450```451Phase 1 (Resources) ──┐452 ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐453 │ │454 │ ┌───────────────────────────────────┘455 │ ▼456 └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)457```458459- **Phase 1 before Phase 2:** Resources inform what to write460- **Phase 2 before Phase 3:** Need content before writing tests461- **Phase 3 before Phase 4:** Tests are part of fact-checking462- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish463464---465466## Skill Reference467468| Phase | Skill | Purpose |469|-------|-------|---------|470| 1 | `resource-curator` | Find and evaluate external resources |471| 2 | `write-concept` | Write the documentation page |472| 3 | `test-writer` | Generate tests for code examples |473| 4 | `fact-check` | Verify technical accuracy |474| 5 | `seo-review` | Optimize for search visibility |475476Each skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.477478---479480## Time Estimates481482| Phase | Estimated Time | Notes |483|-------|---------------|-------|484| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |485| Phase 2: Writing | 1-3 hours | Depends on concept complexity |486| Phase 3: Tests | 30-60 min | Depends on number of code examples |487| Phase 4: Fact Check | 15-30 min | Most automated via tests |488| Phase 5: SEO | 15-30 min | Mostly checklist verification |489| **Total** | **2-5 hours** | For a complete concept page |490491---492493## Quick Start494495To start the workflow for a new concept:496497```4981. Determine the concept name and category4992. Load this skill (concept-workflow)5003. Execute Phase 1: Load resource-curator, find resources5014. Execute Phase 2: Load write-concept, write the page5025. Execute Phase 3: Load test-writer, create tests5036. Execute Phase 4: Load fact-check, verify accuracy5047. Execute Phase 5: Load seo-review, optimize SEO5058. Generate final report5069. Commit changes507```508509**Example prompt to start:**510511> "Create a complete concept page for 'hoisting' using the concept-workflow skill"512513This will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.514
Full transparency — inspect the skill content before installing.