{"owner":"leonardomso","repo":"33-js-concepts","hasSkills":true,"totalSkillsCount":13,"totalTokensCount":81934,"categories":["claude-rule","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":[".claude/CLAUDE.md",".claude/skills/concept-workflow/SKILL.md",".claude/skills/fact-check/SKILL.md",".claude/skills/resource-curator/SKILL.md",".claude/skills/seo-review/SKILL.md",".claude/skills/test-writer/SKILL.md",".claude/skills/write-concept/SKILL.md",".opencode/skill/concept-workflow/SKILL.md",".opencode/skill/fact-check/SKILL.md",".opencode/skill/resource-curator/SKILL.md",".opencode/skill/seo-review/SKILL.md",".opencode/skill/test-writer/SKILL.md",".opencode/skill/write-concept/SKILL.md"],"skills":{".claude/CLAUDE.md":"# 33 JavaScript Concepts - Project Context\n\n## Overview\n\nThis repository is a curated collection of **33 essential JavaScript concepts** that every JavaScript developer should know. It serves as a comprehensive learning resource and study guide for developers at all levels, from beginners to advanced practitioners.\n\nThe project was recognized by GitHub as one of the **top open source projects of 2018** and has been translated into 40+ languages by the community.\n\n## Project Purpose\n\n- Help developers master fundamental and advanced JavaScript concepts\n- Provide curated resources (articles, videos, books) for each concept\n- Serve as a reference guide for interview preparation\n- Foster community contributions through translations and resource additions\n\n## Repository Structure\n\n```\n33-js-concepts/\n├── .claude/ # Claude configuration\n│ ├── CLAUDE.md # Project context and guidelines\n│ └── skills/ # Custom skills for content creation\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── .opencode/ # OpenCode configuration\n│ └── skill/ # Custom skills (mirrored from .claude/skills)\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── docs/ # Mintlify documentation site\n│ ├── docs.json # Mintlify configuration\n│ ├── index.mdx # Homepage\n│ ├── introduction.mdx # Getting started guide\n│ ├── contributing.mdx # Contribution guidelines\n│ ├── translations.mdx # Community translations\n│ └── concepts/ # 33 concept pages\n│ ├── call-stack.mdx\n│ ├── primitive-types.mdx\n│ └── ... (all 33 concepts)\n├── tests/ # Vitest test suites\n│ └── fundamentals/ # Tests for fundamental concepts (1-6)\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── vitest.config.js # Vitest configuration\n├── README.md # Main GitHub README\n├── CONTRIBUTING.md # Guidelines for contributors\n├── CODE_OF_CONDUCT.md # Community standards\n├── LICENSE # MIT License\n├── package.json # Project metadata\n├── opencode.jsonc # OpenCode AI assistant configuration\n└── github-image.png # Project banner image\n```\n\n## The 31 Concepts (32nd and 33rd coming soon)\n\n### Fundamentals (1-6)\n1. Primitive Types\n2. Value Types and Reference Types\n3. Type Coercion (Implicit, Explicit, Nominal, Structuring and Duck Typing)\n4. Equality Operators (== vs === vs typeof)\n5. Scope & Closures\n6. Call Stack\n\n### Functions & Execution (7-8)\n7. Event Loop (Message Queue)\n8. IIFE, Modules and Namespaces\n\n### Web Platform (9-10)\n9. DOM and Layout Trees\n10. HTTP & Fetch\n\n### Object-Oriented JS (11-15)\n11. Factories and Classes\n12. this, call, apply and bind\n13. new, Constructor, instanceof and Instances\n14. Prototype Inheritance and Prototype Chain\n15. Object.create and Object.assign\n\n### Functional Programming (16-19)\n16. map, reduce, filter\n17. Pure Functions, Side Effects, State Mutation and Event Propagation\n18. Higher-Order Functions\n19. Recursion\n\n### Async JavaScript (20-22)\n20. Collections and Generators\n21. Promises\n22. async/await\n\n### Advanced Topics (23-31)\n23. JavaScript Engines\n24. Data Structures\n25. Big O Notation (Expensive Operations)\n26. Algorithms\n27. Inheritance, Polymorphism and Code Reuse\n28. Design Patterns\n29. Partial Applications, Currying, Compose and Pipe\n30. Clean Code\n\n## Content Format\n\nEach concept page in `/docs/concepts/` follows this structure:\n\n### 1. Frontmatter\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description of the concept\"\n---\n```\n\n### 2. Real-World Analogy\nStart with an engaging analogy that makes the concept relatable. Include ASCII art diagrams when helpful.\n\n### 3. Info Box (What You'll Learn)\n```mdx\n\n**What you'll learn in this guide:**\n- Key point 1\n- Key point 2\n- Key point 3\n\n```\n\n### 4. Main Content Sections\n- Use clear headings (`##`, `###`) to organize topics\n- Include code examples with explanations\n- Use Mintlify components (``, ``, ``, etc.)\n- Add diagrams and visualizations where helpful\n\n### 5. Related Concepts\n```mdx\n\n \n Brief description of how it relates\n \n\n```\n\n### 6. Reference\n```mdx\n\n Official MDN documentation\n\n```\n\n### 7. Articles\nCurated blog posts and tutorials using `` with `icon=\"newspaper\"`.\n\n### 8. Courses (optional)\nEducational courses using `` with `icon=\"graduation-cap\"`.\n\n### 9. Videos\nYouTube tutorials and conference talks using `` with `icon=\"video\"`.\n\n## Contributing Guidelines\n\n### Adding Resources\n- Resources should be high-quality and educational\n- Follow the existing Card format for consistency\n- Include a brief description of what the resource covers\n\n### Resource Format\n```mdx\n\n Brief description of what the reader will learn from this resource.\n\n```\n\n## Git Commit Conventions\n\nThis project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification. All commits must adhere to this format for consistency and automated changelog generation.\n\n### Commit Message Format\n\n```\n[optional scope]: \n\n[optional body]\n\n[optional footer(s)]\n```\n\n### Commit Types\n\n| Type | Description |\n|------|-------------|\n| `feat` | New features or content additions (e.g., new resources, new concepts) |\n| `fix` | Bug fixes, broken link corrections, typo fixes |\n| `docs` | Documentation changes (README updates, CONTRIBUTING updates) |\n| `style` | Formatting changes (markdown formatting, whitespace) |\n| `refactor` | Content restructuring without adding new resources |\n| `chore` | Maintenance tasks (config updates, dependency updates) |\n| `ci` | CI/CD configuration changes |\n| `perf` | Performance improvements |\n| `test` | Adding or updating tests |\n| `build` | Build system or external dependency changes |\n| `revert` | Reverting a previous commit |\n\n### Examples\n\n```bash\n# Adding a new resource\nfeat: add article about closures by John Doe\n\n# Fixing a broken link\nfix: update broken MDN link in Promises section\n\n# Documentation update\ndocs: update contributing guidelines for translations\n\n# Maintenance task\nchore: update opencode.json configuration\n\n# Adding content to existing concept\nfeat(closures): add video tutorial by Fun Fun Function\n\n# Multiple changes in body\nfeat: add new resources for async/await\n\n- Add article by JavaScript Teacher\n- Add video tutorial by Traversy Media\n- Update reference links\n```\n\n### Rules\n\n1. **Use lowercase** for the type and description\n2. **No period** at the end of the description\n3. **Use imperative mood** (\"add\" not \"added\", \"fix\" not \"fixed\")\n4. **Keep the first line under 72 characters**\n5. **Reference issues** in the footer when applicable (e.g., `Closes #123`)\n\n## MCP Servers Available\n\nThis project has OpenCode configured with:\n\n1. **Context7** - Documentation search (`use context7` in prompts)\n2. **GitHub** - Repository management (`use github` in prompts)\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) as the test runner to verify that code examples in the documentation work correctly.\n\n### Running Tests\n\n```bash\n# Run all tests once\nnpm test\n\n# Run tests in watch mode (re-runs on file changes)\nnpm run test:watch\n\n# Run tests with coverage report\nnpm run test:coverage\n```\n\n### Test Structure\n\nTests are organized by concept category in the `tests/` directory:\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### Writing Tests for Code Examples\n\nWhen adding new code examples to concept documentation, please include corresponding tests:\n\n1. **File naming**: Create `{concept-name}.test.js` in `tests/{category}/{concept-name}/`\n2. **Use explicit imports**: \n ```javascript\n import { describe, it, expect } from 'vitest'\n ```\n3. **Convert console.log examples to assertions**:\n ```javascript\n // Documentation example:\n // console.log(typeof \"hello\") // \"string\"\n \n // Test:\n it('should return string type', () => {\n expect(typeof \"hello\").toBe(\"string\")\n })\n ```\n4. **Test error cases**: Use `expect(() => { ... }).toThrow()` for operations that should throw\n5. **Skip browser-specific examples**: Tests run in Node.js, so skip DOM/window/document examples\n6. **Note strict mode behavior**: Vitest runs in strict mode, so operations that \"silently fail\" in non-strict mode will throw `TypeError`\n\n### Current Test Coverage\n\n| Category | Concept | Tests |\n|----------|---------|-------|\n| Fundamentals | Call Stack | 20 |\n| Fundamentals | Primitive Types | 73 |\n| Fundamentals | Value vs Reference Types | 54 |\n| Fundamentals | Type Coercion | 74 |\n| Fundamentals | Equality Operators | 87 |\n| Fundamentals | Scope and Closures | 46 |\n| Functions & Execution | Event Loop | 56 |\n| Functions & Execution | IIFE & Modules | 61 |\n| Web Platform | DOM | 85 |\n| Web Platform | HTTP & Fetch | 72 |\n| **Total** | | **628** |\n\n## Documentation Site (Mintlify)\n\nThe project includes a Mintlify documentation site in the `/docs` directory.\n\n### Local Development\n\n```bash\n# Using npm script\nnpm run docs\n\n# Or install Mintlify CLI globally\nnpm i -g mint\ncd docs\nmint dev\n```\n\nThe site will be available at `http://localhost:3000`.\n\n### Documentation Structure\n\n- **Getting Started**: Homepage and introduction\n- **Fundamentals**: Concepts 1-6 (Primitive Types through Call Stack)\n- **Functions & Execution**: Concepts 7-8 (Event Loop through IIFE/Modules)\n- **Web Platform**: Concepts 9-10 (DOM and HTTP & Fetch)\n- **Object-Oriented JS**: Concepts 11-15 (Factories through Object.create/assign)\n- **Functional Programming**: Concepts 16-19 (map/reduce/filter through Recursion)\n- **Async JavaScript**: Concepts 20-22 (Collections/Generators through async/await)\n- **Advanced Topics**: Concepts 23-31 (JavaScript Engines through Clean Code)\n\n### Adding/Editing Concept Pages\n\nEach concept page is in `docs/concepts/` and follows this template:\n\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description\"\n---\n\n## Overview\n[Explanation of the concept]\n\n## Reference\n[MDN or official docs links]\n\n## Articles\n[Curated articles with CardGroup components]\n\n## Videos\n[Curated videos with CardGroup components]\n```\n\n## Important Notes\n\n- This is primarily a documentation/resource repository, not a code library\n- The main content lives in `README.md` and `/docs` (Mintlify site)\n- Translations are maintained in separate forked repositories\n- Community contributions are welcome and encouraged\n- MIT Licensed\n\n## Custom Skills\n\n### write-concept Skill\n\nUse the `/write-concept` skill when writing or improving concept documentation pages. This skill provides comprehensive guidelines for:\n\n- **Page Structure**: Exact template for concept pages (frontmatter, opening hook, code examples, sections)\n- **SEO Optimization**: Critical guidelines for ranking in search results\n- **Writing Style**: Voice, tone, and how to make content accessible to beginners\n- **Code Examples**: Best practices for clear, educational code\n- **Quality Checklists**: Verification steps before publishing\n\n**When to invoke:**\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality\n\n**SEO is Critical:** Each concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n\nThe skill includes detailed guidance on title optimization (50-60 chars), meta descriptions (150-160 chars), keyword placement, and featured snippet optimization.\n\n**Location:** `.claude/skills/write-concept/SKILL.md`\n\n### fact-check Skill\n\nUse the `/fact-check` skill when verifying the technical accuracy of concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Verification**: Verify all code examples produce stated outputs, run project tests\n- **MDN/Spec Compliance**: Check claims against official MDN documentation and ECMAScript specification\n- **External Resource Checks**: Verify all links work and descriptions accurately represent content\n- **Misconception Detection**: Common JavaScript misconceptions to watch for (type coercion, async behavior, etc.)\n- **Test Integration**: Instructions for running `npm test` to verify code examples\n- **Report Template**: Structured format for documenting findings with severity levels\n\n**When to invoke:**\n- Before publishing a new concept page\n- After significant edits to existing pages\n- When reviewing community contributions\n- Periodic accuracy audits of existing content\n\n**What gets checked:**\n- Every code example for correct output\n- All MDN links for validity (not 404)\n- API descriptions match current MDN documentation\n- External resources (articles, videos) are accessible and accurate\n- Technical claims are correct and properly nuanced\n- No common JavaScript misconceptions stated as fact\n\n**Location:** `.claude/skills/fact-check/SKILL.md`\n\n### seo-review Skill\n\nUse the `/seo-review` skill when auditing concept pages for search engine optimization. This skill provides a focused audit checklist:\n\n- **27-Point Scoring System**: Systematic audit across 6 categories\n- **Title & Meta Optimization**: Character counts, keyword placement, compelling hooks\n- **Keyword Strategy**: Pre-built keyword clusters for all JavaScript concepts\n- **Featured Snippet Optimization**: Patterns for winning position zero in search results\n- **Internal Linking**: Audit of concept interconnections and anchor text quality\n- **Report Template**: Structured SEO audit report with prioritized fixes\n\n**When to invoke:**\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n\n**Scoring Categories (30 points total):**\n- Title Tag (4 points)\n- Meta Description (4 points)\n- Keyword Placement (5 points)\n- Content Structure (6 points)\n- Featured Snippets (4 points)\n- Internal Linking (4 points)\n- Technical SEO (3 points) — Single H1, keyword in slug, no orphan pages\n\n**Score Interpretation:**\n- 90-100% (27-30): Ready to publish\n- 75-89% (23-26): Minor optimizations needed\n- 55-74% (17-22): Several improvements needed\n- Below 55% (<17): Significant work required\n\n**Location:** `.claude/skills/seo-review/SKILL.md`\n\n### test-writer Skill\n\nUse the `/test-writer` skill when generating Vitest tests for code examples in concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Extraction**: Identify and categorize all code examples (testable, DOM, error, conceptual)\n- **Test Patterns**: 16 patterns for converting different types of code examples to tests\n- **DOM Testing**: Separate file structure with jsdom environment for browser-specific code\n- **Source References**: Line number references linking tests to documentation\n- **Project Conventions**: File naming, describe block organization, assertion patterns\n- **Report Template**: Test coverage report documenting what was tested and skipped\n\n**When to invoke:**\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n\n**Test Categories:**\n- Basic value assertions (`console.log` → `expect`)\n- Error testing (`toThrow` patterns)\n- Async testing (Promises, async/await)\n- DOM testing (jsdom environment, events)\n- Floating point (toBeCloseTo)\n- Object/Array comparisons (toEqual)\n\n**File Structure:**\n```\ntests/{category}/{concept-name}/{concept-name}.test.js\ntests/{category}/{concept-name}/{concept-name}.dom.test.js (if DOM examples)\n```\n\n**Location:** `.claude/skills/test-writer/SKILL.md`\n\n### resource-curator Skill\n\nUse the `/resource-curator` skill when finding, evaluating, or maintaining external resources (articles, videos, courses) for concept pages. This skill provides:\n\n- **Audit Process**: Check existing links for accessibility, accuracy, and relevance\n- **Trusted Sources**: Prioritized lists of reputable article, video, and course sources\n- **Quality Criteria**: Must-have, should-have, and red flag checklists\n- **Description Writing**: Formula and examples for specific, valuable descriptions\n- **Publication Guidelines**: Date thresholds for different topic categories\n- **Report Template**: Audit report for documenting broken, outdated, and missing resources\n\n**When to invoke:**\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n**Resource Targets:**\n- Reference: 2-4 MDN links\n- Articles: 4-6 quality articles\n- Videos: 3-4 quality videos\n- Courses: 1-3 (optional)\n\n**Trusted Sources Include:**\n- Articles: javascript.info, MDN Guides, freeCodeCamp, 2ality, CSS-Tricks, dev.to\n- Videos: Fireship, Web Dev Simplified, Fun Fun Function, Traversy Media, JSConf\n- Courses: javascript.info, Piccalilli, freeCodeCamp, Frontend Masters\n\n**Location:** `.claude/skills/resource-curator/SKILL.md`\n\n### concept-workflow Skill\n\nUse the `/concept-workflow` skill for end-to-end creation of a complete concept page. This orchestrator skill coordinates all five specialized skills in optimal order:\n\n```\nPhase 1: resource-curator → Find quality external resources\nPhase 2: write-concept → Write the documentation page\nPhase 3: test-writer → Generate tests for code examples\nPhase 4: fact-check → Verify technical accuracy\nPhase 5: seo-review → Optimize for search visibility\n```\n\n**When to invoke:**\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want the full end-to-end workflow with all quality checks\n\n**What it orchestrates:**\n- Resource curation (2-4 MDN refs, 4-6 articles, 3-4 videos)\n- Complete concept page writing (1,500+ words)\n- Comprehensive test generation for all code examples\n- Technical accuracy verification with test execution\n- SEO audit targeting 90%+ score (24+/27)\n\n**Deliverables:**\n- `/docs/concepts/{concept-name}.mdx` — Complete documentation page\n- `/tests/{category}/{concept-name}/{concept-name}.test.js` — Test file\n- Updated `docs.json` navigation (if new concept)\n- Fact-check report\n- SEO audit report (score 24+/27)\n\n**Estimated Time:** 2-5 hours depending on concept complexity\n\n**Example prompt:**\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\n**Location:** `.claude/skills/concept-workflow/SKILL.md`\n\n## Maintainer\n\n**Leonardo Maldonado** - [@leonardomso](https://github.com/leonardomso)\n\n## Links\n\n- Repository: https://github.com/leonardomso/33-js-concepts\n- Issues: https://github.com/leonardomso/33-js-concepts/issues\n- Original Article: [33 Fundamentals Every JavaScript Developer Should Know](https://medium.com/@stephenthecurt/33-fundamentals-every-javascript-developer-should-know-13dd720a90d1) by Stephen Curtis\n",".claude/skills/concept-workflow/SKILL.md":"---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n",".claude/skills/fact-check/SKILL.md":"---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n",".claude/skills/resource-curator/SKILL.md":"---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n\n\n\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n\n\n\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n\n\n\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n\n\n\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n\n\n A comprehensive guide to Promises in JavaScript.\n\n\n\n\n This video explains closures in JavaScript.\n\n\n\n\n Everything you need to know about JavaScript.\n\n\n\n\n A video about understanding the event loop.\n\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n\n \n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n \n \n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n \n\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n\n \n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n \n \n [Specific coverage]. \n [Value proposition].\n \n \n [Unique angle]. \n [Why it's worth reading].\n \n \n [What it covers]. \n [Best for whom].\n \n\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n\n \n [What it covers/unique approach]. \n [Why watch/who it's for].\n \n \n [Specific focus]. \n [What makes it stand out].\n \n \n [Coverage]. \n [Value].\n \n\n```\n\n### Books Section (Optional)\n\n```markdown\n\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n\n```\n\n### Courses Section (Optional)\n\n```markdown\n\n \n [What the course covers]. \n [Format and who it's best for].\n \n\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n",".claude/skills/seo-review/SKILL.md":"---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n \n\n \n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n \n\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n\n\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n\n\n\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n\n\n \n async/await is built on top of Promises\n \n\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n",".claude/skills/test-writer/SKILL.md":"---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n",".claude/skills/write-concept/SKILL.md":"---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n\n\n\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n\n \n Explanation of the first step\n \n \n Explanation of the second step\n \n\n\n\n \n Detailed explanation with code examples\n \n \n Detailed explanation with code examples\n \n\n\n\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n\n**The Trap:** [Clear explanation of what goes wrong and why]\n\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n\n\n---\n\n## Test Your Knowledge\n\n\n \n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n \n \n \n **Answer:**\n \n [Clear explanation with code if needed]\n \n \n [Aim for 5-6 questions covering the main topics]\n\n\n---\n\n## Related Concepts\n\n\n \n How it connects to this concept\n \n \n How it connects to this concept\n \n\n\n---\n\n## Reference\n\n\n \n Official MDN documentation for the main concept\n \n \n Additional MDN reference\n \n\n\n## Articles\n\n\n \n Brief description of what the reader will learn from this article.\n \n [Aim for 4-6 high-quality articles]\n\n\n## Videos\n\n\n \n Brief description of what the video covers.\n \n [Aim for 3-4 quality videos]\n\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n\n \n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n \n \n \n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n \n \n \n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n \n \n \n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n \n\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->",".opencode/skill/concept-workflow/SKILL.md":"---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n",".opencode/skill/fact-check/SKILL.md":"---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n",".opencode/skill/resource-curator/SKILL.md":"---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n<Card title=\"JavaScript Visualized: Promises & Async/Await — Lydia Hallie\" icon=\"newspaper\" href=\"https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n</Card>\n\n<Card title=\"What the heck is the event loop anyway? — Philip Roberts\" icon=\"video\" href=\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\">\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n</Card>\n\n<Card title=\"You Don't Know JS: Scope & Closures — Kyle Simpson\" icon=\"book\" href=\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md\">\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n</Card>\n\n<Card title=\"JavaScript Promises in 10 Minutes — Web Dev Simplified\" icon=\"video\" href=\"https://www.youtube.com/watch?v=DHvZLI7Db8E\">\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n</Card>\n\n<Card title=\"How to Escape Async/Await Hell — Aditya Agarwal\" icon=\"newspaper\" href=\"https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c\">\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n</Card>\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n<!-- TOO GENERIC -->\n<Card title=\"Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to Promises in JavaScript.\n</Card>\n\n<!-- NO VALUE PROPOSITION -->\n<Card title=\"Learn Closures\" icon=\"video\" href=\"...\">\n This video explains closures in JavaScript.\n</Card>\n\n<!-- VAGUE, NO SPECIFICS -->\n<Card title=\"JavaScript Guide\" icon=\"newspaper\" href=\"...\">\n Everything you need to know about JavaScript.\n</Card>\n\n<!-- JUST RESTATING THE TITLE -->\n<Card title=\"Understanding the Event Loop\" icon=\"video\" href=\"...\">\n A video about understanding the event loop.\n</Card>\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"[Main Topic] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n </Card>\n <Card title=\"[Related API/Concept] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n </Card>\n</CardGroup>\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Specific coverage]. \n [Value proposition].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Unique angle]. \n [Why it's worth reading].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What it covers]. \n [Best for whom].\n </Card>\n</CardGroup>\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [What it covers/unique approach]. \n [Why watch/who it's for].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Specific focus]. \n [What makes it stand out].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Coverage]. \n [Value].\n </Card>\n</CardGroup>\n```\n\n### Books Section (Optional)\n\n```markdown\n<Card title=\"[Book Title] — [Author]\" icon=\"book\" href=\"...\">\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n</Card>\n```\n\n### Courses Section (Optional)\n\n```markdown\n<CardGroup cols={2}>\n <Card title=\"[Course Title] — [Platform]\" icon=\"graduation-cap\" href=\"...\">\n [What the course covers]. \n [Format and who it's best for].\n </Card>\n</CardGroup>\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n",".opencode/skill/seo-review/SKILL.md":"---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n<AccordionGroup>\n <Accordion title=\"Call Stack\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Primitive Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n </Accordion>\n\n <Accordion title=\"Value vs Reference Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n </Accordion>\n\n <Accordion title=\"Type Coercion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n </Accordion>\n\n <Accordion title=\"Equality Operators\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n </Accordion>\n\n <Accordion title=\"Scope and Closures\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Event Loop\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n </Accordion>\n\n <Accordion title=\"Promises\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n </Accordion>\n\n <Accordion title=\"async/await\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n </Accordion>\n\n <Accordion title=\"this Keyword\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n </Accordion>\n\n <Accordion title=\"Prototypes\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"DOM\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n </Accordion>\n\n <Accordion title=\"Higher-Order Functions\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n </Accordion>\n\n <Accordion title=\"Recursion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n </Accordion>\n</AccordionGroup>\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `<Info>` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `<Steps>` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n<!-- In Prerequisites (Warning box) -->\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n</Warning>\n\n<!-- In Body Content (natural context) -->\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n<!-- In Related Concepts Section -->\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n</CardGroup>\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `<Info>` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `<Steps>` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `<Warning>` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n",".opencode/skill/test-writer/SKILL.md":"---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n",".opencode/skill/write-concept/SKILL.md":"---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n<Info>\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n</Info>\n\n<Warning>\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n</Warning>\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n<Steps>\n <Step title=\"Step 1\">\n Explanation of the first step\n </Step>\n <Step title=\"Step 2\">\n Explanation of the second step\n </Step>\n</Steps>\n\n<AccordionGroup>\n <Accordion title=\"Subtopic 1\">\n Detailed explanation with code examples\n </Accordion>\n <Accordion title=\"Subtopic 2\">\n Detailed explanation with code examples\n </Accordion>\n</AccordionGroup>\n\n<Tip>\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n</Tip>\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n<Warning>\n**The Trap:** [Clear explanation of what goes wrong and why]\n</Warning>\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n<Info>\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n</Info>\n\n---\n\n## Test Your Knowledge\n\n<AccordionGroup>\n <Accordion title=\"Question 1: [Specific question about the concept]\">\n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n </Accordion>\n \n <Accordion title=\"Question 2: [Another question]\">\n **Answer:**\n \n [Clear explanation with code if needed]\n </Accordion>\n \n [Aim for 5-6 questions covering the main topics]\n</AccordionGroup>\n\n---\n\n## Related Concepts\n\n<CardGroup cols={2}>\n <Card title=\"Related Concept 1\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n <Card title=\"Related Concept 2\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n</CardGroup>\n\n---\n\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"Main Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation for the main concept\n </Card>\n <Card title=\"Related API — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Additional MDN reference\n </Card>\n</CardGroup>\n\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"Article Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this article.\n </Card>\n [Aim for 4-6 high-quality articles]\n</CardGroup>\n\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"Video Title\" icon=\"video\" href=\"https://...\">\n Brief description of what the video covers.\n </Card>\n [Aim for 3-4 quality videos]\n</CardGroup>\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n<AccordionGroup>\n <Accordion title=\"Closures Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Promises Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n </Accordion>\n \n <Accordion title=\"Event Loop Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Call Stack Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n </Accordion>\n</AccordionGroup>\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `<title>` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->"},"files":{".claude/CLAUDE.md":"# 33 JavaScript Concepts - Project Context\n\n## Overview\n\nThis repository is a curated collection of **33 essential JavaScript concepts** that every JavaScript developer should know. It serves as a comprehensive learning resource and study guide for developers at all levels, from beginners to advanced practitioners.\n\nThe project was recognized by GitHub as one of the **top open source projects of 2018** and has been translated into 40+ languages by the community.\n\n## Project Purpose\n\n- Help developers master fundamental and advanced JavaScript concepts\n- Provide curated resources (articles, videos, books) for each concept\n- Serve as a reference guide for interview preparation\n- Foster community contributions through translations and resource additions\n\n## Repository Structure\n\n```\n33-js-concepts/\n├── .claude/ # Claude configuration\n│ ├── CLAUDE.md # Project context and guidelines\n│ └── skills/ # Custom skills for content creation\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── .opencode/ # OpenCode configuration\n│ └── skill/ # Custom skills (mirrored from .claude/skills)\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── docs/ # Mintlify documentation site\n│ ├── docs.json # Mintlify configuration\n│ ├── index.mdx # Homepage\n│ ├── introduction.mdx # Getting started guide\n│ ├── contributing.mdx # Contribution guidelines\n│ ├── translations.mdx # Community translations\n│ └── concepts/ # 33 concept pages\n│ ├── call-stack.mdx\n│ ├── primitive-types.mdx\n│ └── ... (all 33 concepts)\n├── tests/ # Vitest test suites\n│ └── fundamentals/ # Tests for fundamental concepts (1-6)\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── vitest.config.js # Vitest configuration\n├── README.md # Main GitHub README\n├── CONTRIBUTING.md # Guidelines for contributors\n├── CODE_OF_CONDUCT.md # Community standards\n├── LICENSE # MIT License\n├── package.json # Project metadata\n├── opencode.jsonc # OpenCode AI assistant configuration\n└── github-image.png # Project banner image\n```\n\n## The 31 Concepts (32nd and 33rd coming soon)\n\n### Fundamentals (1-6)\n1. Primitive Types\n2. Value Types and Reference Types\n3. Type Coercion (Implicit, Explicit, Nominal, Structuring and Duck Typing)\n4. Equality Operators (== vs === vs typeof)\n5. Scope & Closures\n6. Call Stack\n\n### Functions & Execution (7-8)\n7. Event Loop (Message Queue)\n8. IIFE, Modules and Namespaces\n\n### Web Platform (9-10)\n9. DOM and Layout Trees\n10. HTTP & Fetch\n\n### Object-Oriented JS (11-15)\n11. Factories and Classes\n12. this, call, apply and bind\n13. new, Constructor, instanceof and Instances\n14. Prototype Inheritance and Prototype Chain\n15. Object.create and Object.assign\n\n### Functional Programming (16-19)\n16. map, reduce, filter\n17. Pure Functions, Side Effects, State Mutation and Event Propagation\n18. Higher-Order Functions\n19. Recursion\n\n### Async JavaScript (20-22)\n20. Collections and Generators\n21. Promises\n22. async/await\n\n### Advanced Topics (23-31)\n23. JavaScript Engines\n24. Data Structures\n25. Big O Notation (Expensive Operations)\n26. Algorithms\n27. Inheritance, Polymorphism and Code Reuse\n28. Design Patterns\n29. Partial Applications, Currying, Compose and Pipe\n30. Clean Code\n\n## Content Format\n\nEach concept page in `/docs/concepts/` follows this structure:\n\n### 1. Frontmatter\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description of the concept\"\n---\n```\n\n### 2. Real-World Analogy\nStart with an engaging analogy that makes the concept relatable. Include ASCII art diagrams when helpful.\n\n### 3. Info Box (What You'll Learn)\n```mdx\n<Info>\n**What you'll learn in this guide:**\n- Key point 1\n- Key point 2\n- Key point 3\n</Info>\n```\n\n### 4. Main Content Sections\n- Use clear headings (`##`, `###`) to organize topics\n- Include code examples with explanations\n- Use Mintlify components (`<AccordionGroup>`, `<Steps>`, `<Tabs>`, etc.)\n- Add diagrams and visualizations where helpful\n\n### 5. Related Concepts\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Related Concept\" icon=\"icon-name\" href=\"/concepts/concept-slug\">\n Brief description of how it relates\n </Card>\n</CardGroup>\n```\n\n### 6. Reference\n```mdx\n<Card title=\"Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation\n</Card>\n```\n\n### 7. Articles\nCurated blog posts and tutorials using `<CardGroup>` with `icon=\"newspaper\"`.\n\n### 8. Courses (optional)\nEducational courses using `<Card>` with `icon=\"graduation-cap\"`.\n\n### 9. Videos\nYouTube tutorials and conference talks using `<CardGroup>` with `icon=\"video\"`.\n\n## Contributing Guidelines\n\n### Adding Resources\n- Resources should be high-quality and educational\n- Follow the existing Card format for consistency\n- Include a brief description of what the resource covers\n\n### Resource Format\n```mdx\n<Card title=\"Resource Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this resource.\n</Card>\n```\n\n## Git Commit Conventions\n\nThis project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification. All commits must adhere to this format for consistency and automated changelog generation.\n\n### Commit Message Format\n\n```\n<type>[optional scope]: <description>\n\n[optional body]\n\n[optional footer(s)]\n```\n\n### Commit Types\n\n| Type | Description |\n|------|-------------|\n| `feat` | New features or content additions (e.g., new resources, new concepts) |\n| `fix` | Bug fixes, broken link corrections, typo fixes |\n| `docs` | Documentation changes (README updates, CONTRIBUTING updates) |\n| `style` | Formatting changes (markdown formatting, whitespace) |\n| `refactor` | Content restructuring without adding new resources |\n| `chore` | Maintenance tasks (config updates, dependency updates) |\n| `ci` | CI/CD configuration changes |\n| `perf` | Performance improvements |\n| `test` | Adding or updating tests |\n| `build` | Build system or external dependency changes |\n| `revert` | Reverting a previous commit |\n\n### Examples\n\n```bash\n# Adding a new resource\nfeat: add article about closures by John Doe\n\n# Fixing a broken link\nfix: update broken MDN link in Promises section\n\n# Documentation update\ndocs: update contributing guidelines for translations\n\n# Maintenance task\nchore: update opencode.json configuration\n\n# Adding content to existing concept\nfeat(closures): add video tutorial by Fun Fun Function\n\n# Multiple changes in body\nfeat: add new resources for async/await\n\n- Add article by JavaScript Teacher\n- Add video tutorial by Traversy Media\n- Update reference links\n```\n\n### Rules\n\n1. **Use lowercase** for the type and description\n2. **No period** at the end of the description\n3. **Use imperative mood** (\"add\" not \"added\", \"fix\" not \"fixed\")\n4. **Keep the first line under 72 characters**\n5. **Reference issues** in the footer when applicable (e.g., `Closes #123`)\n\n## MCP Servers Available\n\nThis project has OpenCode configured with:\n\n1. **Context7** - Documentation search (`use context7` in prompts)\n2. **GitHub** - Repository management (`use github` in prompts)\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) as the test runner to verify that code examples in the documentation work correctly.\n\n### Running Tests\n\n```bash\n# Run all tests once\nnpm test\n\n# Run tests in watch mode (re-runs on file changes)\nnpm run test:watch\n\n# Run tests with coverage report\nnpm run test:coverage\n```\n\n### Test Structure\n\nTests are organized by concept category in the `tests/` directory:\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### Writing Tests for Code Examples\n\nWhen adding new code examples to concept documentation, please include corresponding tests:\n\n1. **File naming**: Create `{concept-name}.test.js` in `tests/{category}/{concept-name}/`\n2. **Use explicit imports**: \n ```javascript\n import { describe, it, expect } from 'vitest'\n ```\n3. **Convert console.log examples to assertions**:\n ```javascript\n // Documentation example:\n // console.log(typeof \"hello\") // \"string\"\n \n // Test:\n it('should return string type', () => {\n expect(typeof \"hello\").toBe(\"string\")\n })\n ```\n4. **Test error cases**: Use `expect(() => { ... }).toThrow()` for operations that should throw\n5. **Skip browser-specific examples**: Tests run in Node.js, so skip DOM/window/document examples\n6. **Note strict mode behavior**: Vitest runs in strict mode, so operations that \"silently fail\" in non-strict mode will throw `TypeError`\n\n### Current Test Coverage\n\n| Category | Concept | Tests |\n|----------|---------|-------|\n| Fundamentals | Call Stack | 20 |\n| Fundamentals | Primitive Types | 73 |\n| Fundamentals | Value vs Reference Types | 54 |\n| Fundamentals | Type Coercion | 74 |\n| Fundamentals | Equality Operators | 87 |\n| Fundamentals | Scope and Closures | 46 |\n| Functions & Execution | Event Loop | 56 |\n| Functions & Execution | IIFE & Modules | 61 |\n| Web Platform | DOM | 85 |\n| Web Platform | HTTP & Fetch | 72 |\n| **Total** | | **628** |\n\n## Documentation Site (Mintlify)\n\nThe project includes a Mintlify documentation site in the `/docs` directory.\n\n### Local Development\n\n```bash\n# Using npm script\nnpm run docs\n\n# Or install Mintlify CLI globally\nnpm i -g mint\ncd docs\nmint dev\n```\n\nThe site will be available at `http://localhost:3000`.\n\n### Documentation Structure\n\n- **Getting Started**: Homepage and introduction\n- **Fundamentals**: Concepts 1-6 (Primitive Types through Call Stack)\n- **Functions & Execution**: Concepts 7-8 (Event Loop through IIFE/Modules)\n- **Web Platform**: Concepts 9-10 (DOM and HTTP & Fetch)\n- **Object-Oriented JS**: Concepts 11-15 (Factories through Object.create/assign)\n- **Functional Programming**: Concepts 16-19 (map/reduce/filter through Recursion)\n- **Async JavaScript**: Concepts 20-22 (Collections/Generators through async/await)\n- **Advanced Topics**: Concepts 23-31 (JavaScript Engines through Clean Code)\n\n### Adding/Editing Concept Pages\n\nEach concept page is in `docs/concepts/` and follows this template:\n\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description\"\n---\n\n## Overview\n[Explanation of the concept]\n\n## Reference\n[MDN or official docs links]\n\n## Articles\n[Curated articles with CardGroup components]\n\n## Videos\n[Curated videos with CardGroup components]\n```\n\n## Important Notes\n\n- This is primarily a documentation/resource repository, not a code library\n- The main content lives in `README.md` and `/docs` (Mintlify site)\n- Translations are maintained in separate forked repositories\n- Community contributions are welcome and encouraged\n- MIT Licensed\n\n## Custom Skills\n\n### write-concept Skill\n\nUse the `/write-concept` skill when writing or improving concept documentation pages. This skill provides comprehensive guidelines for:\n\n- **Page Structure**: Exact template for concept pages (frontmatter, opening hook, code examples, sections)\n- **SEO Optimization**: Critical guidelines for ranking in search results\n- **Writing Style**: Voice, tone, and how to make content accessible to beginners\n- **Code Examples**: Best practices for clear, educational code\n- **Quality Checklists**: Verification steps before publishing\n\n**When to invoke:**\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality\n\n**SEO is Critical:** Each concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n\nThe skill includes detailed guidance on title optimization (50-60 chars), meta descriptions (150-160 chars), keyword placement, and featured snippet optimization.\n\n**Location:** `.claude/skills/write-concept/SKILL.md`\n\n### fact-check Skill\n\nUse the `/fact-check` skill when verifying the technical accuracy of concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Verification**: Verify all code examples produce stated outputs, run project tests\n- **MDN/Spec Compliance**: Check claims against official MDN documentation and ECMAScript specification\n- **External Resource Checks**: Verify all links work and descriptions accurately represent content\n- **Misconception Detection**: Common JavaScript misconceptions to watch for (type coercion, async behavior, etc.)\n- **Test Integration**: Instructions for running `npm test` to verify code examples\n- **Report Template**: Structured format for documenting findings with severity levels\n\n**When to invoke:**\n- Before publishing a new concept page\n- After significant edits to existing pages\n- When reviewing community contributions\n- Periodic accuracy audits of existing content\n\n**What gets checked:**\n- Every code example for correct output\n- All MDN links for validity (not 404)\n- API descriptions match current MDN documentation\n- External resources (articles, videos) are accessible and accurate\n- Technical claims are correct and properly nuanced\n- No common JavaScript misconceptions stated as fact\n\n**Location:** `.claude/skills/fact-check/SKILL.md`\n\n### seo-review Skill\n\nUse the `/seo-review` skill when auditing concept pages for search engine optimization. This skill provides a focused audit checklist:\n\n- **27-Point Scoring System**: Systematic audit across 6 categories\n- **Title & Meta Optimization**: Character counts, keyword placement, compelling hooks\n- **Keyword Strategy**: Pre-built keyword clusters for all JavaScript concepts\n- **Featured Snippet Optimization**: Patterns for winning position zero in search results\n- **Internal Linking**: Audit of concept interconnections and anchor text quality\n- **Report Template**: Structured SEO audit report with prioritized fixes\n\n**When to invoke:**\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n\n**Scoring Categories (30 points total):**\n- Title Tag (4 points)\n- Meta Description (4 points)\n- Keyword Placement (5 points)\n- Content Structure (6 points)\n- Featured Snippets (4 points)\n- Internal Linking (4 points)\n- Technical SEO (3 points) — Single H1, keyword in slug, no orphan pages\n\n**Score Interpretation:**\n- 90-100% (27-30): Ready to publish\n- 75-89% (23-26): Minor optimizations needed\n- 55-74% (17-22): Several improvements needed\n- Below 55% (<17): Significant work required\n\n**Location:** `.claude/skills/seo-review/SKILL.md`\n\n### test-writer Skill\n\nUse the `/test-writer` skill when generating Vitest tests for code examples in concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Extraction**: Identify and categorize all code examples (testable, DOM, error, conceptual)\n- **Test Patterns**: 16 patterns for converting different types of code examples to tests\n- **DOM Testing**: Separate file structure with jsdom environment for browser-specific code\n- **Source References**: Line number references linking tests to documentation\n- **Project Conventions**: File naming, describe block organization, assertion patterns\n- **Report Template**: Test coverage report documenting what was tested and skipped\n\n**When to invoke:**\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n\n**Test Categories:**\n- Basic value assertions (`console.log` → `expect`)\n- Error testing (`toThrow` patterns)\n- Async testing (Promises, async/await)\n- DOM testing (jsdom environment, events)\n- Floating point (toBeCloseTo)\n- Object/Array comparisons (toEqual)\n\n**File Structure:**\n```\ntests/{category}/{concept-name}/{concept-name}.test.js\ntests/{category}/{concept-name}/{concept-name}.dom.test.js (if DOM examples)\n```\n\n**Location:** `.claude/skills/test-writer/SKILL.md`\n\n### resource-curator Skill\n\nUse the `/resource-curator` skill when finding, evaluating, or maintaining external resources (articles, videos, courses) for concept pages. This skill provides:\n\n- **Audit Process**: Check existing links for accessibility, accuracy, and relevance\n- **Trusted Sources**: Prioritized lists of reputable article, video, and course sources\n- **Quality Criteria**: Must-have, should-have, and red flag checklists\n- **Description Writing**: Formula and examples for specific, valuable descriptions\n- **Publication Guidelines**: Date thresholds for different topic categories\n- **Report Template**: Audit report for documenting broken, outdated, and missing resources\n\n**When to invoke:**\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n**Resource Targets:**\n- Reference: 2-4 MDN links\n- Articles: 4-6 quality articles\n- Videos: 3-4 quality videos\n- Courses: 1-3 (optional)\n\n**Trusted Sources Include:**\n- Articles: javascript.info, MDN Guides, freeCodeCamp, 2ality, CSS-Tricks, dev.to\n- Videos: Fireship, Web Dev Simplified, Fun Fun Function, Traversy Media, JSConf\n- Courses: javascript.info, Piccalilli, freeCodeCamp, Frontend Masters\n\n**Location:** `.claude/skills/resource-curator/SKILL.md`\n\n### concept-workflow Skill\n\nUse the `/concept-workflow` skill for end-to-end creation of a complete concept page. This orchestrator skill coordinates all five specialized skills in optimal order:\n\n```\nPhase 1: resource-curator → Find quality external resources\nPhase 2: write-concept → Write the documentation page\nPhase 3: test-writer → Generate tests for code examples\nPhase 4: fact-check → Verify technical accuracy\nPhase 5: seo-review → Optimize for search visibility\n```\n\n**When to invoke:**\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want the full end-to-end workflow with all quality checks\n\n**What it orchestrates:**\n- Resource curation (2-4 MDN refs, 4-6 articles, 3-4 videos)\n- Complete concept page writing (1,500+ words)\n- Comprehensive test generation for all code examples\n- Technical accuracy verification with test execution\n- SEO audit targeting 90%+ score (24+/27)\n\n**Deliverables:**\n- `/docs/concepts/{concept-name}.mdx` — Complete documentation page\n- `/tests/{category}/{concept-name}/{concept-name}.test.js` — Test file\n- Updated `docs.json` navigation (if new concept)\n- Fact-check report\n- SEO audit report (score 24+/27)\n\n**Estimated Time:** 2-5 hours depending on concept complexity\n\n**Example prompt:**\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\n**Location:** `.claude/skills/concept-workflow/SKILL.md`\n\n## Maintainer\n\n**Leonardo Maldonado** - [@leonardomso](https://github.com/leonardomso)\n\n## Links\n\n- Repository: https://github.com/leonardomso/33-js-concepts\n- Issues: https://github.com/leonardomso/33-js-concepts/issues\n- Original Article: [33 Fundamentals Every JavaScript Developer Should Know](https://medium.com/@stephenthecurt/33-fundamentals-every-javascript-developer-should-know-13dd720a90d1) by Stephen Curtis\n",".claude/skills/concept-workflow/SKILL.md":"---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n",".claude/skills/fact-check/SKILL.md":"---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n",".claude/skills/resource-curator/SKILL.md":"---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n<Card title=\"JavaScript Visualized: Promises & Async/Await — Lydia Hallie\" icon=\"newspaper\" href=\"https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n</Card>\n\n<Card title=\"What the heck is the event loop anyway? — Philip Roberts\" icon=\"video\" href=\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\">\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n</Card>\n\n<Card title=\"You Don't Know JS: Scope & Closures — Kyle Simpson\" icon=\"book\" href=\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md\">\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n</Card>\n\n<Card title=\"JavaScript Promises in 10 Minutes — Web Dev Simplified\" icon=\"video\" href=\"https://www.youtube.com/watch?v=DHvZLI7Db8E\">\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n</Card>\n\n<Card title=\"How to Escape Async/Await Hell — Aditya Agarwal\" icon=\"newspaper\" href=\"https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c\">\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n</Card>\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n<!-- TOO GENERIC -->\n<Card title=\"Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to Promises in JavaScript.\n</Card>\n\n<!-- NO VALUE PROPOSITION -->\n<Card title=\"Learn Closures\" icon=\"video\" href=\"...\">\n This video explains closures in JavaScript.\n</Card>\n\n<!-- VAGUE, NO SPECIFICS -->\n<Card title=\"JavaScript Guide\" icon=\"newspaper\" href=\"...\">\n Everything you need to know about JavaScript.\n</Card>\n\n<!-- JUST RESTATING THE TITLE -->\n<Card title=\"Understanding the Event Loop\" icon=\"video\" href=\"...\">\n A video about understanding the event loop.\n</Card>\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"[Main Topic] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n </Card>\n <Card title=\"[Related API/Concept] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n </Card>\n</CardGroup>\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Specific coverage]. \n [Value proposition].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Unique angle]. \n [Why it's worth reading].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What it covers]. \n [Best for whom].\n </Card>\n</CardGroup>\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [What it covers/unique approach]. \n [Why watch/who it's for].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Specific focus]. \n [What makes it stand out].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Coverage]. \n [Value].\n </Card>\n</CardGroup>\n```\n\n### Books Section (Optional)\n\n```markdown\n<Card title=\"[Book Title] — [Author]\" icon=\"book\" href=\"...\">\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n</Card>\n```\n\n### Courses Section (Optional)\n\n```markdown\n<CardGroup cols={2}>\n <Card title=\"[Course Title] — [Platform]\" icon=\"graduation-cap\" href=\"...\">\n [What the course covers]. \n [Format and who it's best for].\n </Card>\n</CardGroup>\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n",".claude/skills/seo-review/SKILL.md":"---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n<AccordionGroup>\n <Accordion title=\"Call Stack\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Primitive Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n </Accordion>\n\n <Accordion title=\"Value vs Reference Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n </Accordion>\n\n <Accordion title=\"Type Coercion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n </Accordion>\n\n <Accordion title=\"Equality Operators\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n </Accordion>\n\n <Accordion title=\"Scope and Closures\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Event Loop\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n </Accordion>\n\n <Accordion title=\"Promises\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n </Accordion>\n\n <Accordion title=\"async/await\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n </Accordion>\n\n <Accordion title=\"this Keyword\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n </Accordion>\n\n <Accordion title=\"Prototypes\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"DOM\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n </Accordion>\n\n <Accordion title=\"Higher-Order Functions\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n </Accordion>\n\n <Accordion title=\"Recursion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n </Accordion>\n</AccordionGroup>\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `<Info>` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `<Steps>` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n<!-- In Prerequisites (Warning box) -->\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n</Warning>\n\n<!-- In Body Content (natural context) -->\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n<!-- In Related Concepts Section -->\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n</CardGroup>\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `<Info>` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `<Steps>` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `<Warning>` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n",".claude/skills/test-writer/SKILL.md":"---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n",".claude/skills/write-concept/SKILL.md":"---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n<Info>\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n</Info>\n\n<Warning>\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n</Warning>\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n<Steps>\n <Step title=\"Step 1\">\n Explanation of the first step\n </Step>\n <Step title=\"Step 2\">\n Explanation of the second step\n </Step>\n</Steps>\n\n<AccordionGroup>\n <Accordion title=\"Subtopic 1\">\n Detailed explanation with code examples\n </Accordion>\n <Accordion title=\"Subtopic 2\">\n Detailed explanation with code examples\n </Accordion>\n</AccordionGroup>\n\n<Tip>\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n</Tip>\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n<Warning>\n**The Trap:** [Clear explanation of what goes wrong and why]\n</Warning>\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n<Info>\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n</Info>\n\n---\n\n## Test Your Knowledge\n\n<AccordionGroup>\n <Accordion title=\"Question 1: [Specific question about the concept]\">\n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n </Accordion>\n \n <Accordion title=\"Question 2: [Another question]\">\n **Answer:**\n \n [Clear explanation with code if needed]\n </Accordion>\n \n [Aim for 5-6 questions covering the main topics]\n</AccordionGroup>\n\n---\n\n## Related Concepts\n\n<CardGroup cols={2}>\n <Card title=\"Related Concept 1\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n <Card title=\"Related Concept 2\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n</CardGroup>\n\n---\n\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"Main Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation for the main concept\n </Card>\n <Card title=\"Related API — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Additional MDN reference\n </Card>\n</CardGroup>\n\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"Article Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this article.\n </Card>\n [Aim for 4-6 high-quality articles]\n</CardGroup>\n\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"Video Title\" icon=\"video\" href=\"https://...\">\n Brief description of what the video covers.\n </Card>\n [Aim for 3-4 quality videos]\n</CardGroup>\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n<AccordionGroup>\n <Accordion title=\"Closures Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Promises Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n </Accordion>\n \n <Accordion title=\"Event Loop Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Call Stack Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n </Accordion>\n</AccordionGroup>\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `<title>` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->",".opencode/skill/concept-workflow/SKILL.md":"---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n",".opencode/skill/fact-check/SKILL.md":"---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n",".opencode/skill/resource-curator/SKILL.md":"---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n<Card title=\"JavaScript Visualized: Promises & Async/Await — Lydia Hallie\" icon=\"newspaper\" href=\"https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n</Card>\n\n<Card title=\"What the heck is the event loop anyway? — Philip Roberts\" icon=\"video\" href=\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\">\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n</Card>\n\n<Card title=\"You Don't Know JS: Scope & Closures — Kyle Simpson\" icon=\"book\" href=\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md\">\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n</Card>\n\n<Card title=\"JavaScript Promises in 10 Minutes — Web Dev Simplified\" icon=\"video\" href=\"https://www.youtube.com/watch?v=DHvZLI7Db8E\">\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n</Card>\n\n<Card title=\"How to Escape Async/Await Hell — Aditya Agarwal\" icon=\"newspaper\" href=\"https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c\">\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n</Card>\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n<!-- TOO GENERIC -->\n<Card title=\"Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to Promises in JavaScript.\n</Card>\n\n<!-- NO VALUE PROPOSITION -->\n<Card title=\"Learn Closures\" icon=\"video\" href=\"...\">\n This video explains closures in JavaScript.\n</Card>\n\n<!-- VAGUE, NO SPECIFICS -->\n<Card title=\"JavaScript Guide\" icon=\"newspaper\" href=\"...\">\n Everything you need to know about JavaScript.\n</Card>\n\n<!-- JUST RESTATING THE TITLE -->\n<Card title=\"Understanding the Event Loop\" icon=\"video\" href=\"...\">\n A video about understanding the event loop.\n</Card>\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"[Main Topic] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n </Card>\n <Card title=\"[Related API/Concept] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n </Card>\n</CardGroup>\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Specific coverage]. \n [Value proposition].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Unique angle]. \n [Why it's worth reading].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What it covers]. \n [Best for whom].\n </Card>\n</CardGroup>\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [What it covers/unique approach]. \n [Why watch/who it's for].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Specific focus]. \n [What makes it stand out].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Coverage]. \n [Value].\n </Card>\n</CardGroup>\n```\n\n### Books Section (Optional)\n\n```markdown\n<Card title=\"[Book Title] — [Author]\" icon=\"book\" href=\"...\">\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n</Card>\n```\n\n### Courses Section (Optional)\n\n```markdown\n<CardGroup cols={2}>\n <Card title=\"[Course Title] — [Platform]\" icon=\"graduation-cap\" href=\"...\">\n [What the course covers]. \n [Format and who it's best for].\n </Card>\n</CardGroup>\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n",".opencode/skill/seo-review/SKILL.md":"---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n<AccordionGroup>\n <Accordion title=\"Call Stack\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Primitive Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n </Accordion>\n\n <Accordion title=\"Value vs Reference Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n </Accordion>\n\n <Accordion title=\"Type Coercion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n </Accordion>\n\n <Accordion title=\"Equality Operators\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n </Accordion>\n\n <Accordion title=\"Scope and Closures\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Event Loop\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n </Accordion>\n\n <Accordion title=\"Promises\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n </Accordion>\n\n <Accordion title=\"async/await\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n </Accordion>\n\n <Accordion title=\"this Keyword\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n </Accordion>\n\n <Accordion title=\"Prototypes\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"DOM\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n </Accordion>\n\n <Accordion title=\"Higher-Order Functions\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n </Accordion>\n\n <Accordion title=\"Recursion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n </Accordion>\n</AccordionGroup>\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `<Info>` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `<Steps>` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n<!-- In Prerequisites (Warning box) -->\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n</Warning>\n\n<!-- In Body Content (natural context) -->\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n<!-- In Related Concepts Section -->\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n</CardGroup>\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `<Info>` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `<Steps>` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `<Warning>` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n",".opencode/skill/test-writer/SKILL.md":"---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n",".opencode/skill/write-concept/SKILL.md":"---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n<Info>\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n</Info>\n\n<Warning>\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n</Warning>\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n<Steps>\n <Step title=\"Step 1\">\n Explanation of the first step\n </Step>\n <Step title=\"Step 2\">\n Explanation of the second step\n </Step>\n</Steps>\n\n<AccordionGroup>\n <Accordion title=\"Subtopic 1\">\n Detailed explanation with code examples\n </Accordion>\n <Accordion title=\"Subtopic 2\">\n Detailed explanation with code examples\n </Accordion>\n</AccordionGroup>\n\n<Tip>\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n</Tip>\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n<Warning>\n**The Trap:** [Clear explanation of what goes wrong and why]\n</Warning>\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n<Info>\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n</Info>\n\n---\n\n## Test Your Knowledge\n\n<AccordionGroup>\n <Accordion title=\"Question 1: [Specific question about the concept]\">\n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n </Accordion>\n \n <Accordion title=\"Question 2: [Another question]\">\n **Answer:**\n \n [Clear explanation with code if needed]\n </Accordion>\n \n [Aim for 5-6 questions covering the main topics]\n</AccordionGroup>\n\n---\n\n## Related Concepts\n\n<CardGroup cols={2}>\n <Card title=\"Related Concept 1\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n <Card title=\"Related Concept 2\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n</CardGroup>\n\n---\n\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"Main Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation for the main concept\n </Card>\n <Card title=\"Related API — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Additional MDN reference\n </Card>\n</CardGroup>\n\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"Article Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this article.\n </Card>\n [Aim for 4-6 high-quality articles]\n</CardGroup>\n\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"Video Title\" icon=\"video\" href=\"https://...\">\n Brief description of what the video covers.\n </Card>\n [Aim for 3-4 quality videos]\n</CardGroup>\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n<AccordionGroup>\n <Accordion title=\"Closures Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Promises Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n </Accordion>\n \n <Accordion title=\"Event Loop Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Call Stack Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n </Accordion>\n</AccordionGroup>\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `<title>` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->"},"items":[{"name":"CLAUDE.md","path":".claude/CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.claude/CLAUDE.md","title":".claude - Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"# 33 JavaScript Concepts - Project Context\n\n## Overview\n\nThis repository is a curated collection of **33 essential JavaScript concepts** that every JavaScript developer should know. It serves as a comprehensive learning resource and study guide for developers at all levels, from beginners to advanced practitioners.\n\nThe project was recognized by GitHub as one of the **top open source projects of 2018** and has been translated into 40+ languages by the community.\n\n## Project Purpose\n\n- Help developers master fundamental and advanced JavaScript concepts\n- Provide curated resources (articles, videos, books) for each concept\n- Serve as a reference guide for interview preparation\n- Foster community contributions through translations and resource additions\n\n## Repository Structure\n\n```\n33-js-concepts/\n├── .claude/ # Claude configuration\n│ ├── CLAUDE.md # Project context and guidelines\n│ └── skills/ # Custom skills for content creation\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── .opencode/ # OpenCode configuration\n│ └── skill/ # Custom skills (mirrored from .claude/skills)\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── docs/ # Mintlify documentation site\n│ ├── docs.json # Mintlify configuration\n│ ├── index.mdx # Homepage\n│ ├── introduction.mdx # Getting started guide\n│ ├── contributing.mdx # Contribution guidelines\n│ ├── translations.mdx # Community translations\n│ └── concepts/ # 33 concept pages\n│ ├── call-stack.mdx\n│ ├── primitive-types.mdx\n│ └── ... (all 33 concepts)\n├── tests/ # Vitest test suites\n│ └── fundamentals/ # Tests for fundamental concepts (1-6)\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── vitest.config.js # Vitest configuration\n├── README.md # Main GitHub README\n├── CONTRIBUTING.md # Guidelines for contributors\n├── CODE_OF_CONDUCT.md # Community standards\n├── LICENSE # MIT License\n├── package.json # Project metadata\n├── opencode.jsonc # OpenCode AI assistant configuration\n└── github-image.png # Project banner image\n```\n\n## The 31 Concepts (32nd and 33rd coming soon)\n\n### Fundamentals (1-6)\n1. Primitive Types\n2. Value Types and Reference Types\n3. Type Coercion (Implicit, Explicit, Nominal, Structuring and Duck Typing)\n4. Equality Operators (== vs === vs typeof)\n5. Scope & Closures\n6. Call Stack\n\n### Functions & Execution (7-8)\n7. Event Loop (Message Queue)\n8. IIFE, Modules and Namespaces\n\n### Web Platform (9-10)\n9. DOM and Layout Trees\n10. HTTP & Fetch\n\n### Object-Oriented JS (11-15)\n11. Factories and Classes\n12. this, call, apply and bind\n13. new, Constructor, instanceof and Instances\n14. Prototype Inheritance and Prototype Chain\n15. Object.create and Object.assign\n\n### Functional Programming (16-19)\n16. map, reduce, filter\n17. Pure Functions, Side Effects, State Mutation and Event Propagation\n18. Higher-Order Functions\n19. Recursion\n\n### Async JavaScript (20-22)\n20. Collections and Generators\n21. Promises\n22. async/await\n\n### Advanced Topics (23-31)\n23. JavaScript Engines\n24. Data Structures\n25. Big O Notation (Expensive Operations)\n26. Algorithms\n27. Inheritance, Polymorphism and Code Reuse\n28. Design Patterns\n29. Partial Applications, Currying, Compose and Pipe\n30. Clean Code\n\n## Content Format\n\nEach concept page in `/docs/concepts/` follows this structure:\n\n### 1. Frontmatter\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description of the concept\"\n---\n```\n\n### 2. Real-World Analogy\nStart with an engaging analogy that makes the concept relatable. Include ASCII art diagrams when helpful.\n\n### 3. Info Box (What You'll Learn)\n```mdx\n<Info>\n**What you'll learn in this guide:**\n- Key point 1\n- Key point 2\n- Key point 3\n</Info>\n```\n\n### 4. Main Content Sections\n- Use clear headings (`##`, `###`) to organize topics\n- Include code examples with explanations\n- Use Mintlify components (`<AccordionGroup>`, `<Steps>`, `<Tabs>`, etc.)\n- Add diagrams and visualizations where helpful\n\n### 5. Related Concepts\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Related Concept\" icon=\"icon-name\" href=\"/concepts/concept-slug\">\n Brief description of how it relates\n </Card>\n</CardGroup>\n```\n\n### 6. Reference\n```mdx\n<Card title=\"Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation\n</Card>\n```\n\n### 7. Articles\nCurated blog posts and tutorials using `<CardGroup>` with `icon=\"newspaper\"`.\n\n### 8. Courses (optional)\nEducational courses using `<Card>` with `icon=\"graduation-cap\"`.\n\n### 9. Videos\nYouTube tutorials and conference talks using `<CardGroup>` with `icon=\"video\"`.\n\n## Contributing Guidelines\n\n### Adding Resources\n- Resources should be high-quality and educational\n- Follow the existing Card format for consistency\n- Include a brief description of what the resource covers\n\n### Resource Format\n```mdx\n<Card title=\"Resource Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this resource.\n</Card>\n```\n\n## Git Commit Conventions\n\nThis project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification. All commits must adhere to this format for consistency and automated changelog generation.\n\n### Commit Message Format\n\n```\n<type>[optional scope]: <description>\n\n[optional body]\n\n[optional footer(s)]\n```\n\n### Commit Types\n\n| Type | Description |\n|------|-------------|\n| `feat` | New features or content additions (e.g., new resources, new concepts) |\n| `fix` | Bug fixes, broken link corrections, typo fixes |\n| `docs` | Documentation changes (README updates, CONTRIBUTING updates) |\n| `style` | Formatting changes (markdown formatting, whitespace) |\n| `refactor` | Content restructuring without adding new resources |\n| `chore` | Maintenance tasks (config updates, dependency updates) |\n| `ci` | CI/CD configuration changes |\n| `perf` | Performance improvements |\n| `test` | Adding or updating tests |\n| `build` | Build system or external dependency changes |\n| `revert` | Reverting a previous commit |\n\n### Examples\n\n```bash\n# Adding a new resource\nfeat: add article about closures by John Doe\n\n# Fixing a broken link\nfix: update broken MDN link in Promises section\n\n# Documentation update\ndocs: update contributing guidelines for translations\n\n# Maintenance task\nchore: update opencode.json configuration\n\n# Adding content to existing concept\nfeat(closures): add video tutorial by Fun Fun Function\n\n# Multiple changes in body\nfeat: add new resources for async/await\n\n- Add article by JavaScript Teacher\n- Add video tutorial by Traversy Media\n- Update reference links\n```\n\n### Rules\n\n1. **Use lowercase** for the type and description\n2. **No period** at the end of the description\n3. **Use imperative mood** (\"add\" not \"added\", \"fix\" not \"fixed\")\n4. **Keep the first line under 72 characters**\n5. **Reference issues** in the footer when applicable (e.g., `Closes #123`)\n\n## MCP Servers Available\n\nThis project has OpenCode configured with:\n\n1. **Context7** - Documentation search (`use context7` in prompts)\n2. **GitHub** - Repository management (`use github` in prompts)\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) as the test runner to verify that code examples in the documentation work correctly.\n\n### Running Tests\n\n```bash\n# Run all tests once\nnpm test\n\n# Run tests in watch mode (re-runs on file changes)\nnpm run test:watch\n\n# Run tests with coverage report\nnpm run test:coverage\n```\n\n### Test Structure\n\nTests are organized by concept category in the `tests/` directory:\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### Writing Tests for Code Examples\n\nWhen adding new code examples to concept documentation, please include corresponding tests:\n\n1. **File naming**: Create `{concept-name}.test.js` in `tests/{category}/{concept-name}/`\n2. **Use explicit imports**: \n ```javascript\n import { describe, it, expect } from 'vitest'\n ```\n3. **Convert console.log examples to assertions**:\n ```javascript\n // Documentation example:\n // console.log(typeof \"hello\") // \"string\"\n \n // Test:\n it('should return string type', () => {\n expect(typeof \"hello\").toBe(\"string\")\n })\n ```\n4. **Test error cases**: Use `expect(() => { ... }).toThrow()` for operations that should throw\n5. **Skip browser-specific examples**: Tests run in Node.js, so skip DOM/window/document examples\n6. **Note strict mode behavior**: Vitest runs in strict mode, so operations that \"silently fail\" in non-strict mode will throw `TypeError`\n\n### Current Test Coverage\n\n| Category | Concept | Tests |\n|----------|---------|-------|\n| Fundamentals | Call Stack | 20 |\n| Fundamentals | Primitive Types | 73 |\n| Fundamentals | Value vs Reference Types | 54 |\n| Fundamentals | Type Coercion | 74 |\n| Fundamentals | Equality Operators | 87 |\n| Fundamentals | Scope and Closures | 46 |\n| Functions & Execution | Event Loop | 56 |\n| Functions & Execution | IIFE & Modules | 61 |\n| Web Platform | DOM | 85 |\n| Web Platform | HTTP & Fetch | 72 |\n| **Total** | | **628** |\n\n## Documentation Site (Mintlify)\n\nThe project includes a Mintlify documentation site in the `/docs` directory.\n\n### Local Development\n\n```bash\n# Using npm script\nnpm run docs\n\n# Or install Mintlify CLI globally\nnpm i -g mint\ncd docs\nmint dev\n```\n\nThe site will be available at `http://localhost:3000`.\n\n### Documentation Structure\n\n- **Getting Started**: Homepage and introduction\n- **Fundamentals**: Concepts 1-6 (Primitive Types through Call Stack)\n- **Functions & Execution**: Concepts 7-8 (Event Loop through IIFE/Modules)\n- **Web Platform**: Concepts 9-10 (DOM and HTTP & Fetch)\n- **Object-Oriented JS**: Concepts 11-15 (Factories through Object.create/assign)\n- **Functional Programming**: Concepts 16-19 (map/reduce/filter through Recursion)\n- **Async JavaScript**: Concepts 20-22 (Collections/Generators through async/await)\n- **Advanced Topics**: Concepts 23-31 (JavaScript Engines through Clean Code)\n\n### Adding/Editing Concept Pages\n\nEach concept page is in `docs/concepts/` and follows this template:\n\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description\"\n---\n\n## Overview\n[Explanation of the concept]\n\n## Reference\n[MDN or official docs links]\n\n## Articles\n[Curated articles with CardGroup components]\n\n## Videos\n[Curated videos with CardGroup components]\n```\n\n## Important Notes\n\n- This is primarily a documentation/resource repository, not a code library\n- The main content lives in `README.md` and `/docs` (Mintlify site)\n- Translations are maintained in separate forked repositories\n- Community contributions are welcome and encouraged\n- MIT Licensed\n\n## Custom Skills\n\n### write-concept Skill\n\nUse the `/write-concept` skill when writing or improving concept documentation pages. This skill provides comprehensive guidelines for:\n\n- **Page Structure**: Exact template for concept pages (frontmatter, opening hook, code examples, sections)\n- **SEO Optimization**: Critical guidelines for ranking in search results\n- **Writing Style**: Voice, tone, and how to make content accessible to beginners\n- **Code Examples**: Best practices for clear, educational code\n- **Quality Checklists**: Verification steps before publishing\n\n**When to invoke:**\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality\n\n**SEO is Critical:** Each concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n\nThe skill includes detailed guidance on title optimization (50-60 chars), meta descriptions (150-160 chars), keyword placement, and featured snippet optimization.\n\n**Location:** `.claude/skills/write-concept/SKILL.md`\n\n### fact-check Skill\n\nUse the `/fact-check` skill when verifying the technical accuracy of concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Verification**: Verify all code examples produce stated outputs, run project tests\n- **MDN/Spec Compliance**: Check claims against official MDN documentation and ECMAScript specification\n- **External Resource Checks**: Verify all links work and descriptions accurately represent content\n- **Misconception Detection**: Common JavaScript misconceptions to watch for (type coercion, async behavior, etc.)\n- **Test Integration**: Instructions for running `npm test` to verify code examples\n- **Report Template**: Structured format for documenting findings with severity levels\n\n**When to invoke:**\n- Before publishing a new concept page\n- After significant edits to existing pages\n- When reviewing community contributions\n- Periodic accuracy audits of existing content\n\n**What gets checked:**\n- Every code example for correct output\n- All MDN links for validity (not 404)\n- API descriptions match current MDN documentation\n- External resources (articles, videos) are accessible and accurate\n- Technical claims are correct and properly nuanced\n- No common JavaScript misconceptions stated as fact\n\n**Location:** `.claude/skills/fact-check/SKILL.md`\n\n### seo-review Skill\n\nUse the `/seo-review` skill when auditing concept pages for search engine optimization. This skill provides a focused audit checklist:\n\n- **27-Point Scoring System**: Systematic audit across 6 categories\n- **Title & Meta Optimization**: Character counts, keyword placement, compelling hooks\n- **Keyword Strategy**: Pre-built keyword clusters for all JavaScript concepts\n- **Featured Snippet Optimization**: Patterns for winning position zero in search results\n- **Internal Linking**: Audit of concept interconnections and anchor text quality\n- **Report Template**: Structured SEO audit report with prioritized fixes\n\n**When to invoke:**\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n\n**Scoring Categories (30 points total):**\n- Title Tag (4 points)\n- Meta Description (4 points)\n- Keyword Placement (5 points)\n- Content Structure (6 points)\n- Featured Snippets (4 points)\n- Internal Linking (4 points)\n- Technical SEO (3 points) — Single H1, keyword in slug, no orphan pages\n\n**Score Interpretation:**\n- 90-100% (27-30): Ready to publish\n- 75-89% (23-26): Minor optimizations needed\n- 55-74% (17-22): Several improvements needed\n- Below 55% (<17): Significant work required\n\n**Location:** `.claude/skills/seo-review/SKILL.md`\n\n### test-writer Skill\n\nUse the `/test-writer` skill when generating Vitest tests for code examples in concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Extraction**: Identify and categorize all code examples (testable, DOM, error, conceptual)\n- **Test Patterns**: 16 patterns for converting different types of code examples to tests\n- **DOM Testing**: Separate file structure with jsdom environment for browser-specific code\n- **Source References**: Line number references linking tests to documentation\n- **Project Conventions**: File naming, describe block organization, assertion patterns\n- **Report Template**: Test coverage report documenting what was tested and skipped\n\n**When to invoke:**\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n\n**Test Categories:**\n- Basic value assertions (`console.log` → `expect`)\n- Error testing (`toThrow` patterns)\n- Async testing (Promises, async/await)\n- DOM testing (jsdom environment, events)\n- Floating point (toBeCloseTo)\n- Object/Array comparisons (toEqual)\n\n**File Structure:**\n```\ntests/{category}/{concept-name}/{concept-name}.test.js\ntests/{category}/{concept-name}/{concept-name}.dom.test.js (if DOM examples)\n```\n\n**Location:** `.claude/skills/test-writer/SKILL.md`\n\n### resource-curator Skill\n\nUse the `/resource-curator` skill when finding, evaluating, or maintaining external resources (articles, videos, courses) for concept pages. This skill provides:\n\n- **Audit Process**: Check existing links for accessibility, accuracy, and relevance\n- **Trusted Sources**: Prioritized lists of reputable article, video, and course sources\n- **Quality Criteria**: Must-have, should-have, and red flag checklists\n- **Description Writing**: Formula and examples for specific, valuable descriptions\n- **Publication Guidelines**: Date thresholds for different topic categories\n- **Report Template**: Audit report for documenting broken, outdated, and missing resources\n\n**When to invoke:**\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n**Resource Targets:**\n- Reference: 2-4 MDN links\n- Articles: 4-6 quality articles\n- Videos: 3-4 quality videos\n- Courses: 1-3 (optional)\n\n**Trusted Sources Include:**\n- Articles: javascript.info, MDN Guides, freeCodeCamp, 2ality, CSS-Tricks, dev.to\n- Videos: Fireship, Web Dev Simplified, Fun Fun Function, Traversy Media, JSConf\n- Courses: javascript.info, Piccalilli, freeCodeCamp, Frontend Masters\n\n**Location:** `.claude/skills/resource-curator/SKILL.md`\n\n### concept-workflow Skill\n\nUse the `/concept-workflow` skill for end-to-end creation of a complete concept page. This orchestrator skill coordinates all five specialized skills in optimal order:\n\n```\nPhase 1: resource-curator → Find quality external resources\nPhase 2: write-concept → Write the documentation page\nPhase 3: test-writer → Generate tests for code examples\nPhase 4: fact-check → Verify technical accuracy\nPhase 5: seo-review → Optimize for search visibility\n```\n\n**When to invoke:**\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want the full end-to-end workflow with all quality checks\n\n**What it orchestrates:**\n- Resource curation (2-4 MDN refs, 4-6 articles, 3-4 videos)\n- Complete concept page writing (1,500+ words)\n- Comprehensive test generation for all code examples\n- Technical accuracy verification with test execution\n- SEO audit targeting 90%+ score (24+/27)\n\n**Deliverables:**\n- `/docs/concepts/{concept-name}.mdx` — Complete documentation page\n- `/tests/{category}/{concept-name}/{concept-name}.test.js` — Test file\n- Updated `docs.json` navigation (if new concept)\n- Fact-check report\n- SEO audit report (score 24+/27)\n\n**Estimated Time:** 2-5 hours depending on concept complexity\n\n**Example prompt:**\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\n**Location:** `.claude/skills/concept-workflow/SKILL.md`\n\n## Maintainer\n\n**Leonardo Maldonado** - [@leonardomso](https://github.com/leonardomso)\n\n## Links\n\n- Repository: https://github.com/leonardomso/33-js-concepts\n- Issues: https://github.com/leonardomso/33-js-concepts/issues\n- Original Article: [33 Fundamentals Every JavaScript Developer Should Know](https://medium.com/@stephenthecurt/33-fundamentals-every-javascript-developer-should-know-13dd720a90d1) by Stephen Curtis\n","isInternal":false,"tokens":4754,"sizeBytes":20805},{"name":"SKILL.md","path":".claude/skills/concept-workflow/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.claude/skills/concept-workflow/SKILL.md","title":"concept-workflow","category":"anthropic-skill","format":"markdown","content":"---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n","frontmatter":{"name":"concept-workflow","description":"End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review"},"isInternal":false,"tokens":3766,"sizeBytes":17000},{"name":"SKILL.md","path":".claude/skills/fact-check/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.claude/skills/fact-check/SKILL.md","title":"fact-check","category":"anthropic-skill","format":"markdown","content":"---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n","frontmatter":{"name":"fact-check","description":"Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation"},"isInternal":false,"tokens":4800,"sizeBytes":20221},{"name":"SKILL.md","path":".claude/skills/resource-curator/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.claude/skills/resource-curator/SKILL.md","title":"resource-curator","category":"anthropic-skill","format":"markdown","content":"---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n<Card title=\"JavaScript Visualized: Promises & Async/Await — Lydia Hallie\" icon=\"newspaper\" href=\"https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n</Card>\n\n<Card title=\"What the heck is the event loop anyway? — Philip Roberts\" icon=\"video\" href=\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\">\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n</Card>\n\n<Card title=\"You Don't Know JS: Scope & Closures — Kyle Simpson\" icon=\"book\" href=\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md\">\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n</Card>\n\n<Card title=\"JavaScript Promises in 10 Minutes — Web Dev Simplified\" icon=\"video\" href=\"https://www.youtube.com/watch?v=DHvZLI7Db8E\">\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n</Card>\n\n<Card title=\"How to Escape Async/Await Hell — Aditya Agarwal\" icon=\"newspaper\" href=\"https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c\">\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n</Card>\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n<!-- TOO GENERIC -->\n<Card title=\"Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to Promises in JavaScript.\n</Card>\n\n<!-- NO VALUE PROPOSITION -->\n<Card title=\"Learn Closures\" icon=\"video\" href=\"...\">\n This video explains closures in JavaScript.\n</Card>\n\n<!-- VAGUE, NO SPECIFICS -->\n<Card title=\"JavaScript Guide\" icon=\"newspaper\" href=\"...\">\n Everything you need to know about JavaScript.\n</Card>\n\n<!-- JUST RESTATING THE TITLE -->\n<Card title=\"Understanding the Event Loop\" icon=\"video\" href=\"...\">\n A video about understanding the event loop.\n</Card>\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"[Main Topic] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n </Card>\n <Card title=\"[Related API/Concept] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n </Card>\n</CardGroup>\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Specific coverage]. \n [Value proposition].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Unique angle]. \n [Why it's worth reading].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What it covers]. \n [Best for whom].\n </Card>\n</CardGroup>\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [What it covers/unique approach]. \n [Why watch/who it's for].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Specific focus]. \n [What makes it stand out].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Coverage]. \n [Value].\n </Card>\n</CardGroup>\n```\n\n### Books Section (Optional)\n\n```markdown\n<Card title=\"[Book Title] — [Author]\" icon=\"book\" href=\"...\">\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n</Card>\n```\n\n### Courses Section (Optional)\n\n```markdown\n<CardGroup cols={2}>\n <Card title=\"[Course Title] — [Platform]\" icon=\"graduation-cap\" href=\"...\">\n [What the course covers]. \n [Format and who it's best for].\n </Card>\n</CardGroup>\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n","frontmatter":{"name":"resource-curator","description":"Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links"},"isInternal":false,"tokens":4941,"sizeBytes":19790},{"name":"SKILL.md","path":".claude/skills/seo-review/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.claude/skills/seo-review/SKILL.md","title":"seo-review","category":"anthropic-skill","format":"markdown","content":"---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n<AccordionGroup>\n <Accordion title=\"Call Stack\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Primitive Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n </Accordion>\n\n <Accordion title=\"Value vs Reference Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n </Accordion>\n\n <Accordion title=\"Type Coercion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n </Accordion>\n\n <Accordion title=\"Equality Operators\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n </Accordion>\n\n <Accordion title=\"Scope and Closures\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Event Loop\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n </Accordion>\n\n <Accordion title=\"Promises\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n </Accordion>\n\n <Accordion title=\"async/await\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n </Accordion>\n\n <Accordion title=\"this Keyword\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n </Accordion>\n\n <Accordion title=\"Prototypes\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"DOM\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n </Accordion>\n\n <Accordion title=\"Higher-Order Functions\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n </Accordion>\n\n <Accordion title=\"Recursion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n </Accordion>\n</AccordionGroup>\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `<Info>` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `<Steps>` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n<!-- In Prerequisites (Warning box) -->\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n</Warning>\n\n<!-- In Body Content (natural context) -->\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n<!-- In Related Concepts Section -->\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n</CardGroup>\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `<Info>` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `<Steps>` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `<Warning>` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n","frontmatter":{"name":"seo-review","description":"Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential"},"isInternal":false,"tokens":8273,"sizeBytes":37284},{"name":"SKILL.md","path":".claude/skills/test-writer/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.claude/skills/test-writer/SKILL.md","title":"test-writer","category":"anthropic-skill","format":"markdown","content":"---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n","frontmatter":{"name":"test-writer","description":"Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines"},"isInternal":false,"tokens":5300,"sizeBytes":21869},{"name":"SKILL.md","path":".claude/skills/write-concept/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.claude/skills/write-concept/SKILL.md","title":"write-concept","category":"anthropic-skill","format":"markdown","content":"---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n<Info>\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n</Info>\n\n<Warning>\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n</Warning>\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n<Steps>\n <Step title=\"Step 1\">\n Explanation of the first step\n </Step>\n <Step title=\"Step 2\">\n Explanation of the second step\n </Step>\n</Steps>\n\n<AccordionGroup>\n <Accordion title=\"Subtopic 1\">\n Detailed explanation with code examples\n </Accordion>\n <Accordion title=\"Subtopic 2\">\n Detailed explanation with code examples\n </Accordion>\n</AccordionGroup>\n\n<Tip>\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n</Tip>\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n<Warning>\n**The Trap:** [Clear explanation of what goes wrong and why]\n</Warning>\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n<Info>\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n</Info>\n\n---\n\n## Test Your Knowledge\n\n<AccordionGroup>\n <Accordion title=\"Question 1: [Specific question about the concept]\">\n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n </Accordion>\n \n <Accordion title=\"Question 2: [Another question]\">\n **Answer:**\n \n [Clear explanation with code if needed]\n </Accordion>\n \n [Aim for 5-6 questions covering the main topics]\n</AccordionGroup>\n\n---\n\n## Related Concepts\n\n<CardGroup cols={2}>\n <Card title=\"Related Concept 1\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n <Card title=\"Related Concept 2\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n</CardGroup>\n\n---\n\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"Main Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation for the main concept\n </Card>\n <Card title=\"Related API — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Additional MDN reference\n </Card>\n</CardGroup>\n\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"Article Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this article.\n </Card>\n [Aim for 4-6 high-quality articles]\n</CardGroup>\n\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"Video Title\" icon=\"video\" href=\"https://...\">\n Brief description of what the video covers.\n </Card>\n [Aim for 3-4 quality videos]\n</CardGroup>\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n<AccordionGroup>\n <Accordion title=\"Closures Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Promises Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n </Accordion>\n \n <Accordion title=\"Event Loop Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Call Stack Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n </Accordion>\n</AccordionGroup>\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `<title>` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->","frontmatter":{"name":"write-concept","description":"Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines"},"isInternal":false,"tokens":11510,"sizeBytes":54569},{"name":"SKILL.md","path":".opencode/skill/concept-workflow/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.opencode/skill/concept-workflow/SKILL.md","title":"concept-workflow","category":"anthropic-skill","format":"markdown","content":"---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n","frontmatter":{"name":"concept-workflow","description":"End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review"},"isInternal":false,"tokens":3766,"sizeBytes":17000},{"name":"SKILL.md","path":".opencode/skill/fact-check/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.opencode/skill/fact-check/SKILL.md","title":"fact-check","category":"anthropic-skill","format":"markdown","content":"---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n","frontmatter":{"name":"fact-check","description":"Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation"},"isInternal":false,"tokens":4800,"sizeBytes":20221},{"name":"SKILL.md","path":".opencode/skill/resource-curator/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.opencode/skill/resource-curator/SKILL.md","title":"resource-curator","category":"anthropic-skill","format":"markdown","content":"---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n<Card title=\"JavaScript Visualized: Promises & Async/Await — Lydia Hallie\" icon=\"newspaper\" href=\"https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n</Card>\n\n<Card title=\"What the heck is the event loop anyway? — Philip Roberts\" icon=\"video\" href=\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\">\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n</Card>\n\n<Card title=\"You Don't Know JS: Scope & Closures — Kyle Simpson\" icon=\"book\" href=\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md\">\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n</Card>\n\n<Card title=\"JavaScript Promises in 10 Minutes — Web Dev Simplified\" icon=\"video\" href=\"https://www.youtube.com/watch?v=DHvZLI7Db8E\">\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n</Card>\n\n<Card title=\"How to Escape Async/Await Hell — Aditya Agarwal\" icon=\"newspaper\" href=\"https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c\">\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n</Card>\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n<!-- TOO GENERIC -->\n<Card title=\"Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to Promises in JavaScript.\n</Card>\n\n<!-- NO VALUE PROPOSITION -->\n<Card title=\"Learn Closures\" icon=\"video\" href=\"...\">\n This video explains closures in JavaScript.\n</Card>\n\n<!-- VAGUE, NO SPECIFICS -->\n<Card title=\"JavaScript Guide\" icon=\"newspaper\" href=\"...\">\n Everything you need to know about JavaScript.\n</Card>\n\n<!-- JUST RESTATING THE TITLE -->\n<Card title=\"Understanding the Event Loop\" icon=\"video\" href=\"...\">\n A video about understanding the event loop.\n</Card>\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"[Main Topic] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n </Card>\n <Card title=\"[Related API/Concept] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n </Card>\n</CardGroup>\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Specific coverage]. \n [Value proposition].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Unique angle]. \n [Why it's worth reading].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What it covers]. \n [Best for whom].\n </Card>\n</CardGroup>\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [What it covers/unique approach]. \n [Why watch/who it's for].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Specific focus]. \n [What makes it stand out].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Coverage]. \n [Value].\n </Card>\n</CardGroup>\n```\n\n### Books Section (Optional)\n\n```markdown\n<Card title=\"[Book Title] — [Author]\" icon=\"book\" href=\"...\">\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n</Card>\n```\n\n### Courses Section (Optional)\n\n```markdown\n<CardGroup cols={2}>\n <Card title=\"[Course Title] — [Platform]\" icon=\"graduation-cap\" href=\"...\">\n [What the course covers]. \n [Format and who it's best for].\n </Card>\n</CardGroup>\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n","frontmatter":{"name":"resource-curator","description":"Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links"},"isInternal":false,"tokens":4941,"sizeBytes":19790},{"name":"SKILL.md","path":".opencode/skill/seo-review/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.opencode/skill/seo-review/SKILL.md","title":"seo-review","category":"anthropic-skill","format":"markdown","content":"---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n<AccordionGroup>\n <Accordion title=\"Call Stack\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Primitive Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n </Accordion>\n\n <Accordion title=\"Value vs Reference Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n </Accordion>\n\n <Accordion title=\"Type Coercion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n </Accordion>\n\n <Accordion title=\"Equality Operators\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n </Accordion>\n\n <Accordion title=\"Scope and Closures\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Event Loop\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n </Accordion>\n\n <Accordion title=\"Promises\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n </Accordion>\n\n <Accordion title=\"async/await\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n </Accordion>\n\n <Accordion title=\"this Keyword\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n </Accordion>\n\n <Accordion title=\"Prototypes\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"DOM\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n </Accordion>\n\n <Accordion title=\"Higher-Order Functions\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n </Accordion>\n\n <Accordion title=\"Recursion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n </Accordion>\n</AccordionGroup>\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `<Info>` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `<Steps>` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n<!-- In Prerequisites (Warning box) -->\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n</Warning>\n\n<!-- In Body Content (natural context) -->\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n<!-- In Related Concepts Section -->\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n</CardGroup>\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `<Info>` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `<Steps>` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `<Warning>` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n","frontmatter":{"name":"seo-review","description":"Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential"},"isInternal":false,"tokens":8273,"sizeBytes":37284},{"name":"SKILL.md","path":".opencode/skill/test-writer/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.opencode/skill/test-writer/SKILL.md","title":"test-writer","category":"anthropic-skill","format":"markdown","content":"---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n","frontmatter":{"name":"test-writer","description":"Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines"},"isInternal":false,"tokens":5300,"sizeBytes":21869},{"name":"SKILL.md","path":".opencode/skill/write-concept/SKILL.md","rawUrl":"https://raw.githubusercontent.com/leonardomso/33-js-concepts/HEAD/.opencode/skill/write-concept/SKILL.md","title":"write-concept","category":"anthropic-skill","format":"markdown","content":"---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n<Info>\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n</Info>\n\n<Warning>\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n</Warning>\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n<Steps>\n <Step title=\"Step 1\">\n Explanation of the first step\n </Step>\n <Step title=\"Step 2\">\n Explanation of the second step\n </Step>\n</Steps>\n\n<AccordionGroup>\n <Accordion title=\"Subtopic 1\">\n Detailed explanation with code examples\n </Accordion>\n <Accordion title=\"Subtopic 2\">\n Detailed explanation with code examples\n </Accordion>\n</AccordionGroup>\n\n<Tip>\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n</Tip>\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n<Warning>\n**The Trap:** [Clear explanation of what goes wrong and why]\n</Warning>\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n<Info>\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n</Info>\n\n---\n\n## Test Your Knowledge\n\n<AccordionGroup>\n <Accordion title=\"Question 1: [Specific question about the concept]\">\n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n </Accordion>\n \n <Accordion title=\"Question 2: [Another question]\">\n **Answer:**\n \n [Clear explanation with code if needed]\n </Accordion>\n \n [Aim for 5-6 questions covering the main topics]\n</AccordionGroup>\n\n---\n\n## Related Concepts\n\n<CardGroup cols={2}>\n <Card title=\"Related Concept 1\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n <Card title=\"Related Concept 2\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n</CardGroup>\n\n---\n\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"Main Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation for the main concept\n </Card>\n <Card title=\"Related API — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Additional MDN reference\n </Card>\n</CardGroup>\n\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"Article Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this article.\n </Card>\n [Aim for 4-6 high-quality articles]\n</CardGroup>\n\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"Video Title\" icon=\"video\" href=\"https://...\">\n Brief description of what the video covers.\n </Card>\n [Aim for 3-4 quality videos]\n</CardGroup>\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n<AccordionGroup>\n <Accordion title=\"Closures Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Promises Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n </Accordion>\n \n <Accordion title=\"Event Loop Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Call Stack Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n </Accordion>\n</AccordionGroup>\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `<title>` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->","frontmatter":{"name":"write-concept","description":"Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines"},"isInternal":false,"tokens":11510,"sizeBytes":54569}],"systemPromptSnippet":"<yakaai_skills repo=\"leonardomso/33-js-concepts\">\n<!-- File: .claude/CLAUDE.md (Tokens: ~4754 | Category: claude-rule) -->\n# 33 JavaScript Concepts - Project Context\n\n## Overview\n\nThis repository is a curated collection of **33 essential JavaScript concepts** that every JavaScript developer should know. It serves as a comprehensive learning resource and study guide for developers at all levels, from beginners to advanced practitioners.\n\nThe project was recognized by GitHub as one of the **top open source projects of 2018** and has been translated into 40+ languages by the community.\n\n## Project Purpose\n\n- Help developers master fundamental and advanced JavaScript concepts\n- Provide curated resources (articles, videos, books) for each concept\n- Serve as a reference guide for interview preparation\n- Foster community contributions through translations and resource additions\n\n## Repository Structure\n\n```\n33-js-concepts/\n├── .claude/ # Claude configuration\n│ ├── CLAUDE.md # Project context and guidelines\n│ └── skills/ # Custom skills for content creation\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── .opencode/ # OpenCode configuration\n│ └── skill/ # Custom skills (mirrored from .claude/skills)\n│ ├── write-concept/ # Skill for writing concept documentation\n│ ├── fact-check/ # Skill for verifying technical accuracy\n│ ├── seo-review/ # Skill for SEO audits\n│ ├── test-writer/ # Skill for generating Vitest tests\n│ ├── resource-curator/ # Skill for curating external resources\n│ └── concept-workflow/ # Skill for end-to-end concept creation\n├── docs/ # Mintlify documentation site\n│ ├── docs.json # Mintlify configuration\n│ ├── index.mdx # Homepage\n│ ├── introduction.mdx # Getting started guide\n│ ├── contributing.mdx # Contribution guidelines\n│ ├── translations.mdx # Community translations\n│ └── concepts/ # 33 concept pages\n│ ├── call-stack.mdx\n│ ├── primitive-types.mdx\n│ └── ... (all 33 concepts)\n├── tests/ # Vitest test suites\n│ └── fundamentals/ # Tests for fundamental concepts (1-6)\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── vitest.config.js # Vitest configuration\n├── README.md # Main GitHub README\n├── CONTRIBUTING.md # Guidelines for contributors\n├── CODE_OF_CONDUCT.md # Community standards\n├── LICENSE # MIT License\n├── package.json # Project metadata\n├── opencode.jsonc # OpenCode AI assistant configuration\n└── github-image.png # Project banner image\n```\n\n## The 31 Concepts (32nd and 33rd coming soon)\n\n### Fundamentals (1-6)\n1. Primitive Types\n2. Value Types and Reference Types\n3. Type Coercion (Implicit, Explicit, Nominal, Structuring and Duck Typing)\n4. Equality Operators (== vs === vs typeof)\n5. Scope & Closures\n6. Call Stack\n\n### Functions & Execution (7-8)\n7. Event Loop (Message Queue)\n8. IIFE, Modules and Namespaces\n\n### Web Platform (9-10)\n9. DOM and Layout Trees\n10. HTTP & Fetch\n\n### Object-Oriented JS (11-15)\n11. Factories and Classes\n12. this, call, apply and bind\n13. new, Constructor, instanceof and Instances\n14. Prototype Inheritance and Prototype Chain\n15. Object.create and Object.assign\n\n### Functional Programming (16-19)\n16. map, reduce, filter\n17. Pure Functions, Side Effects, State Mutation and Event Propagation\n18. Higher-Order Functions\n19. Recursion\n\n### Async JavaScript (20-22)\n20. Collections and Generators\n21. Promises\n22. async/await\n\n### Advanced Topics (23-31)\n23. JavaScript Engines\n24. Data Structures\n25. Big O Notation (Expensive Operations)\n26. Algorithms\n27. Inheritance, Polymorphism and Code Reuse\n28. Design Patterns\n29. Partial Applications, Currying, Compose and Pipe\n30. Clean Code\n\n## Content Format\n\nEach concept page in `/docs/concepts/` follows this structure:\n\n### 1. Frontmatter\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description of the concept\"\n---\n```\n\n### 2. Real-World Analogy\nStart with an engaging analogy that makes the concept relatable. Include ASCII art diagrams when helpful.\n\n### 3. Info Box (What You'll Learn)\n```mdx\n<Info>\n**What you'll learn in this guide:**\n- Key point 1\n- Key point 2\n- Key point 3\n</Info>\n```\n\n### 4. Main Content Sections\n- Use clear headings (`##`, `###`) to organize topics\n- Include code examples with explanations\n- Use Mintlify components (`<AccordionGroup>`, `<Steps>`, `<Tabs>`, etc.)\n- Add diagrams and visualizations where helpful\n\n### 5. Related Concepts\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Related Concept\" icon=\"icon-name\" href=\"/concepts/concept-slug\">\n Brief description of how it relates\n </Card>\n</CardGroup>\n```\n\n### 6. Reference\n```mdx\n<Card title=\"Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation\n</Card>\n```\n\n### 7. Articles\nCurated blog posts and tutorials using `<CardGroup>` with `icon=\"newspaper\"`.\n\n### 8. Courses (optional)\nEducational courses using `<Card>` with `icon=\"graduation-cap\"`.\n\n### 9. Videos\nYouTube tutorials and conference talks using `<CardGroup>` with `icon=\"video\"`.\n\n## Contributing Guidelines\n\n### Adding Resources\n- Resources should be high-quality and educational\n- Follow the existing Card format for consistency\n- Include a brief description of what the resource covers\n\n### Resource Format\n```mdx\n<Card title=\"Resource Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this resource.\n</Card>\n```\n\n## Git Commit Conventions\n\nThis project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification. All commits must adhere to this format for consistency and automated changelog generation.\n\n### Commit Message Format\n\n```\n<type>[optional scope]: <description>\n\n[optional body]\n\n[optional footer(s)]\n```\n\n### Commit Types\n\n| Type | Description |\n|------|-------------|\n| `feat` | New features or content additions (e.g., new resources, new concepts) |\n| `fix` | Bug fixes, broken link corrections, typo fixes |\n| `docs` | Documentation changes (README updates, CONTRIBUTING updates) |\n| `style` | Formatting changes (markdown formatting, whitespace) |\n| `refactor` | Content restructuring without adding new resources |\n| `chore` | Maintenance tasks (config updates, dependency updates) |\n| `ci` | CI/CD configuration changes |\n| `perf` | Performance improvements |\n| `test` | Adding or updating tests |\n| `build` | Build system or external dependency changes |\n| `revert` | Reverting a previous commit |\n\n### Examples\n\n```bash\n# Adding a new resource\nfeat: add article about closures by John Doe\n\n# Fixing a broken link\nfix: update broken MDN link in Promises section\n\n# Documentation update\ndocs: update contributing guidelines for translations\n\n# Maintenance task\nchore: update opencode.json configuration\n\n# Adding content to existing concept\nfeat(closures): add video tutorial by Fun Fun Function\n\n# Multiple changes in body\nfeat: add new resources for async/await\n\n- Add article by JavaScript Teacher\n- Add video tutorial by Traversy Media\n- Update reference links\n```\n\n### Rules\n\n1. **Use lowercase** for the type and description\n2. **No period** at the end of the description\n3. **Use imperative mood** (\"add\" not \"added\", \"fix\" not \"fixed\")\n4. **Keep the first line under 72 characters**\n5. **Reference issues** in the footer when applicable (e.g., `Closes #123`)\n\n## MCP Servers Available\n\nThis project has OpenCode configured with:\n\n1. **Context7** - Documentation search (`use context7` in prompts)\n2. **GitHub** - Repository management (`use github` in prompts)\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) as the test runner to verify that code examples in the documentation work correctly.\n\n### Running Tests\n\n```bash\n# Run all tests once\nnpm test\n\n# Run tests in watch mode (re-runs on file changes)\nnpm run test:watch\n\n# Run tests with coverage report\nnpm run test:coverage\n```\n\n### Test Structure\n\nTests are organized by concept category in the `tests/` directory:\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### Writing Tests for Code Examples\n\nWhen adding new code examples to concept documentation, please include corresponding tests:\n\n1. **File naming**: Create `{concept-name}.test.js` in `tests/{category}/{concept-name}/`\n2. **Use explicit imports**: \n ```javascript\n import { describe, it, expect } from 'vitest'\n ```\n3. **Convert console.log examples to assertions**:\n ```javascript\n // Documentation example:\n // console.log(typeof \"hello\") // \"string\"\n \n // Test:\n it('should return string type', () => {\n expect(typeof \"hello\").toBe(\"string\")\n })\n ```\n4. **Test error cases**: Use `expect(() => { ... }).toThrow()` for operations that should throw\n5. **Skip browser-specific examples**: Tests run in Node.js, so skip DOM/window/document examples\n6. **Note strict mode behavior**: Vitest runs in strict mode, so operations that \"silently fail\" in non-strict mode will throw `TypeError`\n\n### Current Test Coverage\n\n| Category | Concept | Tests |\n|----------|---------|-------|\n| Fundamentals | Call Stack | 20 |\n| Fundamentals | Primitive Types | 73 |\n| Fundamentals | Value vs Reference Types | 54 |\n| Fundamentals | Type Coercion | 74 |\n| Fundamentals | Equality Operators | 87 |\n| Fundamentals | Scope and Closures | 46 |\n| Functions & Execution | Event Loop | 56 |\n| Functions & Execution | IIFE & Modules | 61 |\n| Web Platform | DOM | 85 |\n| Web Platform | HTTP & Fetch | 72 |\n| **Total** | | **628** |\n\n## Documentation Site (Mintlify)\n\nThe project includes a Mintlify documentation site in the `/docs` directory.\n\n### Local Development\n\n```bash\n# Using npm script\nnpm run docs\n\n# Or install Mintlify CLI globally\nnpm i -g mint\ncd docs\nmint dev\n```\n\nThe site will be available at `http://localhost:3000`.\n\n### Documentation Structure\n\n- **Getting Started**: Homepage and introduction\n- **Fundamentals**: Concepts 1-6 (Primitive Types through Call Stack)\n- **Functions & Execution**: Concepts 7-8 (Event Loop through IIFE/Modules)\n- **Web Platform**: Concepts 9-10 (DOM and HTTP & Fetch)\n- **Object-Oriented JS**: Concepts 11-15 (Factories through Object.create/assign)\n- **Functional Programming**: Concepts 16-19 (map/reduce/filter through Recursion)\n- **Async JavaScript**: Concepts 20-22 (Collections/Generators through async/await)\n- **Advanced Topics**: Concepts 23-31 (JavaScript Engines through Clean Code)\n\n### Adding/Editing Concept Pages\n\nEach concept page is in `docs/concepts/` and follows this template:\n\n```mdx\n---\ntitle: \"Concept Name\"\ndescription: \"Brief description\"\n---\n\n## Overview\n[Explanation of the concept]\n\n## Reference\n[MDN or official docs links]\n\n## Articles\n[Curated articles with CardGroup components]\n\n## Videos\n[Curated videos with CardGroup components]\n```\n\n## Important Notes\n\n- This is primarily a documentation/resource repository, not a code library\n- The main content lives in `README.md` and `/docs` (Mintlify site)\n- Translations are maintained in separate forked repositories\n- Community contributions are welcome and encouraged\n- MIT Licensed\n\n## Custom Skills\n\n### write-concept Skill\n\nUse the `/write-concept` skill when writing or improving concept documentation pages. This skill provides comprehensive guidelines for:\n\n- **Page Structure**: Exact template for concept pages (frontmatter, opening hook, code examples, sections)\n- **SEO Optimization**: Critical guidelines for ranking in search results\n- **Writing Style**: Voice, tone, and how to make content accessible to beginners\n- **Code Examples**: Best practices for clear, educational code\n- **Quality Checklists**: Verification steps before publishing\n\n**When to invoke:**\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality\n\n**SEO is Critical:** Each concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n\nThe skill includes detailed guidance on title optimization (50-60 chars), meta descriptions (150-160 chars), keyword placement, and featured snippet optimization.\n\n**Location:** `.claude/skills/write-concept/SKILL.md`\n\n### fact-check Skill\n\nUse the `/fact-check` skill when verifying the technical accuracy of concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Verification**: Verify all code examples produce stated outputs, run project tests\n- **MDN/Spec Compliance**: Check claims against official MDN documentation and ECMAScript specification\n- **External Resource Checks**: Verify all links work and descriptions accurately represent content\n- **Misconception Detection**: Common JavaScript misconceptions to watch for (type coercion, async behavior, etc.)\n- **Test Integration**: Instructions for running `npm test` to verify code examples\n- **Report Template**: Structured format for documenting findings with severity levels\n\n**When to invoke:**\n- Before publishing a new concept page\n- After significant edits to existing pages\n- When reviewing community contributions\n- Periodic accuracy audits of existing content\n\n**What gets checked:**\n- Every code example for correct output\n- All MDN links for validity (not 404)\n- API descriptions match current MDN documentation\n- External resources (articles, videos) are accessible and accurate\n- Technical claims are correct and properly nuanced\n- No common JavaScript misconceptions stated as fact\n\n**Location:** `.claude/skills/fact-check/SKILL.md`\n\n### seo-review Skill\n\nUse the `/seo-review` skill when auditing concept pages for search engine optimization. This skill provides a focused audit checklist:\n\n- **27-Point Scoring System**: Systematic audit across 6 categories\n- **Title & Meta Optimization**: Character counts, keyword placement, compelling hooks\n- **Keyword Strategy**: Pre-built keyword clusters for all JavaScript concepts\n- **Featured Snippet Optimization**: Patterns for winning position zero in search results\n- **Internal Linking**: Audit of concept interconnections and anchor text quality\n- **Report Template**: Structured SEO audit report with prioritized fixes\n\n**When to invoke:**\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n\n**Scoring Categories (30 points total):**\n- Title Tag (4 points)\n- Meta Description (4 points)\n- Keyword Placement (5 points)\n- Content Structure (6 points)\n- Featured Snippets (4 points)\n- Internal Linking (4 points)\n- Technical SEO (3 points) — Single H1, keyword in slug, no orphan pages\n\n**Score Interpretation:**\n- 90-100% (27-30): Ready to publish\n- 75-89% (23-26): Minor optimizations needed\n- 55-74% (17-22): Several improvements needed\n- Below 55% (<17): Significant work required\n\n**Location:** `.claude/skills/seo-review/SKILL.md`\n\n### test-writer Skill\n\nUse the `/test-writer` skill when generating Vitest tests for code examples in concept documentation. This skill provides comprehensive methodology for:\n\n- **Code Extraction**: Identify and categorize all code examples (testable, DOM, error, conceptual)\n- **Test Patterns**: 16 patterns for converting different types of code examples to tests\n- **DOM Testing**: Separate file structure with jsdom environment for browser-specific code\n- **Source References**: Line number references linking tests to documentation\n- **Project Conventions**: File naming, describe block organization, assertion patterns\n- **Report Template**: Test coverage report documenting what was tested and skipped\n\n**When to invoke:**\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n\n**Test Categories:**\n- Basic value assertions (`console.log` → `expect`)\n- Error testing (`toThrow` patterns)\n- Async testing (Promises, async/await)\n- DOM testing (jsdom environment, events)\n- Floating point (toBeCloseTo)\n- Object/Array comparisons (toEqual)\n\n**File Structure:**\n```\ntests/{category}/{concept-name}/{concept-name}.test.js\ntests/{category}/{concept-name}/{concept-name}.dom.test.js (if DOM examples)\n```\n\n**Location:** `.claude/skills/test-writer/SKILL.md`\n\n### resource-curator Skill\n\nUse the `/resource-curator` skill when finding, evaluating, or maintaining external resources (articles, videos, courses) for concept pages. This skill provides:\n\n- **Audit Process**: Check existing links for accessibility, accuracy, and relevance\n- **Trusted Sources**: Prioritized lists of reputable article, video, and course sources\n- **Quality Criteria**: Must-have, should-have, and red flag checklists\n- **Description Writing**: Formula and examples for specific, valuable descriptions\n- **Publication Guidelines**: Date thresholds for different topic categories\n- **Report Template**: Audit report for documenting broken, outdated, and missing resources\n\n**When to invoke:**\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n**Resource Targets:**\n- Reference: 2-4 MDN links\n- Articles: 4-6 quality articles\n- Videos: 3-4 quality videos\n- Courses: 1-3 (optional)\n\n**Trusted Sources Include:**\n- Articles: javascript.info, MDN Guides, freeCodeCamp, 2ality, CSS-Tricks, dev.to\n- Videos: Fireship, Web Dev Simplified, Fun Fun Function, Traversy Media, JSConf\n- Courses: javascript.info, Piccalilli, freeCodeCamp, Frontend Masters\n\n**Location:** `.claude/skills/resource-curator/SKILL.md`\n\n### concept-workflow Skill\n\nUse the `/concept-workflow` skill for end-to-end creation of a complete concept page. This orchestrator skill coordinates all five specialized skills in optimal order:\n\n```\nPhase 1: resource-curator → Find quality external resources\nPhase 2: write-concept → Write the documentation page\nPhase 3: test-writer → Generate tests for code examples\nPhase 4: fact-check → Verify technical accuracy\nPhase 5: seo-review → Optimize for search visibility\n```\n\n**When to invoke:**\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want the full end-to-end workflow with all quality checks\n\n**What it orchestrates:**\n- Resource curation (2-4 MDN refs, 4-6 articles, 3-4 videos)\n- Complete concept page writing (1,500+ words)\n- Comprehensive test generation for all code examples\n- Technical accuracy verification with test execution\n- SEO audit targeting 90%+ score (24+/27)\n\n**Deliverables:**\n- `/docs/concepts/{concept-name}.mdx` — Complete documentation page\n- `/tests/{category}/{concept-name}/{concept-name}.test.js` — Test file\n- Updated `docs.json` navigation (if new concept)\n- Fact-check report\n- SEO audit report (score 24+/27)\n\n**Estimated Time:** 2-5 hours depending on concept complexity\n\n**Example prompt:**\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\n**Location:** `.claude/skills/concept-workflow/SKILL.md`\n\n## Maintainer\n\n**Leonardo Maldonado** - [@leonardomso](https://github.com/leonardomso)\n\n## Links\n\n- Repository: https://github.com/leonardomso/33-js-concepts\n- Issues: https://github.com/leonardomso/33-js-concepts/issues\n- Original Article: [33 Fundamentals Every JavaScript Developer Should Know](https://medium.com/@stephenthecurt/33-fundamentals-every-javascript-developer-should-know-13dd720a90d1) by Stephen Curtis\n\n<!-- File: .claude/skills/concept-workflow/SKILL.md (Tokens: ~3766 | Category: anthropic-skill) -->\n---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n\n<!-- File: .claude/skills/fact-check/SKILL.md (Tokens: ~4800 | Category: anthropic-skill) -->\n---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n\n<!-- File: .claude/skills/resource-curator/SKILL.md (Tokens: ~4941 | Category: anthropic-skill) -->\n---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n<Card title=\"JavaScript Visualized: Promises & Async/Await — Lydia Hallie\" icon=\"newspaper\" href=\"https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n</Card>\n\n<Card title=\"What the heck is the event loop anyway? — Philip Roberts\" icon=\"video\" href=\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\">\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n</Card>\n\n<Card title=\"You Don't Know JS: Scope & Closures — Kyle Simpson\" icon=\"book\" href=\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md\">\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n</Card>\n\n<Card title=\"JavaScript Promises in 10 Minutes — Web Dev Simplified\" icon=\"video\" href=\"https://www.youtube.com/watch?v=DHvZLI7Db8E\">\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n</Card>\n\n<Card title=\"How to Escape Async/Await Hell — Aditya Agarwal\" icon=\"newspaper\" href=\"https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c\">\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n</Card>\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n<!-- TOO GENERIC -->\n<Card title=\"Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to Promises in JavaScript.\n</Card>\n\n<!-- NO VALUE PROPOSITION -->\n<Card title=\"Learn Closures\" icon=\"video\" href=\"...\">\n This video explains closures in JavaScript.\n</Card>\n\n<!-- VAGUE, NO SPECIFICS -->\n<Card title=\"JavaScript Guide\" icon=\"newspaper\" href=\"...\">\n Everything you need to know about JavaScript.\n</Card>\n\n<!-- JUST RESTATING THE TITLE -->\n<Card title=\"Understanding the Event Loop\" icon=\"video\" href=\"...\">\n A video about understanding the event loop.\n</Card>\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"[Main Topic] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n </Card>\n <Card title=\"[Related API/Concept] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n </Card>\n</CardGroup>\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Specific coverage]. \n [Value proposition].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Unique angle]. \n [Why it's worth reading].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What it covers]. \n [Best for whom].\n </Card>\n</CardGroup>\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [What it covers/unique approach]. \n [Why watch/who it's for].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Specific focus]. \n [What makes it stand out].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Coverage]. \n [Value].\n </Card>\n</CardGroup>\n```\n\n### Books Section (Optional)\n\n```markdown\n<Card title=\"[Book Title] — [Author]\" icon=\"book\" href=\"...\">\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n</Card>\n```\n\n### Courses Section (Optional)\n\n```markdown\n<CardGroup cols={2}>\n <Card title=\"[Course Title] — [Platform]\" icon=\"graduation-cap\" href=\"...\">\n [What the course covers]. \n [Format and who it's best for].\n </Card>\n</CardGroup>\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n\n<!-- File: .claude/skills/seo-review/SKILL.md (Tokens: ~8273 | Category: anthropic-skill) -->\n---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n<AccordionGroup>\n <Accordion title=\"Call Stack\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Primitive Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n </Accordion>\n\n <Accordion title=\"Value vs Reference Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n </Accordion>\n\n <Accordion title=\"Type Coercion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n </Accordion>\n\n <Accordion title=\"Equality Operators\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n </Accordion>\n\n <Accordion title=\"Scope and Closures\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Event Loop\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n </Accordion>\n\n <Accordion title=\"Promises\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n </Accordion>\n\n <Accordion title=\"async/await\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n </Accordion>\n\n <Accordion title=\"this Keyword\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n </Accordion>\n\n <Accordion title=\"Prototypes\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"DOM\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n </Accordion>\n\n <Accordion title=\"Higher-Order Functions\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n </Accordion>\n\n <Accordion title=\"Recursion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n </Accordion>\n</AccordionGroup>\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `<Info>` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `<Steps>` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n<!-- In Prerequisites (Warning box) -->\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n</Warning>\n\n<!-- In Body Content (natural context) -->\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n<!-- In Related Concepts Section -->\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n</CardGroup>\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `<Info>` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `<Steps>` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `<Warning>` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n\n<!-- File: .claude/skills/test-writer/SKILL.md (Tokens: ~5300 | Category: anthropic-skill) -->\n---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n\n<!-- File: .claude/skills/write-concept/SKILL.md (Tokens: ~11510 | Category: anthropic-skill) -->\n---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n<Info>\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n</Info>\n\n<Warning>\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n</Warning>\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n<Steps>\n <Step title=\"Step 1\">\n Explanation of the first step\n </Step>\n <Step title=\"Step 2\">\n Explanation of the second step\n </Step>\n</Steps>\n\n<AccordionGroup>\n <Accordion title=\"Subtopic 1\">\n Detailed explanation with code examples\n </Accordion>\n <Accordion title=\"Subtopic 2\">\n Detailed explanation with code examples\n </Accordion>\n</AccordionGroup>\n\n<Tip>\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n</Tip>\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n<Warning>\n**The Trap:** [Clear explanation of what goes wrong and why]\n</Warning>\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n<Info>\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n</Info>\n\n---\n\n## Test Your Knowledge\n\n<AccordionGroup>\n <Accordion title=\"Question 1: [Specific question about the concept]\">\n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n </Accordion>\n \n <Accordion title=\"Question 2: [Another question]\">\n **Answer:**\n \n [Clear explanation with code if needed]\n </Accordion>\n \n [Aim for 5-6 questions covering the main topics]\n</AccordionGroup>\n\n---\n\n## Related Concepts\n\n<CardGroup cols={2}>\n <Card title=\"Related Concept 1\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n <Card title=\"Related Concept 2\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n</CardGroup>\n\n---\n\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"Main Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation for the main concept\n </Card>\n <Card title=\"Related API — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Additional MDN reference\n </Card>\n</CardGroup>\n\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"Article Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this article.\n </Card>\n [Aim for 4-6 high-quality articles]\n</CardGroup>\n\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"Video Title\" icon=\"video\" href=\"https://...\">\n Brief description of what the video covers.\n </Card>\n [Aim for 3-4 quality videos]\n</CardGroup>\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n<AccordionGroup>\n <Accordion title=\"Closures Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Promises Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n </Accordion>\n \n <Accordion title=\"Event Loop Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Call Stack Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n </Accordion>\n</AccordionGroup>\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `<title>` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->\n\n<!-- File: .opencode/skill/concept-workflow/SKILL.md (Tokens: ~3766 | Category: anthropic-skill) -->\n---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review\n---\n\n# Skill: Complete Concept Workflow\n\nUse 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:\n\n1. **Resource Curation** — Find quality learning resources\n2. **Concept Writing** — Write the documentation page\n3. **Test Writing** — Create tests for code examples\n4. **Fact Checking** — Verify technical accuracy\n5. **SEO Review** — Optimize for search visibility\n\n## When to Use\n\n- Creating a brand new concept page from scratch\n- Completely rewriting an existing concept page\n- When you want a full end-to-end workflow with all quality checks\n\n**For partial tasks, use individual skills instead:**\n- Just adding resources? Use `resource-curator`\n- Just writing content? Use `write-concept`\n- Just adding tests? Use `test-writer`\n- Just verifying accuracy? Use `fact-check`\n- Just optimizing SEO? Use `seo-review`\n\n---\n\n## Workflow Overview\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│ COMPLETE CONCEPT WORKFLOW │\n├─────────────────────────────────────────────────────────────────────────────┤\n│ │\n│ INPUT: Concept name (e.g., \"hoisting\", \"event-loop\", \"promises\") │\n│ │\n│ ┌──────────────────┐ │\n│ │ PHASE 1: RESEARCH │ │\n│ │ resource-curator │ Find MDN refs, articles, videos │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 2: WRITE │ │\n│ │ write-concept │ Create the documentation page │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 3: TEST │ │\n│ │ test-writer │ Generate tests for all code examples │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 4: VERIFY │ │\n│ │ fact-check │ Verify accuracy, run tests, check links │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ ┌──────────────────┐ │\n│ │ PHASE 5: OPTIMIZE│ │\n│ │ seo-review │ SEO audit and final optimizations │\n│ └────────┬─────────┘ │\n│ ▼ │\n│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │\n│ │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Phase 1: Resource Curation\n\n**Skill:** `resource-curator`\n**Goal:** Gather high-quality external resources before writing\n\n### What to Do\n\n1. **Identify the concept category** (fundamentals, async, OOP, etc.)\n2. **Search for MDN references** — Official documentation\n3. **Find quality articles** — Target 4-6 from trusted sources\n4. **Find quality videos** — Target 3-4 from trusted creators\n5. **Evaluate each resource** — Check quality criteria\n6. **Write specific descriptions** — 2 sentences each\n7. **Format as Card components** — Ready to paste into the page\n\n### Deliverables\n\n- List of 2-4 MDN/reference links with descriptions\n- List of 4-6 article links with descriptions\n- List of 3-4 video links with descriptions\n- Optional: 1-2 courses or books\n\n### Quality Gates\n\nBefore moving to Phase 2:\n- [ ] All links verified working (200 response)\n- [ ] All resources are JavaScript-focused\n- [ ] Descriptions are specific, not generic\n- [ ] Mix of beginner and advanced content\n\n---\n\n## Phase 2: Concept Writing\n\n**Skill:** `write-concept`\n**Goal:** Create the full documentation page\n\n### What to Do\n\n1. **Determine the category** for file organization\n2. **Create the frontmatter** (title, sidebarTitle, description)\n3. **Write the opening hook** — Question that draws readers in\n4. **Add opening code example** — Simple example in first 200 words\n5. **Write \"What you'll learn\" box** — 5-7 bullet points\n6. **Write main content sections:**\n - What is [concept]? (with 40-60 word definition for featured snippet)\n - Real-world analogy\n - How it works (with diagrams)\n - Code examples (multiple, progressive complexity)\n - Common mistakes\n - Edge cases\n7. **Add Key Takeaways** — 8-10 numbered points\n8. **Add Test Your Knowledge** — 5-6 Q&A accordions\n9. **Add Related Concepts** — 4 Cards linking to related topics\n10. **Add Resources** — Paste resources from Phase 1\n\n### Deliverables\n\n- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`\n- File added to `docs.json` navigation (if new)\n\n### Quality Gates\n\nBefore moving to Phase 3:\n- [ ] Frontmatter complete (title, sidebarTitle, description)\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] All required sections present\n- [ ] Resources section complete\n- [ ] 1,500+ words\n\n---\n\n## Phase 3: Test Writing\n\n**Skill:** `test-writer`\n**Goal:** Create comprehensive tests for all code examples\n\n### What to Do\n\n1. **Scan the concept page** for all code examples\n2. **Categorize examples:**\n - Testable (console.log, return values)\n - DOM-specific (needs jsdom)\n - Error examples (toThrow)\n - Conceptual (skip)\n3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`\n4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`\n5. **Write tests** for each code example with source line references\n6. **Run tests** to verify all pass\n\n### Deliverables\n\n- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`\n- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`\n- All tests passing\n\n### Quality Gates\n\nBefore moving to Phase 4:\n- [ ] All testable code examples have tests\n- [ ] Source line references in comments\n- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] DOM tests in separate file with jsdom directive\n\n---\n\n## Phase 4: Fact Checking\n\n**Skill:** `fact-check`\n**Goal:** Verify technical accuracy of all content\n\n### What to Do\n\n1. **Verify code examples:**\n - Run tests: `npm test -- tests/{category}/{concept}/`\n - Check any untested examples manually\n - Verify output comments match actual outputs\n\n2. **Verify MDN/spec claims:**\n - Click all MDN links — verify they work\n - Compare API descriptions to MDN\n - Check ECMAScript spec for nuanced claims\n\n3. **Verify external resources:**\n - Check all article/video links work\n - Skim content for accuracy\n - Verify descriptions match content\n\n4. **Audit technical claims:**\n - Look for \"always/never\" statements\n - Verify performance claims\n - Check for common misconceptions\n\n5. **Generate fact-check report**\n\n### Deliverables\n\n- Fact-check report documenting:\n - Code verification results\n - Link check results\n - Any issues found and fixes made\n\n### Quality Gates\n\nBefore moving to Phase 5:\n- [ ] All tests passing\n- [ ] All MDN links valid\n- [ ] All external resources accessible\n- [ ] No technical inaccuracies found\n- [ ] No common misconceptions\n\n---\n\n## Phase 5: SEO Review\n\n**Skill:** `seo-review`\n**Goal:** Optimize for search visibility\n\n### What to Do\n\n1. **Audit title tag:**\n - 50-60 characters\n - Primary keyword in first half\n - Ends with \"in JavaScript\"\n - Contains compelling hook\n\n2. **Audit meta description:**\n - 150-160 characters\n - Starts with action word (Learn, Understand, Discover)\n - Contains primary keyword\n - Promises specific value\n\n3. **Audit keyword placement:**\n - Keyword in title\n - Keyword in description\n - Keyword in first 100 words\n - Keyword in at least one H2\n\n4. **Audit content structure:**\n - Question hook opening\n - Code in first 200 words\n - \"What you'll learn\" box\n - Short paragraphs\n\n5. **Audit featured snippet optimization:**\n - 40-60 word definition after \"What is\" H2\n - Question-format H2s\n - Numbered steps for how-to content\n\n6. **Audit internal linking:**\n - 3-5 related concepts linked\n - Descriptive anchor text\n - Related Concepts section complete\n\n7. **Calculate score** and fix any issues\n\n### Deliverables\n\n- SEO audit report with score (X/27)\n- All high-priority fixes implemented\n\n### Quality Gates\n\nBefore marking complete:\n- [ ] Score 24+ out of 27 (90%+)\n- [ ] Title optimized\n- [ ] Meta description optimized\n- [ ] Keywords placed naturally\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n---\n\n## Complete Workflow Checklist\n\nUse this master checklist to track progress through all phases.\n\n```markdown\n# Concept Workflow: [Concept Name]\n\n**Started:** YYYY-MM-DD\n**Target Category:** {category}\n**File Path:** `/docs/concepts/{concept-name}.mdx`\n**Test Path:** `/tests/{category}/{concept-name}/`\n\n---\n\n## Phase 1: Resource Curation\n- [ ] MDN references found (2-4)\n- [ ] Articles found (4-6)\n- [ ] Videos found (3-4)\n- [ ] All links verified working\n- [ ] Descriptions written (specific, 2 sentences)\n- [ ] Resources formatted as Cards\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 2: Concept Writing\n- [ ] Frontmatter complete\n- [ ] Opening hook written\n- [ ] Opening code example added\n- [ ] \"What you'll learn\" box added\n- [ ] Main content sections written\n- [ ] Key Takeaways added\n- [ ] Test Your Knowledge added\n- [ ] Related Concepts added\n- [ ] Resources pasted from Phase 1\n- [ ] Added to docs.json (if new)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 3: Test Writing\n- [ ] Code examples extracted and categorized\n- [ ] Test file created\n- [ ] DOM test file created (if needed)\n- [ ] All testable examples have tests\n- [ ] Source line references added\n- [ ] Tests run and passing\n\n**Test Results:** X passing, X failing\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 4: Fact Checking\n- [ ] All tests passing\n- [ ] Code examples verified accurate\n- [ ] MDN links checked (X/X valid)\n- [ ] External resources checked (X/X valid)\n- [ ] Technical claims audited\n- [ ] No misconceptions found\n- [ ] Issues fixed\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Phase 5: SEO Review\n- [ ] Title tag optimized (50-60 chars)\n- [ ] Meta description optimized (150-160 chars)\n- [ ] Keywords placed correctly\n- [ ] Content structure verified\n- [ ] Featured snippet optimized\n- [ ] Internal links complete\n\n**SEO Score:** X/27 (X%)\n\n**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete\n\n---\n\n## Final Status\n\n**All Phases Complete:** ⬜ No | ✅ Yes\n**Ready to Publish:** ⬜ No | ✅ Yes\n**Completed:** YYYY-MM-DD\n```\n\n---\n\n## Execution Instructions\n\nWhen executing this workflow, follow these steps:\n\n### Step 1: Initialize\n\n```markdown\nStarting concept workflow for: [CONCEPT NAME]\n\nCategory: [fundamentals/functions-execution/web-platform/etc.]\nFile: /docs/concepts/[concept-name].mdx\nTests: /tests/[category]/[concept-name]/\n```\n\n### Step 2: Execute Each Phase\n\nFor each phase:\n\n1. **Announce the phase:**\n ```markdown\n ## Phase X: [Phase Name]\n Using skill: [skill-name]\n ```\n\n2. **Load the skill** to get detailed instructions\n\n3. **Execute the phase** following the skill's methodology\n\n4. **Report completion:**\n ```markdown\n Phase X complete:\n - [Deliverable 1]\n - [Deliverable 2]\n - Quality gates: ✅ All passed\n ```\n\n5. **Move to next phase** only after quality gates pass\n\n### Step 3: Final Report\n\nAfter all phases complete:\n\n```markdown\n# Workflow Complete: [Concept Name]\n\n## Summary\n- **Concept Page:** `/docs/concepts/[concept-name].mdx`\n- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`\n- **Word Count:** X,XXX words\n- **Code Examples:** XX (XX tested)\n- **Resources:** X MDN, X articles, X videos\n\n## Quality Metrics\n- **Tests:** XX passing\n- **Fact Check:** ✅ All verified\n- **SEO Score:** XX/27 (XX%)\n\n## Files Created/Modified\n1. `/docs/concepts/[concept-name].mdx` (created)\n2. `/docs/docs.json` (updated navigation)\n3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)\n\n## Ready to Publish: ✅ Yes\n```\n\n---\n\n## Phase Dependencies\n\nSome phases can be partially parallelized, but the general flow should be:\n\n```\nPhase 1 (Resources) ──┐\n ├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐\n │ │\n │ ┌───────────────────────────────────┘\n │ ▼\n └──► Phase 4 (Fact Check) ──► Phase 5 (SEO)\n```\n\n- **Phase 1 before Phase 2:** Resources inform what to write\n- **Phase 2 before Phase 3:** Need content before writing tests\n- **Phase 3 before Phase 4:** Tests are part of fact-checking\n- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish\n\n---\n\n## Skill Reference\n\n| Phase | Skill | Purpose |\n|-------|-------|---------|\n| 1 | `resource-curator` | Find and evaluate external resources |\n| 2 | `write-concept` | Write the documentation page |\n| 3 | `test-writer` | Generate tests for code examples |\n| 4 | `fact-check` | Verify technical accuracy |\n| 5 | `seo-review` | Optimize for search visibility |\n\nEach skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.\n\n---\n\n## Time Estimates\n\n| Phase | Estimated Time | Notes |\n|-------|---------------|-------|\n| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |\n| Phase 2: Writing | 1-3 hours | Depends on concept complexity |\n| Phase 3: Tests | 30-60 min | Depends on number of code examples |\n| Phase 4: Fact Check | 15-30 min | Most automated via tests |\n| Phase 5: SEO | 15-30 min | Mostly checklist verification |\n| **Total** | **2-5 hours** | For a complete concept page |\n\n---\n\n## Quick Start\n\nTo start the workflow for a new concept:\n\n```\n1. Determine the concept name and category\n2. Load this skill (concept-workflow)\n3. Execute Phase 1: Load resource-curator, find resources\n4. Execute Phase 2: Load write-concept, write the page\n5. Execute Phase 3: Load test-writer, create tests\n6. Execute Phase 4: Load fact-check, verify accuracy\n7. Execute Phase 5: Load seo-review, optimize SEO\n8. Generate final report\n9. Commit changes\n```\n\n**Example prompt to start:**\n\n> \"Create a complete concept page for 'hoisting' using the concept-workflow skill\"\n\nThis will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.\n\n<!-- File: .opencode/skill/fact-check/SKILL.md (Tokens: ~4800 | Category: anthropic-skill) -->\n---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation\n---\n\n# Skill: JavaScript Fact Checker\n\nUse this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.\n\n## When to Use\n\n- Before publishing a new concept page\n- After significant edits to existing content\n- When reviewing community contributions\n- When updating pages with new JavaScript features\n- Periodic accuracy audits of existing content\n\n## What We're Protecting Against\n\n- Incorrect JavaScript behavior claims\n- Outdated information (pre-ES6 patterns presented as current)\n- Code examples that don't produce stated outputs\n- Broken or misleading external resource links\n- Common misconceptions stated as fact\n- Browser-specific behavior presented as universal\n- Inaccurate API descriptions\n\n---\n\n## Fact-Checking Methodology\n\nFollow these five phases in order for a complete fact check.\n\n### Phase 1: Code Example Verification\n\nEvery code example in the concept page must be verified for accuracy.\n\n#### Step-by-Step Process\n\n1. **Identify all code blocks** in the document\n2. **For each code block:**\n - Read the code and any output comments (e.g., `// \"string\"`)\n - Mentally execute the code or test in a JavaScript environment\n - Verify the output matches what's stated in comments\n - Check that variable names and logic are correct\n\n3. **For \"wrong\" examples (marked with ❌):**\n - Verify they actually produce the wrong/unexpected behavior\n - Confirm the explanation of why it's wrong is accurate\n\n4. **For \"correct\" examples (marked with ✓):**\n - Verify they work as stated\n - Confirm they follow current best practices\n\n5. **Run project tests:**\n ```bash\n # Run all tests\n npm test\n \n # Run tests for a specific concept\n npm test -- tests/fundamentals/call-stack/\n npm test -- tests/fundamentals/primitive-types/\n ```\n\n6. **Check test coverage:**\n - Look in `/tests/{category}/{concept-name}/`\n - Verify tests exist for major code examples\n - Flag examples without test coverage\n\n#### Code Verification Checklist\n\n| Check | How to Verify |\n|-------|---------------|\n| `console.log` outputs match comments | Run code or trace mentally |\n| Variables are correctly named/used | Read through logic |\n| Functions return expected values | Trace execution |\n| Async code resolves in stated order | Understand event loop |\n| Error examples actually throw | Test in try/catch |\n| Array/object methods return correct types | Check MDN |\n| `typeof` results are accurate | Test common cases |\n| Strict mode behavior noted if relevant | Check if example depends on it |\n\n#### Common Output Mistakes to Catch\n\n```javascript\n// Watch for these common mistakes:\n\n// 1. typeof null\ntypeof null // \"object\" (not \"null\"!)\n\n// 2. Array methods that return new arrays vs mutate\nconst arr = [1, 2, 3]\narr.push(4) // Returns 4 (length), not the array!\narr.map(x => x*2) // Returns NEW array, doesn't mutate\n\n// 3. Promise resolution order\nPromise.resolve().then(() => console.log('micro'))\nsetTimeout(() => console.log('macro'), 0)\nconsole.log('sync')\n// Output: sync, micro, macro (NOT sync, macro, micro)\n\n// 4. Comparison results\n[] == false // true\n[] === false // false\n![] // false (empty array is truthy!)\n\n// 5. this binding\nconst obj = {\n name: 'Alice',\n greet: () => console.log(this.name) // undefined! Arrow has no this\n}\n```\n\n---\n\n### Phase 2: MDN Documentation Verification\n\nAll claims about JavaScript APIs, methods, and behavior should align with MDN documentation.\n\n#### Step-by-Step Process\n\n1. **Check all MDN links:**\n - Click each MDN link in the document\n - Verify the link returns 200 (not 404)\n - Confirm the linked page matches what's being referenced\n\n2. **Verify API descriptions:**\n - Compare method signatures with MDN\n - Check parameter names and types\n - Verify return types\n - Confirm edge case behavior\n\n3. **Check for deprecated APIs:**\n - Look for deprecation warnings on MDN\n - Flag any deprecated methods being taught as current\n\n4. **Verify browser compatibility claims:**\n - Cross-reference with MDN compatibility tables\n - Check Can I Use for broader support data\n\n#### MDN Link Patterns\n\n| Content Type | MDN URL Pattern |\n|--------------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |\n| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n\n#### What to Verify Against MDN\n\n| Claim Type | What to Check |\n|------------|---------------|\n| Method signature | Parameters, optional params, return type |\n| Return value | Exact type and possible values |\n| Side effects | Does it mutate? What does it affect? |\n| Exceptions | What errors can it throw? |\n| Browser support | Compatibility tables |\n| Deprecation status | Any deprecation warnings? |\n\n---\n\n### Phase 3: ECMAScript Specification Compliance\n\nFor nuanced JavaScript behavior, verify against the ECMAScript specification.\n\n#### When to Check the Spec\n\n- Edge cases and unusual behavior\n- Claims about \"how JavaScript works internally\"\n- Type coercion rules\n- Operator precedence\n- Execution order guarantees\n- Claims using words like \"always\", \"never\", \"guaranteed\"\n\n#### How to Navigate the Spec\n\nThe ECMAScript specification is at: https://tc39.es/ecma262/\n\n| Concept | Spec Section |\n|---------|--------------|\n| Type coercion | Abstract Operations (7.1) |\n| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |\n| typeof | The typeof Operator (13.5.3) |\n| Objects | Ordinary and Exotic Objects' Behaviours (10) |\n| Functions | ECMAScript Function Objects (10.2) |\n| this binding | ResolveThisBinding (9.4.4) |\n| Promises | Promise Objects (27.2) |\n| Iteration | Iteration (27.1) |\n\n#### Spec Verification Examples\n\n```javascript\n// Claim: \"typeof null returns 'object' due to a bug\"\n// Spec says: typeof null → \"object\" (Table 41)\n// Historical context: This is a known quirk from JS 1.0\n// Verdict: ✓ Correct, though calling it a \"bug\" is slightly informal\n\n// Claim: \"Promises always resolve asynchronously\"\n// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)\n// Verdict: ✓ Correct - even resolved promises schedule microtasks\n\n// Claim: \"=== is faster than ==\"\n// Spec says: Nothing about performance\n// Verdict: ⚠️ Needs nuance - this is implementation-dependent\n```\n\n---\n\n### Phase 4: External Resource Verification\n\nAll external links (articles, videos, courses) must be verified.\n\n#### Step-by-Step Process\n\n1. **Check link accessibility:**\n - Click each external link\n - Verify it loads (not 404, not paywalled)\n - Note any redirects to different URLs\n\n2. **Verify content accuracy:**\n - Skim the resource for obvious errors\n - Check it's JavaScript-focused (not C#, Python, Java)\n - Verify it's not teaching anti-patterns\n\n3. **Check publication date:**\n - For time-sensitive topics (async, modules, etc.), prefer recent content\n - Flag resources from before 2015 for ES6+ topics\n\n4. **Verify description accuracy:**\n - Does our description match what the resource actually covers?\n - Is the description specific (not generic)?\n\n#### External Resource Checklist\n\n| Check | Pass Criteria |\n|-------|---------------|\n| Link works | Returns 200, content loads |\n| Not paywalled | Free to access (or clearly marked) |\n| JavaScript-focused | Not primarily about other languages |\n| Not outdated | Post-2015 for modern JS topics |\n| Accurate description | Our description matches actual content |\n| No anti-patterns | Doesn't teach bad practices |\n| Reputable source | From known/trusted creators |\n\n#### Red Flags in External Resources\n\n- Uses `var` everywhere for ES6+ topics\n- Uses callbacks for content about Promises/async\n- Teaches jQuery as modern DOM manipulation\n- Contains factual errors about JavaScript\n- Video is >2 hours without timestamp links\n- Content is primarily about another language\n- Uses deprecated APIs without noting deprecation\n\n---\n\n### Phase 5: Technical Claims Audit\n\nReview all prose claims about JavaScript behavior.\n\n#### Claims That Need Verification\n\n| Claim Type | How to Verify |\n|------------|---------------|\n| Performance claims | Need benchmarks or caveats |\n| Browser behavior | Specify which browsers, check MDN |\n| Historical claims | Verify dates/versions |\n| \"Always\" or \"never\" statements | Check for exceptions |\n| Comparisons (X vs Y) | Verify both sides accurately |\n\n#### Red Flags in Technical Claims\n\n- \"Always\" or \"never\" without exceptions noted\n- Performance claims without benchmarks\n- Browser behavior claims without specifying browsers\n- Comparisons that oversimplify differences\n- Historical claims without dates\n- Claims about \"how JavaScript works\" without spec reference\n\n#### Examples of Claims to Verify\n\n```markdown\n❌ \"async/await is always better than Promises\"\n→ Verify: Not always - Promise.all() is better for parallel operations\n\n❌ \"JavaScript is an interpreted language\"\n→ Verify: Modern JS engines use JIT compilation\n\n❌ \"Objects are passed by reference\"\n→ Verify: Technically \"passed by sharing\" - the reference is passed by value\n\n❌ \"=== is faster than ==\"\n→ Verify: Implementation-dependent, not guaranteed by spec\n\n✓ \"JavaScript is single-threaded\"\n→ Verify: Correct for the main thread (Web Workers are separate)\n\n✓ \"Promises always resolve asynchronously\"\n→ Verify: Correct per ECMAScript spec\n```\n\n---\n\n## Common JavaScript Misconceptions\n\nWatch for these misconceptions being stated as fact.\n\n### Type System Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `typeof null === \"object\"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |\n| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |\n| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |\n| `NaN === NaN` is false \"by mistake\" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |\n\n### Function Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |\n| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |\n| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |\n| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |\n\n### Async Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |\n| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |\n| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |\n| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |\n\n### Object Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| Objects are \"passed by reference\" | References are passed by value (\"pass by sharing\") | Reassignment test |\n| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |\n| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |\n| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |\n\n### Performance Misconceptions\n\n| Misconception | Reality | How to Verify |\n|---------------|---------|---------------|\n| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |\n| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |\n| Arrow functions are faster | No performance difference, just different behavior | Benchmark |\n| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |\n\n---\n\n## Test Integration\n\nRunning the project's test suite is a key part of fact-checking.\n\n### Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/call-stack/\nnpm test -- tests/fundamentals/primitive-types/\nnpm test -- tests/fundamentals/value-reference-types/\nnpm test -- tests/fundamentals/type-coercion/\nnpm test -- tests/fundamentals/equality-operators/\nnpm test -- tests/fundamentals/scope-and-closures/\n```\n\n### Test Directory Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n│ ├── call-stack/\n│ ├── primitive-types/\n│ ├── value-reference-types/\n│ ├── type-coercion/\n│ ├── equality-operators/\n│ └── scope-and-closures/\n├── functions-execution/ # Concepts 7-8\n│ ├── event-loop/\n│ └── iife-modules/\n└── web-platform/ # Concepts 9-10\n ├── dom/\n └── http-fetch/\n```\n\n### When Tests Are Missing\n\nIf a concept doesn't have tests:\n1. Flag this in the report as \"needs test coverage\"\n2. Manually verify code examples are correct\n3. Consider adding tests as a follow-up task\n\n---\n\n## Verification Resources\n\n### Primary Sources\n\n| Resource | URL | Use For |\n|----------|-----|---------|\n| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |\n| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |\n| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |\n| Can I Use | https://caniuse.com | Browser compatibility |\n| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |\n| V8 Blog | https://v8.dev/blog | Engine internals |\n\n### Project Resources\n\n| Resource | Path | Use For |\n|----------|------|---------|\n| Test Suite | `/tests/` | Verify code examples |\n| Concept Pages | `/docs/concepts/` | Current content |\n| Run Tests | `npm test` | Execute all tests |\n\n---\n\n## Fact Check Report Template\n\nUse this template to document your findings.\n\n```markdown\n# Fact Check Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Reviewer:** [Name/Claude]\n**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues\n\n---\n\n## Executive Summary\n\n[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]\n\n**Tests Run:** Yes/No\n**Test Results:** X passing, Y failing\n**External Links Checked:** X/Y valid\n\n---\n\n## Phase 1: Code Example Verification\n\n| # | Description | Line | Status | Notes |\n|---|-------------|------|--------|-------|\n| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |\n\n### Code Issues Found\n\n#### Issue 1: [Title]\n\n**Location:** Line XX\n**Severity:** Critical/Major/Minor\n**Current Code:**\n```javascript\n// The problematic code\n```\n**Problem:** [Explanation of what's wrong]\n**Correct Code:**\n```javascript\n// The corrected code\n```\n\n---\n\n## Phase 2: MDN/Specification Verification\n\n| Claim | Location | Source | Status | Notes |\n|-------|----------|--------|--------|-------|\n| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |\n\n### MDN Link Status\n\n| Link Text | URL | Status |\n|-----------|-----|--------|\n| [Text] | [URL] | ✅ 200 / ❌ 404 |\n\n### Specification Discrepancies\n\n[If any claims don't match the ECMAScript spec, detail them here]\n\n---\n\n## Phase 3: External Resource Verification\n\n| Resource | Type | Link | Content | Notes |\n|----------|------|------|---------|-------|\n| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |\n\n### Broken Links\n\n1. **Line XX:** [URL] - 404 Not Found\n2. **Line YY:** [URL] - Domain expired\n\n### Content Concerns\n\n1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]\n\n### Description Accuracy\n\n| Resource | Description Accurate? | Notes |\n|----------|----------------------|-------|\n| [Title] | ✅/❌ | [Notes] |\n\n---\n\n## Phase 4: Technical Claims Audit\n\n| Claim | Location | Verdict | Notes |\n|-------|----------|---------|-------|\n| \"[Claim]\" | Line XX | ✅/⚠️/❌ | [Notes] |\n\n### Claims Needing Revision\n\n1. **Line XX:** \"[Current claim]\"\n - **Issue:** [What's wrong]\n - **Suggested:** \"[Revised claim]\"\n\n---\n\n## Phase 5: Test Results\n\n**Test File:** `/tests/[category]/[concept]/[concept].test.js`\n**Tests Run:** XX\n**Passing:** XX\n**Failing:** XX\n\n### Failing Tests\n\n| Test Name | Expected | Actual | Related Doc Line |\n|-----------|----------|--------|------------------|\n| [Test] | [Expected] | [Actual] | Line XX |\n\n### Coverage Gaps\n\nExamples in documentation without corresponding tests:\n- [ ] Line XX: [Description of untested example]\n- [ ] Line YY: [Description of untested example]\n\n---\n\n## Issues Summary\n\n### Critical (Must Fix Before Publishing)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Major (Should Fix)\n\n1. **[Issue title]**\n - Location: Line XX\n - Problem: [Description]\n - Fix: [How to fix]\n\n### Minor (Nice to Have)\n\n1. **[Issue title]**\n - Location: Line XX\n - Suggestion: [Improvement]\n\n---\n\n## Recommendations\n\n1. **[Priority 1]:** [Specific actionable recommendation]\n2. **[Priority 2]:** [Specific actionable recommendation]\n3. **[Priority 3]:** [Specific actionable recommendation]\n\n---\n\n## Verification Checklist\n\n- [ ] All code examples verified for correct output\n- [ ] All MDN links checked and valid\n- [ ] API descriptions match MDN documentation\n- [ ] ECMAScript compliance verified (if applicable)\n- [ ] All external resource links accessible\n- [ ] Resource descriptions accurately represent content\n- [ ] No common JavaScript misconceptions found\n- [ ] Technical claims are accurate and nuanced\n- [ ] Project tests run and reviewed\n- [ ] Report complete and ready for handoff\n\n---\n\n## Sign-off\n\n**Verified by:** [Name/Claude]\n**Date:** YYYY-MM-DD\n**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed\n```\n\n---\n\n## Quick Reference: Verification Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run specific concept tests\nnpm test -- tests/fundamentals/call-stack/\n\n# Check for broken links (if you have a link checker)\n# Install: npm install -g broken-link-checker\n# Run: blc https://developer.mozilla.org/... -ro\n\n# Quick JavaScript REPL for testing\nnode\n> typeof null\n'object'\n> [1,2,3].map(x => x * 2)\n[ 2, 4, 6 ]\n```\n\n---\n\n## Summary\n\nWhen fact-checking a concept page:\n\n1. **Run tests first** — `npm test` catches code errors automatically\n2. **Verify every code example** — Output comments must match reality\n3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility\n4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused\n5. **Audit technical claims** — Watch for misconceptions and unsupported statements\n6. **Document everything** — Use the report template for consistent, thorough reviews\n\n**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.\n\n<!-- File: .opencode/skill/resource-curator/SKILL.md (Tokens: ~4941 | Category: anthropic-skill) -->\n---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links\n---\n\n# Skill: Resource Curator for Concept Pages\n\nUse this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.\n\n## When to Use\n\n- Adding resources to a new concept page\n- Refreshing resources on existing pages\n- Auditing for broken or outdated links\n- Reviewing community-contributed resources\n- Periodic link maintenance\n\n## Resource Curation Methodology\n\nFollow these five phases for comprehensive resource curation.\n\n### Phase 1: Audit Existing Resources\n\nBefore adding new resources, audit what's already there:\n\n1. **Check link accessibility** — Does each link return 200?\n2. **Verify content accuracy** — Is the content still correct?\n3. **Check publication dates** — Is it too old for the topic?\n4. **Identify outdated content** — Does it use old syntax/patterns?\n5. **Review descriptions** — Are they specific or generic?\n\n### Phase 2: Identify Resource Gaps\n\nCompare current resources against targets:\n\n| Section | Target Count | Icon |\n|---------|--------------|------|\n| Reference | 2-4 MDN links | `book` |\n| Articles | 4-6 articles | `newspaper` |\n| Videos | 3-4 videos | `video` |\n| Courses | 1-3 (optional) | `graduation-cap` |\n| Books | 1-2 (optional) | `book` |\n\nAsk:\n- Are there enough resources for beginners AND advanced learners?\n- Is there visual content (diagrams, animations)?\n- Are official references (MDN) included?\n- Is there diversity in teaching styles?\n\n### Phase 3: Find New Resources\n\nSearch trusted sources using targeted queries:\n\n**For Articles:**\n```\n[concept] javascript tutorial site:javascript.info\n[concept] javascript explained site:freecodecamp.org\n[concept] javascript site:dev.to\n[concept] javascript deep dive site:2ality.com\n[concept] javascript guide site:css-tricks.com\n```\n\n**For Videos:**\n```\nYouTube: [concept] javascript explained\nYouTube: [concept] javascript tutorial\nYouTube: jsconf [concept]\nYouTube: [concept] javascript fireship\nYouTube: [concept] javascript web dev simplified\n```\n\n**For MDN:**\n```\n[concept] site:developer.mozilla.org\n[API name] MDN\n```\n\n### Phase 4: Write Descriptions\n\nEvery resource needs a specific, valuable description:\n\n**Formula:**\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Phase 5: Format and Organize\n\n- Use correct Card syntax with proper icons\n- Order resources logically (foundational first, advanced later)\n- Ensure consistent formatting\n\n---\n\n## Trusted Sources\n\n### Reference Sources (Priority Order)\n\n| Priority | Source | URL | Best For |\n|----------|--------|-----|----------|\n| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |\n| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |\n| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |\n| 4 | Web.dev | web.dev | Performance, best practices |\n| 5 | Can I Use | caniuse.com | Browser compatibility |\n\n### Article Sources (Priority Order)\n\n| Priority | Source | Why Trusted |\n|----------|--------|-------------|\n| 1 | javascript.info | Comprehensive, exercises, well-maintained |\n| 2 | MDN Guides | Official, accurate, regularly updated |\n| 3 | freeCodeCamp | Beginner-friendly, practical |\n| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |\n| 5 | CSS-Tricks | DOM, visual topics, well-written |\n| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |\n| 7 | LogRocket Blog | Practical tutorials, real-world |\n| 8 | Smashing Magazine | In-depth, well-researched |\n| 9 | Digital Ocean | Clear tutorials, examples |\n| 10 | Kent C. Dodds | Testing, React, best practices |\n\n### Video Creators (Priority Order)\n\n| Priority | Creator | Style | Best For |\n|----------|---------|-------|----------|\n| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |\n| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |\n| 3 | Fun Fun Function | Deep-dives, personality | Understanding \"why\" |\n| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |\n| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |\n| 6 | Academind | Thorough explanations | Complete understanding |\n| 7 | The Coding Train | Creative, visual | Visual learners |\n| 8 | Wes Bos | Practical, real-world | Applied learning |\n| 9 | The Net Ninja | Step-by-step tutorials | Following along |\n| 10 | Programming with Mosh | Professional, clear | Career-focused |\n\n### Course Sources\n\n| Source | Type | Notes |\n|--------|------|-------|\n| javascript.info | Free | Comprehensive, exercises |\n| Piccalilli | Free | Well-written, modern |\n| freeCodeCamp | Free | Project-based |\n| Frontend Masters | Paid | Expert instructors |\n| Egghead.io | Paid | Short, focused lessons |\n| Udemy (top-rated) | Paid | Check reviews carefully |\n| Codecademy | Freemium | Interactive |\n\n---\n\n## Quality Criteria\n\n### Must Have (Required)\n\n- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)\n- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.\n- [ ] **Technically accurate** — No factual errors or anti-patterns\n- [ ] **Accessible** — Free or has meaningful free preview\n\n### Should Have (Preferred)\n\n- [ ] **Recent enough** — See publication date guidelines below\n- [ ] **Reputable source** — From trusted sources list or well-known creator\n- [ ] **Unique perspective** — Not duplicate of existing resources\n- [ ] **Appropriate depth** — Matches concept complexity\n- [ ] **Good engagement** — Positive comments, high views (for videos)\n\n### Red Flags (Reject)\n\n| Red Flag | Why It Matters |\n|----------|----------------|\n| Uses `var` everywhere | Outdated for ES6+ topics |\n| Teaches anti-patterns | Harmful to learners |\n| Primarily other languages | Wrong focus |\n| Hard paywall (no preview) | Inaccessible |\n| Pre-2015 for modern topics | Likely outdated |\n| Low quality comments | Often indicates issues |\n| Factual errors | Spreads misinformation |\n| Clickbait title, thin content | Wastes reader time |\n\n---\n\n## Publication Date Guidelines\n\n| Topic Category | Minimum Year | Reasoning |\n|----------------|--------------|-----------|\n| **ES6+ Features** | 2015+ | ES6 released June 2015 |\n| **Promises** | 2015+ | Native Promises in ES6 |\n| **async/await** | 2017+ | ES2017 feature |\n| **ES Modules** | 2018+ | Stable browser support |\n| **Optional chaining (?.)** | 2020+ | ES2020 feature |\n| **Nullish coalescing (??)** | 2020+ | ES2020 feature |\n| **Top-level await** | 2022+ | ES2022 feature |\n| **Fundamentals** (closures, scope, this) | Any | Core concepts don't change |\n| **DOM manipulation** | 2018+ | Modern APIs preferred |\n| **Fetch API** | 2017+ | Widespread support |\n\n**Rule of thumb:** For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.\n\n---\n\n## Description Writing Guide\n\n### The Formula\n\n```\nSentence 1: What makes this resource unique OR what it specifically covers\nSentence 2: Why reader should click (what they'll gain, who it's best for)\n```\n\n### Good Examples\n\n```markdown\n<Card title=\"JavaScript Visualized: Promises & Async/Await — Lydia Hallie\" icon=\"newspaper\" href=\"https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. \n The visuals make Promise execution order finally click for visual learners.\n</Card>\n\n<Card title=\"What the heck is the event loop anyway? — Philip Roberts\" icon=\"video\" href=\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\">\n The legendary JSConf talk that made the event loop click for millions of developers. \n Philip Roberts' live visualizations are the gold standard — a must-watch.\n</Card>\n\n<Card title=\"You Don't Know JS: Scope & Closures — Kyle Simpson\" icon=\"book\" href=\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md\">\n Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. \n Goes beyond the basics into edge cases and mental models for truly understanding scope.\n</Card>\n\n<Card title=\"JavaScript Promises in 10 Minutes — Web Dev Simplified\" icon=\"video\" href=\"https://www.youtube.com/watch?v=DHvZLI7Db8E\">\n Quick, clear explanation covering Promise creation, chaining, and error handling. \n Perfect starting point if you're new to async JavaScript.\n</Card>\n\n<Card title=\"How to Escape Async/Await Hell — Aditya Agarwal\" icon=\"newspaper\" href=\"https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c\">\n The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. \n Essential reading once you know async/await basics but want to write faster code.\n</Card>\n```\n\n### Bad Examples (Avoid)\n\n```markdown\n<!-- TOO GENERIC -->\n<Card title=\"Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to Promises in JavaScript.\n</Card>\n\n<!-- NO VALUE PROPOSITION -->\n<Card title=\"Learn Closures\" icon=\"video\" href=\"...\">\n This video explains closures in JavaScript.\n</Card>\n\n<!-- VAGUE, NO SPECIFICS -->\n<Card title=\"JavaScript Guide\" icon=\"newspaper\" href=\"...\">\n Everything you need to know about JavaScript.\n</Card>\n\n<!-- JUST RESTATING THE TITLE -->\n<Card title=\"Understanding the Event Loop\" icon=\"video\" href=\"...\">\n A video about understanding the event loop.\n</Card>\n```\n\n### Words and Phrases to Avoid\n\n| Avoid | Why | Use Instead |\n|-------|-----|-------------|\n| \"comprehensive guide to...\" | Vague, overused | Specify what's covered |\n| \"learn all about...\" | Generic | What specifically will they learn? |\n| \"everything you need to know...\" | Hyperbolic | Be specific |\n| \"great tutorial on...\" | Subjective filler | Why is it great? |\n| \"explains X\" | Too basic | How does it explain? What's unique? |\n| \"in-depth look at...\" | Vague | What depth? What aspect? |\n\n### Words and Phrases That Work\n\n| Good Phrase | Example |\n|-------------|---------|\n| \"step-by-step walkthrough\" | \"Step-by-step walkthrough of building a Promise from scratch\" |\n| \"visual explanation\" | \"Visual explanation with animated diagrams\" |\n| \"deep dive into\" | \"Deep dive into V8's optimization strategies\" |\n| \"practical examples of\" | \"Practical examples of closures in React hooks\" |\n| \"the go-to reference for\" | \"The go-to reference for array method signatures\" |\n| \"finally makes X click\" | \"Finally makes prototype chains click\" |\n| \"perfect for beginners\" | \"Perfect for beginners new to async code\" |\n| \"covers X, Y, and Z\" | \"Covers creation, chaining, and error handling\" |\n\n---\n\n## Link Audit Process\n\n### Step 1: Check Each Link\n\nFor each resource in the concept page:\n\n1. **Click the link** — Does it load?\n2. **Note the HTTP status:**\n\n| Status | Meaning | Action |\n|--------|---------|--------|\n| 200 | OK | Keep, continue to content check |\n| 301/302 | Redirect | Update to final URL |\n| 404 | Not Found | Remove or find replacement |\n| 403 | Forbidden | Check manually, may be geo-blocked |\n| 5xx | Server Error | Retry later, may be temporary |\n\n### Step 2: Content Verification\n\nFor each accessible link:\n\n1. **Skim the content** — Is it still accurate?\n2. **Check the date** — When was it published/updated?\n3. **Verify JavaScript focus** — Is it primarily about JS?\n4. **Look for red flags** — Anti-patterns, errors, outdated syntax\n\n### Step 3: Description Review\n\nFor each resource:\n\n1. **Read current description** — Is it specific?\n2. **Compare to actual content** — Does it match?\n3. **Check for generic phrases** — \"comprehensive guide\", etc.\n4. **Identify improvements** — How can it be more specific?\n\n### Step 4: Gap Analysis\n\nAfter auditing all resources:\n\n1. **Count by section** — Do we meet targets?\n2. **Check diversity** — Beginner AND advanced? Visual AND text?\n3. **Identify missing types** — No MDN? No videos?\n4. **Note recommendations** — What should we add?\n\n---\n\n## Resource Section Templates\n\n### Reference Section\n\n```markdown\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"[Main Topic] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n Official MDN documentation covering [specific aspects]. \n The authoritative reference for [what it's best for].\n </Card>\n <Card title=\"[Related API/Concept] — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/...\">\n [What this reference covers]. \n Essential reading for understanding [specific aspect].\n </Card>\n</CardGroup>\n```\n\n### Articles Section\n\n```markdown\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What makes it unique/what it covers]. \n [Why read this one/who it's for].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Specific coverage]. \n [Value proposition].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [Unique angle]. \n [Why it's worth reading].\n </Card>\n <Card title=\"[Article Title]\" icon=\"newspaper\" href=\"...\">\n [What it covers]. \n [Best for whom].\n </Card>\n</CardGroup>\n```\n\n### Videos Section\n\n```markdown\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [What it covers/unique approach]. \n [Why watch/who it's for].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Specific focus]. \n [What makes it stand out].\n </Card>\n <Card title=\"[Video Title] — [Creator]\" icon=\"video\" href=\"https://www.youtube.com/watch?v=...\">\n [Coverage]. \n [Value].\n </Card>\n</CardGroup>\n```\n\n### Books Section (Optional)\n\n```markdown\n<Card title=\"[Book Title] — [Author]\" icon=\"book\" href=\"...\">\n [What the book covers and its approach]. \n [Who should read it and what they'll gain].\n</Card>\n```\n\n### Courses Section (Optional)\n\n```markdown\n<CardGroup cols={2}>\n <Card title=\"[Course Title] — [Platform]\" icon=\"graduation-cap\" href=\"...\">\n [What the course covers]. \n [Format and who it's best for].\n </Card>\n</CardGroup>\n```\n\n---\n\n## Resource Audit Report Template\n\nUse this template to document audit findings.\n\n```markdown\n# Resource Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n\n---\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Resources | XX |\n| Working Links (200) | XX |\n| Broken Links (404) | XX |\n| Redirects (301/302) | XX |\n| Outdated Content | XX |\n| Generic Descriptions | XX |\n\n## Resource Count vs Targets\n\n| Section | Current | Target | Status |\n|---------|---------|--------|--------|\n| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |\n| Articles | X | 4-6 | ✅/⚠️/❌ |\n| Videos | X | 3-4 | ✅/⚠️/❌ |\n| Courses | X | 0-3 | ✅/⚠️/❌ |\n\n---\n\n## Broken Links (Remove or Replace)\n\n| Resource | Line | URL | Status | Action |\n|----------|------|-----|--------|--------|\n| [Title] | XX | [URL] | 404 | Remove |\n| [Title] | XX | [URL] | 404 | Replace with [alternative] |\n\n---\n\n## Redirects (Update URLs)\n\n| Resource | Line | Old URL | New URL |\n|----------|------|---------|---------|\n| [Title] | XX | [old] | [new] |\n\n---\n\n## Outdated Resources (Consider Replacing)\n\n| Resource | Line | Issue | Recommendation |\n|----------|------|-------|----------------|\n| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |\n| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |\n\n---\n\n## Description Improvements Needed\n\n| Resource | Line | Current | Suggested |\n|----------|------|---------|-----------|\n| [Title] | XX | \"A guide to closures\" | \"[Specific description with value prop]\" |\n| [Title] | XX | \"Learn about promises\" | \"[What makes it unique]. [Why read it].\" |\n\n---\n\n## Missing Resources (Recommendations)\n\n| Type | Gap | Suggested Resource | URL |\n|------|-----|-------------------|-----|\n| Reference | No main MDN link | [Topic] — MDN | [URL] |\n| Article | No beginner guide | [Title] — javascript.info | [URL] |\n| Video | No visual explanation | [Title] — [Creator] | [URL] |\n| Article | No advanced deep-dive | [Title] — 2ality | [URL] |\n\n---\n\n## Non-JavaScript Resources (Remove)\n\n| Resource | Line | Issue |\n|----------|------|-------|\n| [Title] | XX | Primarily about C#, not JavaScript |\n\n---\n\n## Action Items\n\n### High Priority (Do First)\n1. **Remove broken link:** [Title] (line XX)\n2. **Add missing MDN reference:** [Topic]\n3. **Replace outdated resource:** [Title] with [alternative]\n\n### Medium Priority\n1. **Update redirect URL:** [Title] (line XX)\n2. **Improve description:** [Title] (line XX)\n3. **Add beginner-friendly article**\n\n### Low Priority\n1. **Add additional video resource**\n2. **Consider adding course section**\n\n---\n\n## Verification Checklist\n\nAfter making changes:\n\n- [ ] All broken links removed or replaced\n- [ ] All redirect URLs updated\n- [ ] Outdated resources replaced\n- [ ] Generic descriptions rewritten\n- [ ] Missing resource types added\n- [ ] Resource counts meet targets\n- [ ] All new links verified working\n- [ ] All descriptions are specific and valuable\n```\n\n---\n\n## Quick Reference\n\n### Icon Reference\n\n| Content Type | Icon Value |\n|--------------|------------|\n| MDN/Official docs | `book` |\n| Articles/Blog posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Books | `book` |\n| Related concepts | Context-appropriate |\n\n### Character Guidelines\n\n| Element | Guideline |\n|---------|-----------|\n| Card title | Keep concise, include creator for videos |\n| Description sentence 1 | What it covers / what's unique |\n| Description sentence 2 | Why read/watch / who it's for |\n\n### Resource Ordering\n\nWithin each section, order resources:\n1. **Most foundational/beginner-friendly first**\n2. **Official references before community content**\n3. **Most highly recommended prominently placed**\n4. **Advanced/niche content last**\n\n---\n\n## Quality Checklist\n\n### Link Verification\n- [ ] All links return 200 (not 404, 301)\n- [ ] No redirect chains\n- [ ] No hard paywalls without notice\n- [ ] All URLs are HTTPS where available\n\n### Content Quality\n- [ ] All resources are JavaScript-focused\n- [ ] No resources teaching anti-patterns\n- [ ] Publication dates appropriate for topic\n- [ ] Mix of beginner and advanced content\n- [ ] Visual and text resources included\n\n### Description Quality\n- [ ] All descriptions are specific (not generic)\n- [ ] Descriptions explain unique value\n- [ ] No \"comprehensive guide to...\" phrases\n- [ ] Each description is 2 sentences\n- [ ] Descriptions match actual content\n\n### Completeness\n- [ ] 2-4 MDN/official references\n- [ ] 4-6 quality articles\n- [ ] 3-4 quality videos\n- [ ] Resources ordered logically\n- [ ] Diversity in teaching styles\n\n---\n\n## Summary\n\nWhen curating resources for a concept page:\n\n1. **Audit first** — Check all existing links and content\n2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)\n3. **Find quality resources** — Search trusted sources\n4. **Write specific descriptions** — What's unique + why read/watch\n5. **Format correctly** — Proper Card syntax, icons, ordering\n6. **Document changes** — Use the audit report template\n\n**Remember:** Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.\n\n<!-- File: .opencode/skill/seo-review/SKILL.md (Tokens: ~8273 | Category: anthropic-skill) -->\n---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential\n---\n\n# Skill: SEO Audit for Concept Pages\n\nUse this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.\n\n## When to Use\n\n- Before publishing a new concept page\n- When optimizing underperforming pages\n- Periodic content audits\n- After major content updates\n- When targeting new keywords\n\n## Goal\n\nEach concept page should rank for searches like:\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\"\n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"[concept] JavaScript example\"\n\n---\n\n## SEO Audit Methodology\n\nFollow these five steps for a complete SEO audit.\n\n### Step 1: Identify Target Keywords\n\nBefore auditing, identify the keyword cluster for the concept.\n\n#### Keyword Cluster Template\n\n| Type | Pattern | Example (Closures) |\n|------|---------|-------------------|\n| **Primary** | [concept] JavaScript | closures JavaScript |\n| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |\n| **How does** | how does [concept] work | how do closures work |\n| **How to** | how to use/create [concept] | how to use closures |\n| **Why** | why use [concept] | why use closures JavaScript |\n| **Examples** | [concept] examples | closure examples JavaScript |\n| **vs** | [concept] vs [related] | closures vs scope |\n| **Interview** | [concept] interview questions | closure interview questions |\n\n### Step 2: On-Page SEO Audit\n\nCheck all on-page SEO elements systematically.\n\n### Step 3: Featured Snippet Optimization\n\nVerify content is structured to win featured snippets.\n\n### Step 4: Internal Linking Audit\n\nCheck the internal link structure.\n\n### Step 5: Generate Report\n\nDocument findings using the report template.\n\n---\n\n## Keyword Clusters by Concept\n\nUse these pre-built keyword clusters for each concept.\n\n<AccordionGroup>\n <Accordion title=\"Call Stack\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript call stack, call stack JavaScript |\n | What is | what is the call stack in JavaScript |\n | How does | how does the call stack work |\n | Error | maximum call stack size exceeded, stack overflow JavaScript |\n | Visual | call stack visualization, call stack explained |\n | Interview | call stack interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Primitive Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript primitive types, primitives in JavaScript |\n | What are | what are primitive types in JavaScript |\n | List | JavaScript data types, types in JavaScript |\n | vs | primitives vs objects JavaScript |\n | typeof | typeof JavaScript, JavaScript typeof operator |\n | Interview | JavaScript types interview questions |\n </Accordion>\n\n <Accordion title=\"Value vs Reference Types\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript value vs reference, pass by reference JavaScript |\n | What is | what is pass by value in JavaScript |\n | How does | how does JavaScript pass objects |\n | Comparison | value types vs reference types JavaScript |\n | Copy | how to copy objects JavaScript, deep copy JavaScript |\n </Accordion>\n\n <Accordion title=\"Type Coercion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript type coercion, type conversion JavaScript |\n | What is | what is type coercion in JavaScript |\n | How does | how does type coercion work |\n | Implicit | implicit type conversion JavaScript |\n | Explicit | explicit type conversion JavaScript |\n | Interview | type coercion interview questions |\n </Accordion>\n\n <Accordion title=\"Equality Operators\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript equality, == vs === JavaScript |\n | What is | what is the difference between == and === |\n | Comparison | loose equality vs strict equality JavaScript |\n | Best practice | when to use == vs === |\n | Interview | JavaScript equality interview questions |\n </Accordion>\n\n <Accordion title=\"Scope and Closures\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript closures, JavaScript scope |\n | What is | what is a closure in JavaScript, what is scope |\n | How does | how do closures work, how does scope work |\n | Types | types of scope JavaScript, lexical scope |\n | Use cases | closure use cases, why use closures |\n | Interview | closure interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"Event Loop\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript event loop, event loop JavaScript |\n | What is | what is the event loop in JavaScript |\n | How does | how does the event loop work |\n | Visual | event loop visualization, event loop explained |\n | Related | call stack event loop, task queue JavaScript |\n | Interview | event loop interview questions |\n </Accordion>\n\n <Accordion title=\"Promises\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript Promises, Promises in JavaScript |\n | What is | what is a Promise in JavaScript |\n | How to | how to use Promises, how to chain Promises |\n | Methods | Promise.all, Promise.race, Promise.allSettled |\n | Error | Promise error handling, Promise catch |\n | vs | Promises vs callbacks, Promises vs async await |\n </Accordion>\n\n <Accordion title=\"async/await\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript async await, async await JavaScript |\n | What is | what is async await in JavaScript |\n | How to | how to use async await, async await tutorial |\n | Error | async await error handling, try catch async |\n | vs | async await vs Promises |\n | Interview | async await interview questions |\n </Accordion>\n\n <Accordion title=\"this Keyword\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript this keyword, this in JavaScript |\n | What is | what is this in JavaScript |\n | How does | how does this work in JavaScript |\n | Binding | call apply bind JavaScript, this binding |\n | Arrow | this in arrow functions |\n | Interview | this keyword interview questions |\n </Accordion>\n\n <Accordion title=\"Prototypes\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript prototype, prototype chain JavaScript |\n | What is | what is a prototype in JavaScript |\n | How does | how does prototype inheritance work |\n | Chain | prototype chain explained |\n | vs | prototype vs class JavaScript |\n | Interview | prototype interview questions JavaScript |\n </Accordion>\n\n <Accordion title=\"DOM\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript DOM, DOM manipulation JavaScript |\n | What is | what is the DOM in JavaScript |\n | How to | how to manipulate DOM JavaScript |\n | Methods | getElementById, querySelector JavaScript |\n | Events | DOM events JavaScript, event listeners |\n | Performance | DOM performance, virtual DOM vs DOM |\n </Accordion>\n\n <Accordion title=\"Higher-Order Functions\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript higher order functions, higher order functions |\n | What are | what are higher order functions |\n | Examples | map filter reduce JavaScript |\n | How to | how to use higher order functions |\n | Interview | higher order functions interview |\n </Accordion>\n\n <Accordion title=\"Recursion\">\n | Type | Keywords |\n |------|----------|\n | Primary | JavaScript recursion, recursion in JavaScript |\n | What is | what is recursion in JavaScript |\n | How to | how to write recursive functions |\n | Examples | recursion examples JavaScript |\n | vs | recursion vs iteration JavaScript |\n | Interview | recursion interview questions |\n </Accordion>\n</AccordionGroup>\n\n---\n\n## Audit Checklists\n\n### Title Tag Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |\n| 2 | Primary keyword in first half | 1 | Concept name appears early |\n| 3 | Ends with \"in JavaScript\" | 1 | Check title ending |\n| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |\n\n**Scoring:**\n- 4/4: ✅ Excellent\n- 3/4: ⚠️ Good, minor improvements possible\n- 0-2/4: ❌ Needs significant work\n\n**Title Formula:**\n```\n[Concept]: [What You'll Understand] in JavaScript\n```\n\n**Good Examples:**\n| Concept | Title (with character count) |\n|---------|------------------------------|\n| Closures | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| Event Loop | \"Event Loop: How Async Code Actually Runs in JavaScript\" (54 chars) |\n| Promises | \"Promises: Handling Async Operations in JavaScript\" (49 chars) |\n| DOM | \"DOM: How Browsers Represent Web Pages in JavaScript\" (51 chars) |\n\n**Bad Examples:**\n| Issue | Bad Title | Better Title |\n|-------|-----------|--------------|\n| Too short | \"Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Too long | \"Understanding JavaScript Closures and How They Work with Examples\" (66 chars) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58 chars) |\n| No hook | \"JavaScript Closures\" | \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Understanding Closures and Scope\" | Add \"in JavaScript\" at end |\n\n---\n\n### Meta Description Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |\n| 2 | Starts with action word | 1 | \"Learn\", \"Understand\", \"Discover\" (NOT \"Master\") |\n| 3 | Contains primary keyword | 1 | Concept name + \"JavaScript\" present |\n| 4 | Promises specific value | 1 | Lists what reader will learn |\n\n**Description Formula:**\n```\n[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Good Examples:**\n\n| Concept | Description |\n|---------|-------------|\n| Closures | \"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\" (159 chars) |\n| Event Loop | \"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\" (176 chars - trim!) |\n| DOM | \"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\" (162 chars) |\n\n**Bad Examples:**\n\n| Issue | Bad Description | Fix |\n|-------|-----------------|-----|\n| Too short | \"Learn about closures\" | Expand to 150-160 chars with specifics |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| Too vague | \"A guide to closures\" | List specific topics covered |\n| Missing keyword | \"Functions can remember things\" | Include \"closures\" and \"JavaScript\" |\n\n---\n\n### Keyword Placement Checklist (5 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Primary keyword in title | 1 | Check frontmatter `title` |\n| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |\n| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |\n| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |\n| 5 | No keyword stuffing | 1 | Content reads naturally |\n\n**Keyword Placement Map:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ KEYWORD PLACEMENT │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 🔴 CRITICAL (Must have keyword) │\n│ ───────────────────────────────── │\n│ • title frontmatter │\n│ • description frontmatter │\n│ • First paragraph (within 100 words) │\n│ • At least one H2 heading │\n│ │\n│ 🟡 RECOMMENDED (Include naturally) │\n│ ────────────────────────────────── │\n│ • \"What you'll learn\" Info box │\n│ • H3 subheadings │\n│ • Key Takeaways section │\n│ • First sentence after major H2s │\n│ │\n│ ⚠️ AVOID │\n│ ───────── │\n│ • Same phrase >4 times per 1000 words │\n│ • Forcing keywords where pronouns work better │\n│ • Awkward sentence structures to fit keywords │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Content Structure Checklist (6 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Opens with question hook | 1 | First paragraph asks engaging question |\n| 2 | Code example in first 200 words | 1 | Simple example appears early |\n| 3 | \"What you'll learn\" Info box | 1 | `<Info>` component after opening |\n| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |\n| 5 | 1,500+ words | 1 | Word count check |\n| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |\n\n**Content Structure Template:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ IDEAL PAGE STRUCTURE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ 1. QUESTION HOOK (First 50 words) │\n│ \"How does JavaScript...? Why do...?\" │\n│ │\n│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │\n│ Quick explanation + simple code demo │\n│ │\n│ 3. \"WHAT YOU'LL LEARN\" INFO BOX │\n│ 5-7 bullet points │\n│ │\n│ 4. PREREQUISITES WARNING (if applicable) │\n│ Link to required prior concepts │\n│ │\n│ 5. MAIN CONTENT SECTIONS (H2s) │\n│ Each H2 answers a question or teaches a concept │\n│ Include code examples, diagrams, tables │\n│ │\n│ 6. COMMON MISTAKES / GOTCHAS SECTION │\n│ What trips people up │\n│ │\n│ 7. KEY TAKEAWAYS │\n│ 8-10 numbered points summarizing everything │\n│ │\n│ 8. TEST YOUR KNOWLEDGE │\n│ 5-6 Q&A accordions │\n│ │\n│ 9. RELATED CONCEPTS │\n│ 4 cards linking to related topics │\n│ │\n│ 10. RESOURCES (Reference, Articles, Videos) │\n│ MDN links, curated articles, videos │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n### Featured Snippet Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | \"What is X\" has 40-60 word definition | 1 | Count words in first paragraph after \"What is\" H2 |\n| 2 | At least one H2 is phrased as question | 1 | Check for \"What is\", \"How does\", \"Why\" H2s |\n| 3 | Numbered steps for \"How to\" content | 1 | Uses `<Steps>` component or numbered list |\n| 4 | Comparison tables (if applicable) | 1 | Tables for \"X vs Y\" content |\n\n**Featured Snippet Patterns:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET FORMATS │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE WINNING FORMAT YOUR CONTENT │\n│ ─────────── ────────────── ──────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ after H2, bold keyword │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ 1. 2. 3. markdown │\n│ │\n│ \"X vs Y\" Table | Feature | X | Y | │\n│ comparison table │\n│ │\n│ \"Types of X\" Bullet list - **Type 1** — desc │\n│ - **Type 2** — desc │\n│ │\n│ \"[X] examples\" Code block ```javascript │\n│ + explanation // example code │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Definition Paragraph Example (40-60 words):**\n\n```markdown\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n(This is 52 words - perfect for a featured snippet)\n\n---\n\n### Internal Linking Checklist (4 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |\n| 2 | Descriptive anchor text | 1 | No \"click here\", \"here\", \"this\" |\n| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |\n| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |\n\n**Good Anchor Text:**\n\n| ❌ Bad | ✓ Good |\n|--------|--------|\n| \"click here\" | \"event loop concept\" |\n| \"here\" | \"JavaScript closures\" |\n| \"this article\" | \"our Promises guide\" |\n| \"read more\" | \"understanding the call stack\" |\n\n**Link Placement Strategy:**\n\n```markdown\n<!-- In Prerequisites (Warning box) -->\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) \nand the [Event Loop](/concepts/event-loop). Read those first if needed.\n</Warning>\n\n<!-- In Body Content (natural context) -->\nWhen the callback finishes, it's added to the task queue — managed by \nthe [event loop](/concepts/event-loop).\n\n<!-- In Related Concepts Section -->\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n</CardGroup>\n```\n\n---\n\n### Technical SEO Checklist (3 points)\n\n| # | Check | Points | How to Verify |\n|---|-------|--------|---------------|\n| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |\n| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |\n| 3 | No orphan pages | 1 | Page is linked from at least one other page |\n\n**H1 Rule:**\n\nEvery page should have exactly ONE H1 (your main title). This is critical for SEO:\n- The H1 tells Google what the page is about\n- Multiple H1s confuse search engines about page hierarchy\n- All other headings should be H2 (`##`) and below\n- The H1 should contain your primary keyword\n\n```markdown\n# Closures in JavaScript ← This is your H1 (only one!)\n\n## What is a Closure? ← H2 for sections\n### Lexical Scope ← H3 for subsections\n## How Closures Work ← Another H2\n```\n\n**URL/Slug Best Practices:**\n\n| ✅ Good | ❌ Bad |\n|---------|--------|\n| `/concepts/closures` | `/concepts/c1` |\n| `/concepts/event-loop` | `/concepts/topic-7` |\n| `/concepts/type-coercion` | `/concepts/abc123` |\n| `/concepts/async-await` | `/concepts/async_await` |\n\nRules for slugs:\n- **Include primary keyword** — The concept name should be in the URL\n- **Use hyphens, not underscores** — `event-loop` not `event_loop`\n- **Keep slugs short and readable** — Under 50 characters\n- **No UUIDs, database IDs, or random strings**\n- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`\n\n**Orphan Page Detection:**\n\nAn orphan page has no internal links pointing to it from other pages. This hurts SEO because:\n- Google may not discover or crawl it frequently\n- It signals the page isn't important to your site structure\n- Users can't navigate to it naturally\n- Link equity doesn't flow to the page\n\n**How to check for orphan pages:**\n1. Search the codebase for links to this concept: `grep -r \"/concepts/[slug]\" docs/`\n2. Verify it appears in at least one other concept's \"Related Concepts\" section\n3. Check that pages listing it as a prerequisite link back appropriately\n4. Ensure it's included in the navigation (`docs.json`)\n\n**Fixing orphan pages:**\n- Add the concept to related pages' \"Related Concepts\" CardGroup\n- Link to it naturally in body content of related concepts\n- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)\n\n---\n\n## Scoring System\n\n### Total Points Available: 30\n\n| Category | Max Points |\n|----------|------------|\n| Title Tag | 4 |\n| Meta Description | 4 |\n| Keyword Placement | 5 |\n| Content Structure | 6 |\n| Featured Snippets | 4 |\n| Internal Linking | 4 |\n| Technical SEO | 3 |\n| **Total** | **30** |\n\n### Score Interpretation\n\n| Score | Percentage | Status | Action |\n|-------|------------|--------|--------|\n| 27-30 | 90-100% | ✅ Excellent | Ready to publish |\n| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |\n| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |\n| 0-16 | <55% | ❌ Poor | Significant work required |\n\n---\n\n## Common SEO Issues and Fixes\n\n### Title Tag Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<50 chars) | \"Closures\" (8) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Too long (>60 chars) | \"Understanding JavaScript Closures and How They Work with Examples\" (66) | \"Closures: How Functions Remember Their Scope in JavaScript\" (58) |\n| Missing keyword | \"Understanding Scope\" | Add concept name: \"Closures: Understanding Scope in JavaScript\" |\n| No hook | \"JavaScript Closures\" | Add benefit: \"Closures: How Functions Remember Their Scope in JavaScript\" |\n| Missing \"JavaScript\" | \"Closures Explained\" | Add at end: \"Closures Explained in JavaScript\" |\n\n### Meta Description Issues\n\n| Issue | Current | Fix |\n|-------|---------|-----|\n| Too short (<120 chars) | \"Learn about closures\" (20) | Expand with specifics to 150-160 chars |\n| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |\n| Starts with \"Master\" | \"Master JavaScript closures...\" | \"Learn JavaScript closures...\" |\n| No keyword | \"Functions that remember\" | Include \"closures\" and \"JavaScript\" |\n| Too vague | \"A guide to closures\" | List specific topics: \"Covers X, Y, and Z\" |\n\n### Content Structure Issues\n\n| Issue | Fix |\n|-------|-----|\n| No question hook | Start with \"How does...?\" or \"Why...?\" |\n| Code example too late | Move simple example to first 200 words |\n| Missing Info box | Add `<Info>` with \"What you'll learn\" |\n| Long paragraphs | Break into 2-4 sentence chunks |\n| Under 1,500 words | Add more depth, examples, edge cases |\n| No bolded terms | Bold key concepts on first mention |\n\n### Featured Snippet Issues\n\n| Issue | Fix |\n|-------|-----|\n| No \"What is\" definition | Add 40-60 word definition paragraph |\n| Definition too long | Tighten to 40-60 words |\n| No question H2s | Add \"What is X?\" or \"How does X work?\" H2 |\n| Steps not numbered | Use `<Steps>` or numbered markdown |\n| No comparison tables | Add table for \"X vs Y\" sections |\n\n### Internal Linking Issues\n\n| Issue | Fix |\n|-------|-----|\n| No internal links | Add 3-5 links to related concepts |\n| Bad anchor text | Replace \"click here\" with descriptive text |\n| No prerequisites | Add `<Warning>` with prerequisite links |\n| Empty Related Concepts | Add 4 Cards linking to related topics |\n\n### Technical SEO Issues\n\n| Issue | Fix |\n|-------|-----|\n| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |\n| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |\n| Orphan page | Add links from related concept pages' body or Related Concepts section |\n| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |\n| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |\n| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |\n\n---\n\n## SEO Audit Report Template\n\nUse this template to document your findings.\n\n```markdown\n# SEO Audit Report: [Concept Name]\n\n**File:** `/docs/concepts/[slug].mdx`\n**Date:** YYYY-MM-DD\n**Auditor:** [Name/Claude]\n**Overall Score:** XX/30 (XX%)\n**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor\n\n---\n\n## Score Summary\n\n| Category | Score | Status |\n|----------|-------|--------|\n| Title Tag | X/4 | ✅/⚠️/❌ |\n| Meta Description | X/4 | ✅/⚠️/❌ |\n| Keyword Placement | X/5 | ✅/⚠️/❌ |\n| Content Structure | X/6 | ✅/⚠️/❌ |\n| Featured Snippets | X/4 | ✅/⚠️/❌ |\n| Internal Linking | X/4 | ✅/⚠️/❌ |\n| Technical SEO | X/3 | ✅/⚠️/❌ |\n| **Total** | **X/30** | **STATUS** |\n\n---\n\n## Target Keywords\n\n**Primary Keyword:** [e.g., \"JavaScript closures\"]\n**Secondary Keywords:**\n- [keyword 1]\n- [keyword 2]\n- [keyword 3]\n\n**Search Intent:** Informational / How-to / Comparison\n\n---\n\n## Title Tag Analysis\n\n**Current Title:** \"[current title from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 50-60 chars | ✅/❌ | XX characters |\n| Primary keyword in first half | ✅/❌ | [notes] |\n| Ends with \"in JavaScript\" | ✅/❌ | [notes] |\n| Contains compelling hook | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Title:** \"[suggested title]\" (XX chars)\n\n---\n\n## Meta Description Analysis\n\n**Current Description:** \"[current description from frontmatter]\"\n**Character Count:** XX characters\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Length 150-160 chars | ✅/❌ | XX characters |\n| Starts with action word | ✅/❌ | Starts with \"[word]\" |\n| Contains primary keyword | ✅/❌ | [notes] |\n| Promises specific value | ✅/❌ | [notes] |\n\n**Issues Found:** [if any]\n\n**Recommended Description:** \"[suggested description]\" (XX chars)\n\n---\n\n## Keyword Placement Analysis\n\n**Score:** X/5\n\n| Location | Present | Notes |\n|----------|---------|-------|\n| Title | ✅/❌ | [notes] |\n| Meta description | ✅/❌ | [notes] |\n| First 100 words | ✅/❌ | Found at word XX |\n| H2 heading | ✅/❌ | Found in: \"[H2 text]\" |\n| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |\n\n**Missing Keyword Placements:**\n- [ ] [Location where keyword should be added]\n\n---\n\n## Content Structure Analysis\n\n**Word Count:** X,XXX words\n**Score:** X/6\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Question hook opening | ✅/❌ | [notes] |\n| Code in first 200 words | ✅/❌ | Code appears at word XX |\n| \"What you'll learn\" box | ✅/❌ | [present/missing] |\n| Short paragraphs | ✅/❌ | [notes on paragraph length] |\n| 1,500+ words | ✅/❌ | X,XXX words |\n| Bolded key terms | ✅/❌ | [notes] |\n\n**Structure Issues:**\n- [ ] [Issue and recommendation]\n\n---\n\n## Featured Snippet Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 40-60 word definition | ✅/❌ | Currently XX words |\n| Question-format H2 | ✅/❌ | Found: \"[H2]\" / Not found |\n| Numbered steps | ✅/❌ | [notes] |\n| Comparison tables | ✅/❌/N/A | [notes] |\n\n**Snippet Opportunities:**\n\n1. **\"What is [concept]\" snippet:**\n - Current definition: XX words\n - Action: [Expand to/Trim to] 40-60 words\n\n2. **\"How to [action]\" snippet:**\n - Action: [Add Steps component / Already present]\n\n---\n\n## Internal Linking Analysis\n\n**Score:** X/4\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| 3-5 internal links in body | ✅/❌ | Found X links |\n| Descriptive anchor text | ✅/❌ | [notes] |\n| Prerequisites in Warning | ✅/❌ | [present/missing] |\n| Related Concepts section | ✅/❌ | X cards present |\n\n**Current Internal Links:**\n1. [Anchor text] → `/concepts/[slug]`\n2. [Anchor text] → `/concepts/[slug]`\n\n**Recommended Links to Add:**\n- Link to [concept] in [section/context]\n- Link to [concept] in [section/context]\n\n**Bad Anchor Text Found:**\n- Line XX: \"click here\" → change to \"[descriptive text]\"\n\n---\n\n## Technical SEO Analysis\n\n**Score:** X/3\n\n| Check | Status | Notes |\n|-------|--------|-------|\n| Single H1 per page | ✅/❌ | [Found X H1 tags] |\n| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |\n| Not an orphan page | ✅/❌ | Linked from X other pages |\n\n**H1 Tags Found:**\n- Line XX: `# [H1 text]` ← Should be the only one\n- [List any additional H1s that need to be changed to H2]\n\n**Slug Analysis:**\n- Current slug: `[slug].mdx`\n- Contains keyword: ✅/❌\n- Format correct: ✅/❌ (lowercase, hyphens, no special chars)\n\n**Incoming Links Found:**\n1. `/concepts/[other-concept]` → Links to this page in [section]\n2. `/concepts/[other-concept]` → Links in Related Concepts\n\n**If orphan page, add links from:**\n- [Suggested concept page] in [section]\n- [Suggested concept page] in Related Concepts\n\n---\n\n## Priority Fixes\n\n### High Priority (Do First)\n\n1. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n2. **[Issue]**\n - Current: [what it is now]\n - Recommended: [what it should be]\n - Impact: [why this matters]\n\n### Medium Priority\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n### Low Priority (Nice to Have)\n\n1. **[Issue]**\n - Recommendation: [fix]\n\n---\n\n## Competitive Analysis (Optional)\n\n**Top-Ranking Pages for \"[primary keyword]\":**\n\n1. **[Competitor 1 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n2. **[Competitor 2 - URL]**\n - What they do well: [observation]\n - Word count: ~X,XXX\n\n**Our Advantages:**\n- [What we do better]\n\n**Gaps to Fill:**\n- [What we're missing that competitors have]\n\n---\n\n## Implementation Checklist\n\nAfter making fixes, verify:\n\n- [ ] Title is 50-60 characters with keyword and hook\n- [ ] Description is 150-160 characters with action word and value\n- [ ] Primary keyword in title, description, first 100 words, and H2\n- [ ] Opens with question hook\n- [ ] Code example in first 200 words\n- [ ] \"What you'll learn\" Info box present\n- [ ] Paragraphs are 2-4 sentences\n- [ ] 1,500+ words total\n- [ ] Key terms bolded on first mention\n- [ ] 40-60 word definition for featured snippet\n- [ ] At least one question-format H2\n- [ ] 3-5 internal links with descriptive anchor text\n- [ ] Prerequisites in Warning box (if applicable)\n- [ ] Related Concepts section has 4 cards\n- [ ] Single H1 per page (title only)\n- [ ] URL slug contains primary keyword\n- [ ] Page linked from at least one other concept page\n- [ ] All fixes implemented and verified\n\n---\n\n## Final Recommendation\n\n**Ready to Publish:** ✅ Yes / ❌ No - [reason]\n\n**Next Review Date:** [When to re-audit, e.g., \"3 months\" or \"after major update\"]\n```\n\n---\n\n## Quick Reference\n\n### Character Counts\n\n| Element | Ideal Length |\n|---------|--------------|\n| Title | 50-60 characters |\n| Meta Description | 150-160 characters |\n| Definition paragraph | 40-60 words |\n\n### Keyword Density\n\n- Don't exceed 3-4 mentions of exact phrase per 1,000 words\n- Use variations naturally (e.g., \"closures\", \"closure\", \"JavaScript closures\")\n\n### Content Length\n\n| Length | Assessment |\n|--------|------------|\n| <1,000 words | Too thin - add depth |\n| 1,000-1,500 | Minimum viable |\n| 1,500-2,500 | Good |\n| 2,500-4,000 | Excellent |\n| >4,000 | Consider splitting |\n\n---\n\n## Summary\n\nWhen auditing a concept page for SEO:\n\n1. **Identify target keywords** using the keyword cluster for that concept\n2. **Check title tag** — 50-60 chars, keyword first, hook, ends with \"JavaScript\"\n3. **Check meta description** — 150-160 chars, action word, keyword, specific value\n4. **Verify keyword placement** — Title, description, first 100 words, H2\n5. **Audit content structure** — Question hook, early code, Info box, short paragraphs\n6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables\n7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section\n8. **Generate report** — Document score, issues, and prioritized fixes\n\n**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.\n\n<!-- File: .opencode/skill/test-writer/SKILL.md (Tokens: ~5300 | Category: anthropic-skill) -->\n---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines\n---\n\n# Skill: Test Writer for Concept Pages\n\nUse this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.\n\n## When to Use\n\n- After writing a new concept page\n- When adding new code examples to existing pages\n- When updating existing code examples\n- To verify documentation accuracy through automated tests\n- Before publishing to ensure all examples work correctly\n\n## Test Writing Methodology\n\nFollow these four phases to create comprehensive tests for a concept page.\n\n### Phase 1: Code Example Extraction\n\nScan the concept page for all code examples and categorize them:\n\n| Category | Characteristics | Action |\n|----------|-----------------|--------|\n| **Testable** | Has `console.log` with output comments, returns values | Write tests |\n| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |\n| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |\n| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |\n| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |\n\n### Phase 2: Determine Test File Structure\n\n```\ntests/\n├── fundamentals/ # Concepts 1-6\n├── functions-execution/ # Concepts 7-8\n├── web-platform/ # Concepts 9-10\n├── object-oriented/ # Concepts 11-15\n├── functional-programming/ # Concepts 16-19\n├── async-javascript/ # Concepts 20-22\n├── advanced-topics/ # Concepts 23-31\n└── beyond/ # Extended concepts\n └── {subcategory}/\n```\n\n**File naming:**\n- Standard tests: `{concept-name}.test.js`\n- DOM tests: `{concept-name}.dom.test.js`\n\n### Phase 3: Convert Examples to Tests\n\nFor each testable code example:\n\n1. Identify the expected output (from `console.log` comments or documented behavior)\n2. Convert to `expect` assertions\n3. Add source line reference in comments\n4. Group related tests in `describe` blocks matching documentation sections\n\n### Phase 4: Handle Special Cases\n\n| Case | Solution |\n|------|----------|\n| Browser-only APIs | Use jsdom environment or skip with note |\n| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |\n| Side effects | Capture output or test mutations |\n| Intentional errors | Use `expect(() => {...}).toThrow()` |\n| Async code | Use `async/await` with proper assertions |\n\n---\n\n## Project Test Conventions\n\n### Import Pattern\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n```\n\nFor DOM tests or tests needing mocks:\n\n```javascript\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### DOM Test File Header\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n```\n\n### Describe Block Organization\n\nMatch the structure of the documentation:\n\n```javascript\ndescribe('Concept Name', () => {\n describe('Section from Documentation', () => {\n describe('Subsection if needed', () => {\n it('should [specific behavior]', () => {\n // Test\n })\n })\n })\n})\n```\n\n### Test Naming Convention\n\n- Start with \"should\"\n- Be descriptive and specific\n- Match the documented behavior\n\n```javascript\n// Good\nit('should return \"object\" for typeof null', () => {})\nit('should throw TypeError when accessing property of undefined', () => {})\nit('should resolve promises in order they were created', () => {})\n\n// Bad\nit('test typeof', () => {})\nit('works correctly', () => {})\nit('null test', () => {})\n```\n\n### Source Line References\n\nAlways reference the documentation source:\n\n```javascript\n// ============================================================\n// SECTION NAME FROM DOCUMENTATION\n// From {concept}.mdx lines XX-YY\n// ============================================================\n\ndescribe('Section Name', () => {\n // From lines 45-52: Basic typeof examples\n it('should return correct type strings', () => {\n // Test\n })\n})\n```\n\n---\n\n## Test Patterns Reference\n\n### Pattern 1: Basic Value Assertion\n\n**Documentation:**\n```javascript\nconsole.log(typeof \"hello\") // \"string\"\nconsole.log(typeof 42) // \"number\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: typeof examples\nit('should return correct type for primitives', () => {\n expect(typeof \"hello\").toBe(\"string\")\n expect(typeof 42).toBe(\"number\")\n})\n```\n\n---\n\n### Pattern 2: Multiple Related Assertions\n\n**Documentation:**\n```javascript\nlet a = \"hello\"\nlet b = \"hello\"\nconsole.log(a === b) // true\n\nlet obj1 = { x: 1 }\nlet obj2 = { x: 1 }\nconsole.log(obj1 === obj2) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Primitive vs object comparison\nit('should compare primitives by value', () => {\n let a = \"hello\"\n let b = \"hello\"\n expect(a === b).toBe(true)\n})\n\nit('should compare objects by reference', () => {\n let obj1 = { x: 1 }\n let obj2 = { x: 1 }\n expect(obj1 === obj2).toBe(false)\n})\n```\n\n---\n\n### Pattern 3: Function Return Values\n\n**Documentation:**\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name + \"!\"\n}\n\nconsole.log(greet(\"Alice\")) // \"Hello, Alice!\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: greet function example\nit('should return greeting with name', () => {\n function greet(name) {\n return \"Hello, \" + name + \"!\"\n }\n \n expect(greet(\"Alice\")).toBe(\"Hello, Alice!\")\n})\n```\n\n---\n\n### Pattern 4: Error Testing\n\n**Documentation:**\n```javascript\n// This throws an error!\nconst obj = null\nconsole.log(obj.property) // TypeError: Cannot read property of null\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Accessing property of null\nit('should throw TypeError when accessing property of null', () => {\n const obj = null\n \n expect(() => {\n obj.property\n }).toThrow(TypeError)\n})\n```\n\n---\n\n### Pattern 5: Specific Error Messages\n\n**Documentation:**\n```javascript\nfunction divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: divide function with error\nit('should throw error when dividing by zero', () => {\n function divide(a, b) {\n if (b === 0) throw new Error(\"Cannot divide by zero\")\n return a / b\n }\n \n expect(() => divide(10, 0)).toThrow(\"Cannot divide by zero\")\n expect(divide(10, 2)).toBe(5)\n})\n```\n\n---\n\n### Pattern 6: Async/Await Testing\n\n**Documentation:**\n```javascript\nasync function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n}\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: async fetchUser function\nit('should fetch user data asynchronously', async () => {\n // Mock fetch for testing\n global.fetch = vi.fn(() =>\n Promise.resolve({\n json: () => Promise.resolve({ id: 1, name: 'Alice' })\n })\n )\n \n async function fetchUser(id) {\n const response = await fetch(`/api/users/${id}`)\n return response.json()\n }\n \n const user = await fetchUser(1)\n expect(user).toEqual({ id: 1, name: 'Alice' })\n})\n```\n\n---\n\n### Pattern 7: Promise Testing\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve) => {\n resolve(\"done\")\n})\n\npromise.then(result => console.log(result)) // \"done\"\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Basic Promise resolution\nit('should resolve with correct value', async () => {\n const promise = new Promise((resolve) => {\n resolve(\"done\")\n })\n \n await expect(promise).resolves.toBe(\"done\")\n})\n```\n\n---\n\n### Pattern 8: Promise Rejection\n\n**Documentation:**\n```javascript\nconst promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n})\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Promise rejection\nit('should reject with error', async () => {\n const promise = new Promise((resolve, reject) => {\n reject(new Error(\"Something went wrong\"))\n })\n \n await expect(promise).rejects.toThrow(\"Something went wrong\")\n})\n```\n\n---\n\n### Pattern 9: Floating Point Comparison\n\n**Documentation:**\n```javascript\nconsole.log(0.1 + 0.2) // 0.30000000000000004\nconsole.log(0.1 + 0.2 === 0.3) // false\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Floating point precision\nit('should demonstrate floating point imprecision', () => {\n expect(0.1 + 0.2).not.toBe(0.3)\n expect(0.1 + 0.2).toBeCloseTo(0.3)\n expect(0.1 + 0.2 === 0.3).toBe(false)\n})\n```\n\n---\n\n### Pattern 10: Array Method Testing\n\n**Documentation:**\n```javascript\nconst numbers = [1, 2, 3, 4, 5]\nconst doubled = numbers.map(n => n * 2)\nconsole.log(doubled) // [2, 4, 6, 8, 10]\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Array map example\nit('should double all numbers in array', () => {\n const numbers = [1, 2, 3, 4, 5]\n const doubled = numbers.map(n => n * 2)\n \n expect(doubled).toEqual([2, 4, 6, 8, 10])\n expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged\n})\n```\n\n---\n\n### Pattern 11: Object Mutation Testing\n\n**Documentation:**\n```javascript\nconst obj = { a: 1 }\nobj.b = 2\nconsole.log(obj) // { a: 1, b: 2 }\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Object mutation\nit('should allow adding properties to objects', () => {\n const obj = { a: 1 }\n obj.b = 2\n \n expect(obj).toEqual({ a: 1, b: 2 })\n})\n```\n\n---\n\n### Pattern 12: Closure Testing\n\n**Documentation:**\n```javascript\nfunction counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n}\n\nconst increment = counter()\nconsole.log(increment()) // 1\nconsole.log(increment()) // 2\nconsole.log(increment()) // 3\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Closure counter example\nit('should maintain state across calls via closure', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const increment = counter()\n expect(increment()).toBe(1)\n expect(increment()).toBe(2)\n expect(increment()).toBe(3)\n})\n\nit('should create independent counters', () => {\n function counter() {\n let count = 0\n return function() {\n count++\n return count\n }\n }\n \n const counter1 = counter()\n const counter2 = counter()\n \n expect(counter1()).toBe(1)\n expect(counter1()).toBe(2)\n expect(counter2()).toBe(1) // Independent\n})\n```\n\n---\n\n### Pattern 13: DOM Event Testing\n\n**Documentation:**\n```javascript\nconst button = document.getElementById('myButton')\nbutton.addEventListener('click', function(event) {\n console.log('Button clicked!')\n console.log(event.type) // \"click\"\n})\n```\n\n**Test (in .dom.test.js file):**\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\n\ndescribe('DOM Event Handlers', () => {\n let button\n \n beforeEach(() => {\n button = document.createElement('button')\n button.id = 'myButton'\n document.body.appendChild(button)\n })\n \n afterEach(() => {\n document.body.innerHTML = ''\n })\n \n // From lines XX-YY: Button click event\n it('should fire click event handler', () => {\n const output = []\n \n button.addEventListener('click', function(event) {\n output.push('Button clicked!')\n output.push(event.type)\n })\n \n button.click()\n \n expect(output).toEqual(['Button clicked!', 'click'])\n })\n})\n```\n\n---\n\n### Pattern 14: DOM Manipulation Testing\n\n**Documentation:**\n```javascript\nconst div = document.createElement('div')\ndiv.textContent = 'Hello'\ndiv.classList.add('greeting')\ndocument.body.appendChild(div)\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Creating and appending elements\nit('should create element with text and class', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello'\n div.classList.add('greeting')\n document.body.appendChild(div)\n \n const element = document.querySelector('.greeting')\n expect(element).not.toBeNull()\n expect(element.textContent).toBe('Hello')\n expect(element.classList.contains('greeting')).toBe(true)\n})\n```\n\n---\n\n### Pattern 15: Timer Testing\n\n**Documentation:**\n```javascript\nconsole.log('First')\nsetTimeout(() => console.log('Second'), 0)\nconsole.log('Third')\n// Output: First, Third, Second\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: setTimeout execution order\nit('should execute setTimeout callback after synchronous code', async () => {\n const output = []\n \n output.push('First')\n setTimeout(() => output.push('Second'), 0)\n output.push('Third')\n \n // Wait for setTimeout to execute\n await new Promise(resolve => setTimeout(resolve, 10))\n \n expect(output).toEqual(['First', 'Third', 'Second'])\n})\n```\n\n---\n\n### Pattern 16: Strict Mode Behavior\n\n**Documentation:**\n```javascript\n// In strict mode, this throws\n\"use strict\"\nx = 10 // ReferenceError: x is not defined\n```\n\n**Test:**\n```javascript\n// From lines XX-YY: Strict mode variable declaration\nit('should throw ReferenceError in strict mode for undeclared variables', () => {\n // Vitest runs in strict mode by default\n expect(() => {\n // Using eval to test strict mode behavior\n \"use strict\"\n eval('undeclaredVar = 10')\n }).toThrow()\n})\n```\n\n---\n\n## Complete Test File Template\n\n```javascript\nimport { describe, it, expect } from 'vitest'\n\ndescribe('[Concept Name]', () => {\n // ============================================================\n // [FIRST SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[First Section]', () => {\n // From lines XX-YY: [Brief description of example]\n it('should [expected behavior]', () => {\n // Code from documentation\n \n expect(result).toBe(expected)\n })\n \n // From lines XX-YY: [Brief description of next example]\n it('should [another expected behavior]', () => {\n // Code from documentation\n \n expect(result).toEqual(expected)\n })\n })\n \n // ============================================================\n // [SECOND SECTION NAME FROM DOCUMENTATION]\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('[Second Section]', () => {\n // From lines XX-YY: [Description]\n it('should [behavior]', () => {\n // Test\n })\n })\n \n // ============================================================\n // EDGE CASES AND COMMON MISTAKES\n // From [concept].mdx lines XX-YY\n // ============================================================\n \n describe('Edge Cases', () => {\n // From lines XX-YY: [Edge case description]\n it('should handle [edge case]', () => {\n // Test\n })\n })\n \n describe('Common Mistakes', () => {\n // From lines XX-YY: Wrong way example\n it('should demonstrate the incorrect behavior', () => {\n // Test showing why the \"wrong\" way fails\n })\n \n // From lines XX-YY: Correct way example\n it('should demonstrate the correct behavior', () => {\n // Test showing the right approach\n })\n })\n})\n```\n\n---\n\n## Complete DOM Test File Template\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ============================================================\n// DOM EXAMPLES FROM [CONCEPT NAME]\n// From [concept].mdx lines XX-YY\n// ============================================================\n\ndescribe('[Concept Name] - DOM', () => {\n // Shared setup\n let container\n \n beforeEach(() => {\n // Create a fresh container for each test\n container = document.createElement('div')\n container.id = 'test-container'\n document.body.appendChild(container)\n })\n \n afterEach(() => {\n // Clean up after each test\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n })\n \n // ============================================================\n // [SECTION NAME]\n // From lines XX-YY\n // ============================================================\n \n describe('[Section Name]', () => {\n // From lines XX-YY: [Example description]\n it('should [expected DOM behavior]', () => {\n // Setup\n const element = document.createElement('div')\n container.appendChild(element)\n \n // Action\n element.textContent = 'Hello'\n \n // Assert\n expect(element.textContent).toBe('Hello')\n })\n })\n \n // ============================================================\n // EVENT HANDLING\n // From lines XX-YY\n // ============================================================\n \n describe('Event Handling', () => {\n // From lines XX-YY: Click event example\n it('should handle click events', () => {\n const button = document.createElement('button')\n container.appendChild(button)\n \n let clicked = false\n button.addEventListener('click', () => {\n clicked = true\n })\n \n button.click()\n \n expect(clicked).toBe(true)\n })\n })\n})\n```\n\n---\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests for specific concept\nnpm test -- tests/fundamentals/primitive-types/\n\n# Run tests for specific file\nnpm test -- tests/fundamentals/primitive-types/primitive-types.test.js\n\n# Run DOM tests only\nnpm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js\n\n# Run with watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n\n# Run with verbose output\nnpm test -- --reporter=verbose\n```\n\n---\n\n## Quality Checklist\n\n### Completeness\n- [ ] All testable code examples have corresponding tests\n- [ ] Tests organized by documentation sections\n- [ ] Source line references included in comments (From lines XX-YY)\n- [ ] DOM tests in separate `.dom.test.js` file\n- [ ] Edge cases and error examples tested\n\n### Correctness\n- [ ] Tests verify the actual documented behavior\n- [ ] Output comments in docs match test expectations\n- [ ] Async tests properly use async/await\n- [ ] Error tests use correct `toThrow` pattern\n- [ ] Floating point comparisons use `toBeCloseTo`\n- [ ] Object comparisons use `toEqual` (not `toBe`)\n\n### Convention\n- [ ] Uses explicit imports from vitest\n- [ ] Follows describe/it nesting pattern\n- [ ] Test names start with \"should\"\n- [ ] Proper file naming (`{concept}.test.js`)\n- [ ] DOM tests have jsdom environment directive\n\n### Verification\n- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`\n- [ ] No skipped tests without documented reason\n- [ ] No false positives (tests that pass for wrong reasons)\n\n---\n\n## Test Report Template\n\nUse this template to document test coverage for a concept page.\n\n```markdown\n# Test Coverage Report: [Concept Name]\n\n**Concept Page:** `/docs/concepts/[slug].mdx`\n**Test File:** `/tests/{category}/{concept}/{concept}.test.js`\n**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)\n**Date:** YYYY-MM-DD\n**Author:** [Name/Claude]\n\n## Summary\n\n| Metric | Count |\n|--------|-------|\n| Total Code Examples in Doc | XX |\n| Testable Examples | XX |\n| Tests Written | XX |\n| DOM Tests Written | XX |\n| Skipped (with reason) | XX |\n\n## Tests by Section\n\n| Section | Line Range | Examples | Tests | Status |\n|---------|------------|----------|-------|--------|\n| [Section 1] | XX-YY | X | X | ✅ |\n| [Section 2] | XX-YY | X | X | ✅ |\n| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |\n\n## Skipped Examples\n\n| Line | Example Description | Reason |\n|------|---------------------|--------|\n| XX | ASCII diagram of call stack | Conceptual, not executable |\n| YY | Browser fetch example | Requires network, mocked instead |\n\n## Test Execution\n\n```bash\nnpm test -- tests/{category}/{concept}/\n```\n\n**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped\n\n## Notes\n\n[Any special considerations, mock requirements, or issues encountered]\n```\n\n---\n\n## Common Issues and Solutions\n\n### Issue: Test passes but shouldn't\n\n**Problem:** Test expectations don't match documentation output\n\n**Solution:** Double-check the expected value matches the `console.log` comment exactly\n\n```javascript\n// Documentation says: console.log(result) // [1, 2, 3]\n// Make sure test uses:\nexpect(result).toEqual([1, 2, 3]) // NOT toBe for arrays\n```\n\n### Issue: Async test times out\n\n**Problem:** Async test never resolves\n\n**Solution:** Ensure all promises are awaited and async function is marked\n\n```javascript\n// Bad\nit('should fetch data', () => {\n const data = fetchData() // Missing await!\n expect(data).toBeDefined()\n})\n\n// Good\nit('should fetch data', async () => {\n const data = await fetchData()\n expect(data).toBeDefined()\n})\n```\n\n### Issue: DOM test fails with \"document is not defined\"\n\n**Problem:** Missing jsdom environment\n\n**Solution:** Add environment directive at top of file\n\n```javascript\n/**\n * @vitest-environment jsdom\n */\n```\n\n### Issue: Test isolation problems\n\n**Problem:** Tests affect each other\n\n**Solution:** Use beforeEach/afterEach for cleanup\n\n```javascript\nafterEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n```\n\n---\n\n## Summary\n\nWhen writing tests for a concept page:\n\n1. **Extract all code examples** from the documentation\n2. **Categorize** as testable, DOM, error, or conceptual\n3. **Create test file** in correct location with proper naming\n4. **Convert each example** to test using appropriate pattern\n5. **Reference source lines** in comments for traceability\n6. **Run tests** to verify all pass\n7. **Document coverage** using the report template\n\n**Remember:** Tests serve two purposes:\n1. Verify documentation is accurate\n2. Catch regressions if code examples are updated\n\nEvery testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.\n\n<!-- File: .opencode/skill/write-concept/SKILL.md (Tokens: ~11510 | Category: anthropic-skill) -->\n---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines\n---\n\n# Skill: Write JavaScript Concept Documentation\n\nUse this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.\n\n## When to Use\n\n- Creating a new concept page in `/docs/concepts/`\n- Rewriting or significantly improving an existing concept page\n- Reviewing an existing concept page for quality and completeness\n- Adding explanatory content to a concept\n\n## Target Audience\n\nRemember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.\n\n## Writing Guidelines\n\n### Voice and Tone\n\n- **Conversational but authoritative**: Write like you're explaining to a smart friend\n- **Encouraging**: Make complex topics feel approachable\n- **Practical**: Focus on real-world applications and use cases\n- **Concise**: Respect the reader's time; avoid unnecessary verbosity\n- **Question-driven**: Open sections with questions the reader might have\n\n### Avoiding AI-Generated Language\n\nYour writing must sound human, not AI-generated. Here are specific patterns to avoid:\n\n#### Words and Phrases to Avoid\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"Master [concept]\" | \"Learn [concept]\" |\n| \"dramatically easier/better\" | \"much easier\" or \"cleaner\" |\n| \"one fundamental thing\" | \"one simple thing\" |\n| \"one of the most important concepts\" | \"This is a big one\" |\n| \"essential points\" | \"key things to remember\" |\n| \"understanding X deeply improves\" | \"knowing X well makes Y easier\" |\n| \"To truly understand\" | \"Let's look at\" or \"Here's how\" |\n| \"This is crucial\" | \"This trips people up\" |\n| \"It's worth noting that\" | Just state the thing directly |\n| \"It's important to remember\" | \"Don't forget:\" or \"Remember:\" |\n| \"In order to\" | \"To\" |\n| \"Due to the fact that\" | \"Because\" |\n| \"At the end of the day\" | Remove entirely |\n| \"When it comes to\" | Remove or rephrase |\n| \"In this section, we will\" | Just start explaining |\n| \"As mentioned earlier\" | Remove or link to the section |\n\n#### Repetitive Emphasis Patterns\n\nDon't use the same lead-in pattern repeatedly. Vary your emphasis:\n\n| Instead of repeating... | Vary with... |\n|------------------------|--------------|\n| \"Key insight:\" | \"Don't forget:\", \"The pattern:\", \"Here's the thing:\" |\n| \"Best practice:\" | \"Pro tip:\", \"Quick check:\", \"A good habit:\" |\n| \"Important:\" | \"Watch out:\", \"Heads up:\", \"Note:\" |\n| \"Remember:\" | \"Keep in mind:\", \"The rule:\", \"Think of it this way:\" |\n\n#### Em Dash (—) Overuse\n\nAI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:\n\n| ❌ Em Dash Overuse | ✓ Better Alternative |\n|-------------------|---------------------|\n| \"async/await — syntactic sugar that...\" | \"async/await. It's syntactic sugar that...\" |\n| \"understand Promises — async/await is built...\" | \"understand Promises. async/await is built...\" |\n| \"doesn't throw an error — you just get...\" | \"doesn't throw an error. You just get...\" |\n| \"outside of async functions — but only in...\" | \"outside of async functions, but only in...\" |\n| \"Fails fast — if any Promise rejects...\" | \"Fails fast. If any Promise rejects...\" |\n| \"achieve the same thing — the choice...\" | \"achieve the same thing. The choice...\" |\n\n**When em dashes ARE acceptable:**\n- In Key Takeaways section (consistent formatting for the numbered list)\n- In MDN card titles (e.g., \"async function — MDN\")\n- In interview answer step-by-step explanations (structured formatting)\n- Sparingly when a true parenthetical aside reads naturally\n\n**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for \"—\" and evaluate each one.\n\n#### Superlatives and Filler Words\n\nAvoid vague superlatives that add no information:\n\n| ❌ Avoid | ✓ Use Instead |\n|----------|---------------|\n| \"dramatically\" | \"much\" or remove entirely |\n| \"fundamentally\" | \"simply\" or be specific about what's fundamental |\n| \"incredibly\" | remove or be specific |\n| \"extremely\" | remove or be specific |\n| \"absolutely\" | remove |\n| \"basically\" | remove (if you need it, you're not explaining clearly) |\n| \"essentially\" | remove or just explain directly |\n| \"very\" | remove or use a stronger word |\n| \"really\" | remove |\n| \"actually\" | remove (unless correcting a misconception) |\n| \"In fact\" | remove (just state the fact) |\n| \"Interestingly\" | remove (let the reader decide if it's interesting) |\n\n#### Stiff/Formal Phrases\n\nReplace formal academic-style phrases with conversational alternatives:\n\n| ❌ Stiff | ✓ Conversational |\n|---------|------------------|\n| \"It should be noted that\" | \"Note that\" or just state it |\n| \"One might wonder\" | \"You might wonder\" |\n| \"This enables developers to\" | \"This lets you\" |\n| \"The aforementioned\" | \"this\" or name it again |\n| \"Subsequently\" | \"Then\" or \"Next\" |\n| \"Utilize\" | \"Use\" |\n| \"Commence\" | \"Start\" |\n| \"Prior to\" | \"Before\" |\n| \"In the event that\" | \"If\" |\n| \"A considerable amount of\" | \"A lot of\" or \"Many\" |\n\n#### Playful Touches (Use Sparingly)\n\nAdd occasional human touches to make the content feel less robotic, but don't overdo it:\n\n```javascript\n// ✓ Good: One playful comment per section\n// Callback hell - nested so deep you need a flashlight\n\n// ✓ Good: Conversational aside \n// forEach and async don't play well together — it just fires and forgets:\n\n// ✓ Good: Relatable frustration\n// Finally, error handling that doesn't make you want to flip a table.\n\n// ❌ Bad: Trying too hard\n// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝\n\n// ❌ Bad: Forced humor\n// Let's dive into the AMAZING world of Promises! 🎉🚀\n```\n\n**Guidelines:**\n- One or two playful touches per major section is enough\n- Humor should arise naturally from the content\n- Avoid emojis in body text (they're fine in comments occasionally)\n- Don't explain your jokes\n- If a playful line doesn't work, just be direct instead\n\n### Page Structure (Follow This Exactly)\n\nEvery concept page MUST follow this structure in this exact order:\n\n```mdx\n---\ntitle: \"Concept Name: [Hook] in JavaScript\"\nsidebarTitle: \"Concept Name: [Hook]\"\ndescription: \"SEO-friendly description in 150-160 characters starting with action word\"\n---\n\n[Opening hook - Start with engaging questions that make the reader curious]\n[Example: \"How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?\"]\n\n[Immediately show a simple code example demonstrating the concept]\n\n```javascript\n// This is how you [do the thing] in JavaScript\nconst example = doSomething()\nconsole.log(example) // Expected output\n```\n\n[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]\n\n<Info>\n**What you'll learn in this guide:**\n- Key learning outcome 1\n- Key learning outcome 2\n- Key learning outcome 3\n- Key learning outcome 4 (aim for 5-7 items)\n</Info>\n\n<Warning>\n[Optional: Prerequisites or important notices - place AFTER Info box]\n**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!\n</Warning>\n\n---\n\n## [First Major Section - e.g., \"What is X?\"]\n\n[Core explanation with inline MDN links for any new terms/APIs introduced]\n\n[Optional: CardGroup with MDN reference links for this section]\n\n---\n\n## [Analogy Section - e.g., \"The Restaurant Analogy\"]\n\n[Relatable real-world analogy that makes the concept click]\n\n[ASCII art diagram visualizing the concept]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ DIAGRAM TITLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ [Visual representation of the concept] │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## [Core Concepts Section]\n\n[Deep dive with code examples, tables, and Mintlify components]\n\n<Steps>\n <Step title=\"Step 1\">\n Explanation of the first step\n </Step>\n <Step title=\"Step 2\">\n Explanation of the second step\n </Step>\n</Steps>\n\n<AccordionGroup>\n <Accordion title=\"Subtopic 1\">\n Detailed explanation with code examples\n </Accordion>\n <Accordion title=\"Subtopic 2\">\n Detailed explanation with code examples\n </Accordion>\n</AccordionGroup>\n\n<Tip>\n**Quick Rule of Thumb:** [Memorable summary or mnemonic]\n</Tip>\n\n---\n\n## [The API/Implementation Section]\n\n[How to actually use the concept in code]\n\n### Basic Usage\n\n```javascript\n// Basic example with step-by-step comments\n// Step 1: Do this\nconst step1 = something()\n\n// Step 2: Then this\nconst step2 = somethingElse(step1)\n\n// Step 3: Finally\nconsole.log(step2) // Expected output\n```\n\n### [Advanced Pattern]\n\n```javascript\n// More complex real-world example\n```\n\n---\n\n## [Common Mistakes Section - e.g., \"The #1 Fetch Mistake\"]\n\n[Highlight the most common mistake developers make]\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ VISUAL COMPARISON │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ WRONG WAY RIGHT WAY │\n│ ───────── ───────── │\n│ • Problem 1 • Solution 1 │\n│ • Problem 2 • Solution 2 │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n```javascript\n// ❌ WRONG - Explanation of why this is wrong\nconst bad = wrongApproach()\n\n// ✓ CORRECT - Explanation of the right way\nconst good = correctApproach()\n```\n\n<Warning>\n**The Trap:** [Clear explanation of what goes wrong and why]\n</Warning>\n\n---\n\n## [Advanced Patterns Section]\n\n[Real-world patterns and best practices]\n\n### Pattern Name\n\n```javascript\n// Reusable pattern with practical application\nasync function realWorldExample() {\n // Implementation\n}\n\n// Usage\nconst result = await realWorldExample()\n```\n\n---\n\n## Key Takeaways\n\n<Info>\n**The key things to remember:**\n\n1. **First key point** — Brief explanation\n\n2. **Second key point** — Brief explanation\n\n3. **Third key point** — Brief explanation\n\n4. **Fourth key point** — Brief explanation\n\n5. **Fifth key point** — Brief explanation\n\n[Aim for 8-10 key takeaways that summarize everything]\n</Info>\n\n---\n\n## Test Your Knowledge\n\n<AccordionGroup>\n <Accordion title=\"Question 1: [Specific question about the concept]\">\n **Answer:**\n \n [Clear explanation]\n \n ```javascript\n // Code example demonstrating the answer\n ```\n </Accordion>\n \n <Accordion title=\"Question 2: [Another question]\">\n **Answer:**\n \n [Clear explanation with code if needed]\n </Accordion>\n \n [Aim for 5-6 questions covering the main topics]\n</AccordionGroup>\n\n---\n\n## Related Concepts\n\n<CardGroup cols={2}>\n <Card title=\"Related Concept 1\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n <Card title=\"Related Concept 2\" icon=\"icon-name\" href=\"/concepts/slug\">\n How it connects to this concept\n </Card>\n</CardGroup>\n\n---\n\n## Reference\n\n<CardGroup cols={2}>\n <Card title=\"Main Topic — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Official MDN documentation for the main concept\n </Card>\n <Card title=\"Related API — MDN\" icon=\"book\" href=\"https://developer.mozilla.org/...\">\n Additional MDN reference\n </Card>\n</CardGroup>\n\n## Articles\n\n<CardGroup cols={2}>\n <Card title=\"Article Title\" icon=\"newspaper\" href=\"https://...\">\n Brief description of what the reader will learn from this article.\n </Card>\n [Aim for 4-6 high-quality articles]\n</CardGroup>\n\n## Videos\n\n<CardGroup cols={2}>\n <Card title=\"Video Title\" icon=\"video\" href=\"https://...\">\n Brief description of what the video covers.\n </Card>\n [Aim for 3-4 quality videos]\n</CardGroup>\n```\n\n---\n\n## SEO Guidelines\n\nSEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:\n\n- \"what is [concept] in JavaScript\"\n- \"how does [concept] work in JavaScript\" \n- \"[concept] JavaScript explained\"\n- \"[concept] JavaScript tutorial\"\n- \"JavaScript [concept] example\"\n\nEvery writing decision — from title to structure to word choice — should consider search intent.\n\n---\n\n### Target Keywords for Each Concept\n\nEach concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:\n\n| Keyword Type | Pattern | Example (DOM) |\n|--------------|---------|---------------|\n| **Primary** | [concept] + JavaScript | \"DOM JavaScript\", \"JavaScript DOM\" |\n| **What is** | what is [concept] in JavaScript | \"what is the DOM in JavaScript\" |\n| **How does** | how does [concept] work | \"how does the DOM work in JavaScript\" |\n| **How to** | how to [action] with [concept] | \"how to manipulate the DOM\" |\n| **Tutorial** | [concept] tutorial/guide/explained | \"DOM tutorial JavaScript\" |\n| **Comparison** | [concept] vs [related] | \"DOM vs virtual DOM\" |\n\n**More Keyword Cluster Examples:**\n\n<AccordionGroup>\n <Accordion title=\"Closures Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript closures\", \"closures in JavaScript\" |\n | What is | \"what is a closure in JavaScript\", \"what are closures\" |\n | How does | \"how do closures work in JavaScript\", \"how closures work\" |\n | Why use | \"why use closures JavaScript\", \"closure use cases\" |\n | Example | \"JavaScript closure example\", \"closure examples\" |\n | Interview | \"closure interview questions JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Promises Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript Promises\", \"Promises in JavaScript\" |\n | What is | \"what is a Promise in JavaScript\", \"what are Promises\" |\n | How does | \"how do Promises work\", \"how Promises work JavaScript\" |\n | How to | \"how to use Promises\", \"how to chain Promises\" |\n | Comparison | \"Promises vs callbacks\", \"Promises vs async await\" |\n | Error | \"Promise error handling\", \"Promise catch\" |\n </Accordion>\n \n <Accordion title=\"Event Loop Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript event loop\", \"event loop JavaScript\" |\n | What is | \"what is the event loop in JavaScript\" |\n | How does | \"how does the event loop work\", \"how event loop works\" |\n | Visual | \"event loop explained\", \"event loop visualization\" |\n | Related | \"call stack and event loop\", \"task queue JavaScript\" |\n </Accordion>\n \n <Accordion title=\"Call Stack Keyword Cluster\">\n | Type | Keywords |\n |------|----------|\n | Primary | \"JavaScript call stack\", \"call stack JavaScript\" |\n | What is | \"what is the call stack in JavaScript\" |\n | How does | \"how does the call stack work\" |\n | Error | \"call stack overflow JavaScript\", \"maximum call stack size exceeded\" |\n | Visual | \"call stack explained\", \"call stack visualization\" |\n </Accordion>\n</AccordionGroup>\n\n---\n\n### Title Tag Optimization\n\nThe frontmatter has **two title fields**:\n- `title` — The page's `<title>` tag (SEO, appears in search results)\n- `sidebarTitle` — The sidebar navigation text (cleaner, no \"JavaScript\" since we're on a JS site)\n\n**The Two-Title Pattern:**\n\n```mdx\n---\ntitle: \"Closures: How Functions Remember Their Scope in JavaScript\"\nsidebarTitle: \"Closures: How Functions Remember Their Scope\"\n---\n```\n\n- **`title`** ends with \"in JavaScript\" for SEO keyword placement\n- **`sidebarTitle`** omits \"JavaScript\" for cleaner navigation\n\n**Rules:**\n1. **50-60 characters** ideal length for `title` (Google truncates longer titles)\n2. **Concept name first** — lead with the topic, \"JavaScript\" comes at the end\n3. **Add a hook** — what will the reader understand or be able to do?\n4. **Be specific** — generic titles don't rank\n\n**Title Formulas That Work:**\n\n```\ntitle: \"[Concept]: [What You'll Understand] in JavaScript\"\nsidebarTitle: \"[Concept]: [What You'll Understand]\"\n\ntitle: \"[Concept]: [Benefit or Outcome] in JavaScript\"\nsidebarTitle: \"[Concept]: [Benefit or Outcome]\"\n```\n\n**Title Examples:**\n\n| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |\n|--------|---------------|----------------------------|\n| `\"Closures\"` | `\"Closures: How Functions Remember Their Scope in JavaScript\"` | `\"Closures: How Functions Remember Their Scope\"` |\n| `\"DOM\"` | `\"DOM: How Browsers Represent Web Pages in JavaScript\"` | `\"DOM: How Browsers Represent Web Pages\"` |\n| `\"Promises\"` | `\"Promises: Handling Async Operations in JavaScript\"` | `\"Promises: Handling Async Operations\"` |\n| `\"Call Stack\"` | `\"Call Stack: How Function Execution Works in JavaScript\"` | `\"Call Stack: How Function Execution Works\"` |\n| `\"Event Loop\"` | `\"Event Loop: How Async Code Actually Runs in JavaScript\"` | `\"Event Loop: How Async Code Actually Runs\"` |\n| `\"Scope\"` | `\"Scope and Closures: Variable Visibility in JavaScript\"` | `\"Scope and Closures: Variable Visibility\"` |\n| `\"this\"` | `\"this: How Context Binding Works in JavaScript\"` | `\"this: How Context Binding Works\"` |\n| `\"Prototype\"` | `\"Prototype Chain: Understanding Inheritance in JavaScript\"` | `\"Prototype Chain: Understanding Inheritance\"` |\n\n**Character Count Check:**\nBefore finalizing, verify your `title` length:\n- Under 50 chars: Consider adding more descriptive context\n- 50-60 chars: Perfect length\n- Over 60 chars: Will be truncated in search results — shorten it\n\n---\n\n### Meta Description Optimization\n\nThe `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.\n\n**Rules:**\n1. **150-160 characters** maximum (Google truncates longer descriptions)\n2. **Include primary keyword** in the first half\n3. **Include secondary keywords** naturally if space allows\n4. **Start with an action word** — \"Learn\", \"Understand\", \"Discover\" (avoid \"Master\" — sounds AI-generated)\n5. **Promise specific value** — what will they learn?\n6. **End with a hook** — give them a reason to click\n\n**Description Formula:**\n\n```\n[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].\n```\n\n**Description Examples:**\n\n| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |\n|---------|----------------------|--------------------------------|\n| DOM | `\"Understanding the DOM\"` | `\"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering.\"` |\n| Closures | `\"Functions that remember\"` | `\"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns.\"` |\n| Promises | `\"Async JavaScript\"` | `\"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code.\"` |\n| Event Loop | `\"How async works\"` | `\"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking.\"` |\n| Call Stack | `\"Function execution\"` | `\"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack.\"` |\n| this | `\"Understanding this\"` | `\"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind.\"` |\n\n**Character Count Check:**\n- Under 120 chars: You're leaving value on the table — add more specifics\n- 150-160 chars: Optimal length\n- Over 160 chars: Will be truncated — edit ruthlessly\n\n---\n\n### Keyword Placement Strategy\n\nKeywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.\n\n**Priority Placement Locations:**\n\n| Priority | Location | How to Include |\n|----------|----------|----------------|\n| 🔴 Critical | Title | Primary keyword in first half |\n| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |\n| 🔴 Critical | First paragraph | Natural mention within first 100 words |\n| 🟠 High | H2 headings | Question-format headings with keywords |\n| 🟠 High | \"What you'll learn\" box | Topic-related phrases |\n| 🟡 Medium | H3 subheadings | Related keywords and concepts |\n| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |\n| 🟢 Good | Alt text | If using images, include keywords |\n\n**Example: Keyword Placement for DOM Page**\n\n```mdx\n---\ntitle: \"DOM: How Browsers Represent Web Pages in JavaScript\" ← 🔴 Primary: \"in JavaScript\" at end\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\" ← Sidebar: no \"JavaScript\"\ndescription: \"Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: \"DOM works in JavaScript\"\nhow browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: \"manipulate elements\"\nelements, traverse nodes, and optimize rendering.\"\n---\n\nHow does JavaScript change what you see on a webpage? ← Hook question\nThe **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph\nfor web documents. It represents your HTML as a **tree of \nobjects** that JavaScript can read and manipulate.\n\n<Info>\n**What you'll learn in this guide:** ← 🟠 Topic reinforcement\n- What the DOM actually is\n- How to select elements (getElementById vs querySelector) ← Secondary keywords\n- How to traverse the DOM tree\n- How to create, modify, and remove elements ← \"DOM\" implicit\n- How browsers render the DOM (Critical Rendering Path)\n</Info>\n\n## What is the DOM in JavaScript? ← 🟠 H2 with question keyword\n\nThe DOM (Document Object Model) is... ← Natural repetition\n\n## How the DOM Works ← 🟠 H2 with \"how\" keyword\n\n## DOM Manipulation Methods ← 🟡 H3 with related keyword\n\n## Key Takeaways ← 🟡 Reinforce in summary\n```\n\n**Warning Signs of Keyword Stuffing:**\n- Same exact phrase appears more than 3-4 times per 1000 words\n- Sentences read awkwardly because keywords were forced in\n- Using keywords where pronouns (\"it\", \"they\", \"this\") would be natural\n\n---\n\n### Answering Search Intent\n\nGoogle ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.\n\n**The First Paragraph Rule:**\n\nThe first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.\n\n```mdx\n<!-- ❌ BAD: Builds up to the answer -->\n## What is the Event Loop?\n\nBefore we can understand the event loop, we need to talk about JavaScript's \nsingle-threaded nature. You see, JavaScript can only do one thing at a time, \nand this creates some interesting challenges. The way JavaScript handles \nthis is through something called... the event loop.\n\n<!-- ✓ GOOD: Answers immediately -->\n## What is the Event Loop?\n\nThe **event loop** is JavaScript's mechanism for executing code, handling events, \nand managing asynchronous operations. It continuously monitors the call stack \nand task queue, moving queued callbacks to the stack when it's empty — this is \nhow JavaScript handles async code despite being single-threaded.\n```\n\n**Question-Format H2 Headings:**\n\nUse H2s that match how people search:\n\n| Search Query | H2 to Use |\n|--------------|-----------|\n| \"what is the DOM\" | `## What is the DOM?` |\n| \"how closures work\" | `## How Do Closures Work?` |\n| \"why use promises\" | `## Why Use Promises?` |\n| \"when to use async await\" | `## When Should You Use async/await?` |\n\n---\n\n### Featured Snippet Optimization\n\nFeatured snippets appear at **position zero** — above all organic results. Structure your content to win them.\n\n**Snippet Types and How to Win Them:**\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ FEATURED SNIPPET TYPES │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │\n│ ─────────── ────────────── ───────────────────────── │\n│ │\n│ \"What is X\" Paragraph 40-60 word definition │\n│ immediately after H2 │\n│ │\n│ \"How to X\" Numbered list <Steps> component or │\n│ numbered Markdown list │\n│ │\n│ \"X vs Y\" Table Comparison table with │\n│ clear column headers │\n│ │\n│ \"Types of X\" Bulleted list Bullet list under │\n│ descriptive H2 │\n│ │\n│ \"[X] examples\" Bulleted list or Code examples with │\n│ code block brief explanations │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Pattern 1: Definition Snippet (40-60 words)**\n\nFor \"what is [concept]\" queries:\n\n```mdx\n## What is a Closure in JavaScript?\n\nA **closure** is a function that retains access to variables from its outer \n(enclosing) scope, even after that outer function has finished executing. \nClosures are created every time a function is created in JavaScript, allowing \ninner functions to \"remember\" and access their lexical environment.\n```\n\n**Why this wins:**\n- H2 matches search query exactly\n- Bold keyword in first sentence\n- 40-60 word complete definition\n- Explains the \"why\" not just the \"what\"\n\n**Pattern 2: List Snippet (Steps)**\n\nFor \"how to [action]\" queries:\n\n```mdx\n## How to Make a Fetch Request in JavaScript\n\n<Steps>\n <Step title=\"1. Call fetch() with the URL\">\n The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.\n </Step>\n \n <Step title=\"2. Check if the response was successful\">\n Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.\n </Step>\n \n <Step title=\"3. Parse the response body\">\n Use `response.json()` for JSON data, `response.text()` for plain text.\n </Step>\n \n <Step title=\"4. Handle errors properly\">\n Wrap everything in try/catch to handle both network and HTTP errors.\n </Step>\n</Steps>\n```\n\n**Pattern 3: Table Snippet (Comparison)**\n\nFor \"[X] vs [Y]\" queries:\n\n```mdx\n## == vs === in JavaScript\n\n| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |\n|--------|----------------------|------------------------|\n| Type coercion | Yes — converts types before comparing | No — types must match |\n| Speed | Slower (coercion overhead) | Faster (no coercion) |\n| Predictability | Can produce surprising results | Always predictable |\n| Recommendation | Avoid in most cases | Use by default |\n\n```javascript\n// Examples\n5 == \"5\" // true (string coerced to number)\n5 === \"5\" // false (different types)\n```\n```\n\n**Pattern 4: List Snippet (Types/Categories)**\n\nFor \"types of [concept]\" queries:\n\n```mdx\n## Types of Scope in JavaScript\n\nJavaScript has three types of scope that determine where variables are accessible:\n\n- **Global Scope** — Variables declared outside any function or block; accessible everywhere\n- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function\n- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block\n```\n\n---\n\n### Content Structure for SEO\n\nHow you structure content affects both rankings and user experience.\n\n**The Inverted Pyramid:**\n\nPut the most important information first. Search engines and users both prefer content that answers questions immediately.\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE INVERTED PYRAMID │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ │\n│ ┌─────────────────────────────────────┐ │\n│ │ ANSWER THE QUESTION │ ← First 100 words │\n│ │ Definition + Core Concept │ (most important) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌────────────────┴────────────────┐ │\n│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │\n│ │ Mechanism + Visual Diagram │ (supporting info) │\n│ └────────────────┬─────────────────┘ │\n│ │ │\n│ ┌──────────────────┴──────────────────┐ │\n│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │\n│ │ Code + Step-by-step │ (proof it works) │\n│ └──────────────────┬──────────────────┘ │\n│ │ │\n│ ┌──────────────────────┴──────────────────────┐ │\n│ │ COVER EDGE CASES │ ← Advanced │\n│ │ Common mistakes, gotchas │ (depth) │\n│ └──────────────────────┬──────────────────────┘ │\n│ │ │\n│ ┌──────────────────────────┴──────────────────────────┐ │\n│ │ ADDITIONAL RESOURCES │ ← External │\n│ │ Related concepts, articles, videos │ (links) │\n│ └──────────────────────────────────────────────────────┘ │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Scannable Content Patterns:**\n\nGoogle favors content that's easy to scan. Use these elements:\n\n| Element | SEO Benefit | When to Use |\n|---------|-------------|-------------|\n| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |\n| Bullet lists | Often become featured snippets | Lists of 3+ items |\n| Numbered lists | \"How to\" snippet potential | Sequential steps |\n| Tables | High snippet potential | Comparisons, reference data |\n| Bold text | Highlights keywords for crawlers | First mention of key terms |\n| Headings (H2/H3) | Structure signals to Google | Every major topic shift |\n\n**Content Length Guidelines:**\n\n| Length | Assessment | Action |\n|--------|------------|--------|\n| Under 1,000 words | Too thin | Add more depth, examples, edge cases |\n| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |\n| 1,500-2,500 words | Good | Standard for most concept pages |\n| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |\n| Over 4,000 words | Evaluate | Consider splitting into multiple pages |\n\n**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.\n\n---\n\n### Internal Linking for SEO\n\nInternal links help search engines understand your site structure and distribute page authority.\n\n**Topic Cluster Strategy:**\n\nThink of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:\n\n```\n ┌─────────────────┐\n ┌───────│ Promises │───────┐\n │ └────────┬────────┘ │\n │ │ │\n ▼ ▼ ▼\n ┌───────────┐ ┌───────────────┐ ┌─────────────┐\n │async/await│◄──►│ Event Loop │◄──►│ Callbacks │\n └───────────┘ └───────────────┘ └─────────────┘\n │ │ │\n │ ▼ │\n │ ┌───────────────┐ │\n └──────►│ Call Stack │◄───────┘\n └───────────────┘\n```\n\n**Link Placement Guidelines:**\n\n1. **In Prerequisites (Warning box):**\n```mdx\n<Warning>\n**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.\n</Warning>\n```\n\n2. **In Body Content (natural context):**\n```mdx\nWhen the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).\n```\n\n3. **In Related Concepts Section:**\n```mdx\n<CardGroup cols={2}>\n <Card title=\"Promises\" icon=\"handshake\" href=\"/concepts/promises\">\n async/await is built on top of Promises\n </Card>\n <Card title=\"Event Loop\" icon=\"arrows-spin\" href=\"/concepts/event-loop\">\n How JavaScript manages async operations\n </Card>\n</CardGroup>\n```\n\n**Anchor Text Best Practices:**\n\n| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |\n|-------------------|-------------------|-----|\n| \"click here\" | \"event loop guide\" | Descriptive, includes keyword |\n| \"this article\" | \"our Promises concept\" | Tells Google what page is about |\n| \"here\" | \"JavaScript closures\" | Keywords in anchor text |\n| \"read more\" | \"understanding the call stack\" | Natural, informative |\n\n---\n\n### URL and Slug Best Practices\n\nURLs (slugs) are a minor but meaningful ranking factor.\n\n**Rules:**\n1. **Use lowercase** — `closures` not `Closures`\n2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`\n3. **Keep it short** — aim for 3-5 words maximum\n4. **Include primary keyword** — the concept name\n5. **Avoid stop words** — skip \"the\", \"and\", \"in\", \"of\" unless necessary\n\n**Slug Examples:**\n\n| Concept | ❌ Avoid | ✓ Use |\n|---------|---------|-------|\n| The Event Loop | `the-event-loop` | `event-loop` |\n| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |\n| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |\n| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |\n\n**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.\n\n---\n\n### Opening Paragraph: The SEO Power Move\n\nThe opening paragraph is prime SEO real estate. It should:\n1. Hook the reader with a question they're asking\n2. Include the primary keyword naturally\n3. Provide a brief definition or answer\n4. Set up what they'll learn\n\n**Template:**\n\n```mdx\n[Question hook that matches search intent?] [Maybe another question?]\n\nThe **[Primary Keyword]** is [brief definition that answers \"what is X\"]. \n[One sentence explaining why it matters or what it enables].\n\n```javascript\n// Immediately show a simple example\n```\n\n[Brief transition to \"What you'll learn\" box]\n```\n\n**Example (Closures):**\n\n```mdx\nWhy do some functions seem to \"remember\" variables that should have disappeared? \nHow can a callback still access variables from a function that finished running \nlong ago?\n\nThe answer is **closures** — one of JavaScript's most powerful (and often \nmisunderstood) features. A closure is a function that retains access to its \nouter scope's variables, even after that outer scope has finished executing.\n\n```javascript\nfunction createCounter() {\n let count = 0 // This variable is \"enclosed\" by the returned function\n return function() {\n count++\n return count\n }\n}\n\nconst counter = createCounter()\nconsole.log(counter()) // 1\nconsole.log(counter()) // 2 — it remembers!\n```\n\nUnderstanding closures unlocks patterns like private variables, factory functions, \nand the module pattern that power modern JavaScript.\n```\n\n**Why this works for SEO:**\n- Question hooks match how people search (\"why do functions remember\")\n- Bold keyword in first paragraph\n- Direct definition answers \"what is a closure\"\n- Code example demonstrates immediately\n- Natural setup for learning objectives\n\n---\n\n## Inline Linking Rules (Critical!)\n\n### Always Link to MDN\n\nWhenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.\n\n```mdx\n<!-- ✓ CORRECT: Link on first mention -->\nThe **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.\n\nThe **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.\n\nMost modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.\n\n<!-- ❌ WRONG: No links -->\nThe Fetch API is JavaScript's modern way to make network requests.\n```\n\n### Link to Related Concept Pages\n\nWhen mentioning concepts covered in other pages, link to them:\n\n```mdx\n<!-- ✓ CORRECT: Internal links to related concepts -->\nIf you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.\n\nThis guide assumes you understand [Promises](/concepts/promises).\n\n<!-- ❌ WRONG: No internal links -->\nIf you're not familiar with async/await, you should learn that first.\n```\n\n### Common MDN Link Patterns\n\n| Concept | MDN URL Pattern |\n|---------|-----------------|\n| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |\n| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |\n| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |\n| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |\n| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |\n\n---\n\n## Code Examples Best Practices\n\n### 1. Start with the Simplest Possible Example\n\n```javascript\n// ✓ GOOD: Start with the absolute basics\n// This is how you fetch data in JavaScript\nconst response = await fetch('https://api.example.com/users/1')\nconst user = await response.json()\nconsole.log(user.name) // \"Alice\"\n```\n\n### 2. Use Step-by-Step Comments\n\n```javascript\n// Step 1: fetch() returns a Promise that resolves to a Response object\nconst responsePromise = fetch('https://api.example.com/users')\n\n// Step 2: When the response arrives, we get a Response object\nresponsePromise.then(response => {\n console.log(response.status) // 200\n \n // Step 3: The body is a stream, we need to parse it\n return response.json()\n})\n.then(data => {\n // Step 4: Now we have the actual data\n console.log(data)\n})\n```\n\n### 3. Show Output in Comments\n\n```javascript\nconst greeting = \"Hello\"\nconsole.log(typeof greeting) // \"string\"\n\nconst numbers = [1, 2, 3]\nconsole.log(numbers.length) // 3\n```\n\n### 4. Use ❌ and ✓ for Wrong/Correct Patterns\n\n```javascript\n// ❌ WRONG - This misses HTTP errors!\ntry {\n const response = await fetch('/api/users/999')\n const data = await response.json()\n} catch (error) {\n // Only catches NETWORK errors, not 404s!\n}\n\n// ✓ CORRECT - Check response.ok\ntry {\n const response = await fetch('/api/users/999')\n \n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`)\n }\n \n const data = await response.json()\n} catch (error) {\n // Now catches both network AND HTTP errors\n}\n```\n\n### 5. Use Meaningful Variable Names\n\n```javascript\n// ❌ BAD\nconst x = [1, 2, 3]\nconst y = x.map(z => z * 2)\n\n// ✓ GOOD\nconst numbers = [1, 2, 3]\nconst doubled = numbers.map(num => num * 2)\n```\n\n### 6. Progress from Simple to Complex\n\n```javascript\n// Level 1: Basic usage\nfetch('/api/users')\n\n// Level 2: With options\nfetch('/api/users', {\n method: 'POST',\n body: JSON.stringify({ name: 'Alice' })\n})\n\n// Level 3: Full real-world pattern\nasync function createUser(userData) {\n const response = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(userData)\n })\n \n if (!response.ok) {\n throw new Error(`Failed to create user: ${response.status}`)\n }\n \n return response.json()\n}\n```\n\n---\n\n## Resource Curation Guidelines\n\nExternal resources (articles, videos) are valuable, but must meet quality standards.\n\n### Quality Standards\n\nOnly include resources that are:\n\n1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar\n2. **Still accessible** — Verify all links work before publishing\n3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)\n4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics\n5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns\n\n### Writing Resource Descriptions\n\nEach resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.\n\n```mdx\n<!-- ❌ Generic (bad) -->\n<Card title=\"JavaScript Promises Tutorial\" icon=\"newspaper\" href=\"...\">\n Learn about Promises in JavaScript.\n</Card>\n\n<!-- ❌ Generic (bad) -->\n<Card title=\"Async/Await Explained\" icon=\"newspaper\" href=\"...\">\n A comprehensive guide to async/await.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Async/Await Tutorial\" icon=\"newspaper\" href=\"https://javascript.info/async-await\">\n The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"JavaScript Visualized: Promises & Async/Await\" icon=\"newspaper\" href=\"...\">\n Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally \"clicked\" for thousands of developers.\n</Card>\n\n<!-- ✓ Specific (good) -->\n<Card title=\"How to Escape Async/Await Hell\" icon=\"newspaper\" href=\"...\">\n The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.\n</Card>\n```\n\n**Description Formula:**\n1. **Sentence 1:** What makes this resource unique OR what it specifically covers\n2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)\n\n**Avoid in descriptions:**\n- \"Comprehensive guide to...\" (vague)\n- \"Great tutorial on...\" (vague) \n- \"Learn all about...\" (vague)\n- \"Everything you need to know about...\" (cliché)\n\n### Recommended Sources\n\n**Articles (Prioritize):**\n\n| Source | Why |\n|--------|-----|\n| javascript.info | Comprehensive, well-maintained, exercises included |\n| MDN Web Docs | Official reference, always accurate |\n| freeCodeCamp | Beginner-friendly, practical tutorials |\n| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |\n| CSS-Tricks | DOM, browser APIs, visual topics |\n\n**Videos (Prioritize):**\n\n| Creator | Style |\n|---------|-------|\n| Web Dev Simplified | Clear, beginner-friendly, concise |\n| Fireship | Fast-paced, modern, entertaining |\n| Traversy Media | Comprehensive crash courses |\n| Fun Fun Function | Deep-dives with personality |\n| Wes Bos | Practical, real-world focused |\n\n**Avoid:**\n- Resources in other programming languages (C#, Python, Java) even if concepts overlap\n- Outdated tutorials (pre-ES6 syntax for modern concepts)\n- Paywalled content (unless there's a free tier)\n- Low-quality Medium articles (check engagement and accuracy)\n- Resources that teach anti-patterns\n- Videos over 2 hours (link to specific timestamps if valuable)\n\n### Verifying Resources\n\nBefore including any resource:\n\n1. **Click the link** — Verify it loads and isn't behind a paywall\n2. **Skim the content** — Ensure it's accurate and well-written\n3. **Check the date** — For time-sensitive topics, prefer recent content\n4. **Read comments/reactions** — Community feedback reveals quality issues\n5. **Test code examples** — If they include code, verify it works\n\n---\n\n## ASCII Art Diagrams\n\nUse ASCII art to visualize concepts. Make them boxed and labeled:\n\n```\n┌─────────────────────────────────────────────────────────────────────────┐\n│ THE REQUEST-RESPONSE CYCLE │\n├─────────────────────────────────────────────────────────────────────────┤\n│ │\n│ YOU (Browser) KITCHEN (Server) │\n│ ┌──────────┐ ┌──────────────┐ │\n│ │ │ ──── \"I'd like pasta\" ────► │ │ │\n│ │ :) │ (REQUEST) │ [chef] │ │\n│ │ │ │ │ │\n│ │ │ ◄──── Here you go! ──────── │ │ │\n│ │ │ (RESPONSE) │ │ │\n│ └──────────┘ └──────────────┘ │\n│ │\n│ The waiter (HTTP) is the protocol that makes this exchange work! │\n│ │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Mintlify Components Reference\n\n| Component | When to Use |\n|-----------|-------------|\n| `<Info>` | \"What you'll learn\" boxes, Key Takeaways |\n| `<Warning>` | Common mistakes, gotchas, prerequisites |\n| `<Tip>` | Pro tips, rules of thumb, best practices |\n| `<Note>` | Additional context, side notes |\n| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |\n| `<Tabs>` | Comparing different approaches side-by-side |\n| `<Steps>` | Sequential processes, numbered workflows |\n| `<CardGroup>` | Resource links (articles, videos, references) |\n| `<Card>` | Individual resource with icon and link |\n\n### Card Icons Reference\n\n| Content Type | Icon |\n|--------------|------|\n| MDN/Official Docs | `book` |\n| Articles/Blog Posts | `newspaper` |\n| Videos | `video` |\n| Courses | `graduation-cap` |\n| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |\n\n---\n\n## Quality Checklist\n\nBefore finalizing a concept page, verify ALL of these:\n\n### Structure\n- [ ] Opens with engaging questions that hook the reader\n- [ ] Shows a simple code example immediately after the opening\n- [ ] Has \"What you'll learn\" Info box right after the opening\n- [ ] Major sections are separated by `---` horizontal rules\n- [ ] Has a real-world analogy with ASCII art diagram\n- [ ] Has a \"Common Mistakes\" or \"The #1 Mistake\" section\n- [ ] Has a \"Key Takeaways\" section summarizing 8-10 points\n- [ ] Has a \"Test Your Knowledge\" section with 5-6 Q&As\n- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order\n\n### Linking\n- [ ] All new Web APIs/methods have inline MDN links on first mention\n- [ ] All related concepts link to their concept pages (`/concepts/slug`)\n- [ ] Reference section has multiple MDN links\n- [ ] 4-6 quality articles with descriptions\n- [ ] 3-4 quality videos with descriptions\n\n### Code Examples\n- [ ] First code example is dead simple\n- [ ] Uses step-by-step comments for complex examples\n- [ ] Shows output in comments (`// \"result\"`)\n- [ ] Uses ❌ and ✓ for wrong/correct patterns\n- [ ] Uses meaningful variable names\n- [ ] Progresses from simple to complex\n\n### Content Quality\n- [ ] Written for someone who might be new to coding\n- [ ] Prerequisites are noted with Warning component\n- [ ] No assumptions about prior knowledge without links\n- [ ] Tables used for quick reference information\n- [ ] ASCII diagrams for visual concepts\n\n### Language Quality\n- [ ] Description starts with \"Learn\" or \"Understand\" (not \"Master\")\n- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)\n- [ ] No AI superlatives: \"dramatically\", \"fundamentally\", \"incredibly\", \"extremely\"\n- [ ] No stiff phrases: \"one of the most important\", \"essential points\", \"It should be noted\"\n- [ ] Emphasis patterns vary (not\n\n<!-- [TRUNCATED AT 50KB] -->\n</yakaai_skills>"}