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

• 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

• 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

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

• 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

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

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

• Complete

  .mdx

  file at

  /docs/concepts/{concept-name}.mdx

• File added to

  docs.json

  navigation (if new)

• 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

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

• 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

• 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

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

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

• All tests passing
• All MDN links valid
• All external resources accessible
• No technical inaccuracies found
• No common misconceptions

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

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

• Score 24+ out of 27 (90%+)
• Title optimized
• Meta description optimized
• Keywords placed naturally
• Featured snippet optimized
• Internal links complete

• 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

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

• 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

• 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

• Title tag optimized (50-60 chars)
• Meta description optimized (150-160 chars)
• Keywords placed correctly
• Content structure verified
• Featured snippet optimized
• Internal links complete

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

• 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

• Tests: XX passing
• Fact Check: ✅ All verified
• SEO Score: XX/27 (XX%)

1. /docs/concepts/[concept-name].mdx

   (created)

2. /docs/docs.json

   (updated navigation)

3. /tests/[category]/[concept-name]/[concept-name].test.js

   (created)

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

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

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