write-concept — скилл для Claude Code: документация JavaScript

---
name: write-concept
description: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines
---

# Skill: Write JavaScript Concept Documentation

Use this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.

## When to Use

- Creating a new concept page in `/docs/concepts/`
- Rewriting or significantly improving an existing concept page
- Reviewing an existing concept page for quality and completeness
- Adding explanatory content to a concept

## Target Audience

Remember: **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.

## Writing Guidelines

### Voice and Tone

- **Conversational but authoritative**: Write like you're explaining to a smart friend
- **Encouraging**: Make complex topics feel approachable
- **Practical**: Focus on real-world applications and use cases
- **Concise**: Respect the reader's time; avoid unnecessary verbosity
- **Question-driven**: Open sections with questions the reader might have

### Avoiding AI-Generated Language

Your writing must sound human, not AI-generated. Here are specific patterns to avoid:

#### Words and Phrases to Avoid

| ❌ Avoid | ✓ Use Instead |
|----------|---------------|
| "Master [concept]" | "Learn [concept]" |
| "dramatically easier/better" | "much easier" or "cleaner" |
| "one fundamental thing" | "one simple thing" |
| "one of the most important concepts" | "This is a big one" |
| "essential points" | "key things to remember" |
| "understanding X deeply improves" | "knowing X well makes Y easier" |
| "To truly understand" | "Let's look at" or "Here's how" |
| "This is crucial" | "This trips people up" |
| "It's worth noting that" | Just state the thing directly |
| "It's important to remember" | "Don't forget:" or "Remember:" |
| "In order to" | "To" |
| "Due to the fact that" | "Because" |
| "At the end of the day" | Remove entirely |
| "When it comes to" | Remove or rephrase |
| "In this section, we will" | Just start explaining |
| "As mentioned earlier" | Remove or link to the section |

#### Repetitive Emphasis Patterns

Don't use the same lead-in pattern repeatedly. Vary your emphasis:

| Instead of repeating... | Vary with... |
|------------------------|--------------|
| "Key insight:" | "Don't forget:", "The pattern:", "Here's the thing:" |
| "Best practice:" | "Pro tip:", "Quick check:", "A good habit:" |
| "Important:" | "Watch out:", "Heads up:", "Note:" |
| "Remember:" | "Keep in mind:", "The rule:", "Think of it this way:" |

#### Em Dash (—) Overuse

AI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:

| ❌ Em Dash Overuse | ✓ Better Alternative |
|-------------------|---------------------|
| "async/await — syntactic sugar that..." | "async/await. It's syntactic sugar that..." |
| "understand Promises — async/await is built..." | "understand Promises. async/await is built..." |
| "doesn't throw an error — you just get..." | "doesn't throw an error. You just get..." |
| "outside of async functions — but only in..." | "outside of async functions, but only in..." |
| "Fails fast — if any Promise rejects..." | "Fails fast. If any Promise rejects..." |
| "achieve the same thing — the choice..." | "achieve the same thing. The choice..." |

**When em dashes ARE acceptable:**
- In Key Takeaways section (consistent formatting for the numbered list)
- In MDN card titles (e.g., "async function — MDN")
- In interview answer step-by-step explanations (structured formatting)
- Sparingly when a true parenthetical aside reads naturally

**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.

#### Superlatives and Filler Words

Avoid vague superlatives that add no information:

| ❌ Avoid | ✓ Use Instead |
|----------|---------------|
| "dramatically" | "much" or remove entirely |
| "fundamentally" | "simply" or be specific about what's fundamental |
| "incredibly" | remove or be specific |
| "extremely" | remove or be specific |
| "absolutely" | remove |
| "basically" | remove (if you need it, you're not explaining clearly) |
| "essentially" | remove or just explain directly |
| "very" | remove or use a stronger word |
| "really" | remove |
| "actually" | remove (unless correcting a misconception) |
| "In fact" | remove (just state the fact) |
| "Interestingly" | remove (let the reader decide if it's interesting) |

#### Stiff/Formal Phrases

Replace formal academic-style phrases with conversational alternatives:

| ❌ Stiff | ✓ Conversational |
|---------|------------------|
| "It should be noted that" | "Note that" or just state it |
| "One might wonder" | "You might wonder" |
| "This enables developers to" | "This lets you" |
| "The aforementioned" | "this" or name it again |
| "Subsequently" | "Then" or "Next" |
| "Utilize" | "Use" |
| "Commence" | "Start" |
| "Prior to" | "Before" |
| "In the event that" | "If" |
| "A considerable amount of" | "A lot of" or "Many" |

#### Playful Touches (Use Sparingly)

Add occasional human touches to make the content feel less robotic, but don't overdo it:

```javascript
// ✓ Good: One playful comment per section
// Callback hell - nested so deep you need a flashlight

// ✓ Good: Conversational aside  
// forEach and async don't play well together — it just fires and forgets:

// ✓ Good: Relatable frustration
// Finally, error handling that doesn't make you want to flip a table.

// ❌ Bad: Trying too hard
// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝

// ❌ Bad: Forced humor
// Let's dive into the AMAZING world of Promises! 🎉🚀
```

**Guidelines:**
- One or two playful touches per major section is enough
- Humor should arise naturally from the content
- Avoid emojis in body text (they're fine in comments occasionally)
- Don't explain your jokes
- If a playful line doesn't work, just be direct instead

### Page Structure (Follow This Exactly)

Every concept page MUST follow this structure in this exact order:

```mdx
---
title: "Concept Name: [Hook] in JavaScript"
sidebarTitle: "Concept Name: [Hook]"
description: "SEO-friendly description in 150-160 characters starting with action word"
---

[Opening hook - Start with engaging questions that make the reader curious]
[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?"]

[Immediately show a simple code example demonstrating the concept]

```javascript
// This is how you [do the thing] in JavaScript
const example = doSomething()
console.log(example)  // Expected output
```

[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]

<Info>
**What you'll learn in this guide:**
- Key learning outcome 1
- Key learning outcome 2
- Key learning outcome 3
- Key learning outcome 4 (aim for 5-7 items)
</Info>

<Warning>
[Optional: Prerequisites or important notices - place AFTER Info box]
**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!
</Warning>

---

## [First Major Section - e.g., "What is X?"]

[Core explanation with inline MDN links for any new terms/APIs introduced]

[Optional: CardGroup with MDN reference links for this section]

---

## [Analogy Section - e.g., "The Restaurant Analogy"]

[Relatable real-world analogy that makes the concept click]

[ASCII art diagram visualizing the concept]

```
┌─────────────────────────────────────────────────────────────────────────┐
│                          DIAGRAM TITLE                                   │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│    [Visual representation of the concept]                                │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘
```

---

## [Core Concepts Section]

[Deep dive with code examples, tables, and Mintlify components]

<Steps>
  <Step title="Step 1">
    Explanation of the first step
  </Step>
  <Step title="Step 2">
    Explanation of the second step
  </Step>
</Steps>

<AccordionGroup>
  <Accordion title="Subtopic 1">
    Detailed explanation with code examples
  </Accordion>
  <Accordion title="Subtopic 2">
    Detailed explanation with code examples
  </Accordion>
</AccordionGroup>

<Tip>
**Quick Rule of Thumb:** [Memorable summary or mnemonic]
</Tip>

---

## [The API/Implementation Section]

[How to actually use the concept in code]

### Basic Usage

```javascript
// Basic example with step-by-step comments
// Step 1: Do this
const step1 = something()

// Step 2: Then this
const step2 = somethingElse(step1)

// Step 3: Finally
console.log(step2)  // Expected output
```

### [Advanced Pattern]

```javascript
// More complex real-world example
```

---

## [Common Mistakes Section - e.g., "The #1 Fetch Mistake"]

[Highlight the most common mistake developers make]

```
┌─────────────────────────────────────────────────────────────────────────┐
│                         VISUAL COMPARISON                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  WRONG WAY                           RIGHT WAY                           │
│  ─────────                           ─────────                           │
│  • Problem 1                         • Solution 1                        │
│  • Problem 2                         • Solution 2                        │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘
```

```javascript
// ❌ WRONG - Explanation of why this is wrong
const bad = wrongApproach()

// ✓ CORRECT - Explanation of the right way
const good = correctApproach()
```

<Warning>
**The Trap:** [Clear explanation of what goes wrong and why]
</Warning>

---

## [Advanced Patterns Section]

[Real-world patterns and best practices]

### Pattern Name

```javascript
// Reusable pattern with practical application
async function realWorldExample() {
  // Implementation
}

// Usage
const result = await realWorldExample()
```

---

## Key Takeaways

<Info>
**The key things to remember:**

1. **First key point** — Brief explanation

2. **Second key point** — Brief explanation

3. **Third key point** — Brief explanation

4. **Fourth key point** — Brief explanation

5. **Fifth key point** — Brief explanation

[Aim for 8-10 key takeaways that summarize everything]
</Info>

---

## Test Your Knowledge

<AccordionGroup>
  <Accordion title="Question 1: [Specific question about the concept]">
    **Answer:**
    
    [Clear explanation]
    
    ```javascript
    // Code example demonstrating the answer
    ```
  </Accordion>
  
  <Accordion title="Question 2: [Another question]">
    **Answer:**
    
    [Clear explanation with code if needed]
  </Accordion>
  
  [Aim for 5-6 questions covering the main topics]
</AccordionGroup>

---

## Related Concepts

<CardGroup cols={2}>
  <Card title="Related Concept 1" icon="icon-name" href="/concepts/slug">
    How it connects to this concept
  </Card>
  <Card title="Related Concept 2" icon="icon-name" href="/concepts/slug">
    How it connects to this concept
  </Card>
</CardGroup>

---

## Reference

<CardGroup cols={2}>
  <Card title="Main Topic — MDN" icon="book" href="https://developer.mozilla.org/...">
    Official MDN documentation for the main concept
  </Card>
  <Card title="Related API — MDN" icon="book" href="https://developer.mozilla.org/...">
    Additional MDN reference
  </Card>
</CardGroup>

## Articles

<CardGroup cols={2}>
  <Card title="Article Title" icon="newspaper" href="https://...">
    Brief description of what the reader will learn from this article.
  </Card>
  [Aim for 4-6 high-quality articles]
</CardGroup>

## Videos

<CardGroup cols={2}>
  <Card title="Video Title" icon="video" href="https://...">
    Brief description of what the video covers.
  </Card>
  [Aim for 3-4 quality videos]
</CardGroup>
```

---

## SEO Guidelines

SEO (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:

- "what is [concept] in JavaScript"
- "how does [concept] work in JavaScript"  
- "[concept] JavaScript explained"
- "[concept] JavaScript tutorial"
- "JavaScript [concept] example"

Every writing decision — from title to structure to word choice — should consider search intent.

---

### Target Keywords for Each Concept

Each concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:

| Keyword Type | Pattern | Example (DOM) |
|--------------|---------|---------------|
| **Primary** | [concept] + JavaScript | "DOM JavaScript", "JavaScript DOM" |
| **What is** | what is [concept] in JavaScript | "what is the DOM in JavaScript" |
| **How does** | how does [concept] work | "how does the DOM work in JavaScript" |
| **How to** | how to [action] with [concept] | "how to manipulate the DOM" |
| **Tutorial** | [concept] tutorial/guide/explained | "DOM tutorial JavaScript" |
| **Comparison** | [concept] vs [related] | "DOM vs virtual DOM" |

**More Keyword Cluster Examples:**

<AccordionGroup>
  <Accordion title="Closures Keyword Cluster">
    | Type | Keywords |
    |------|----------|
    | Primary | "JavaScript closures", "closures in JavaScript" |
    | What is | "what is a closure in JavaScript", "what are closures" |
    | How does | "how do closures work in JavaScript", "how closures work" |
    | Why use | "why use closures JavaScript", "closure use cases" |
    | Example | "JavaScript closure example", "closure examples" |
    | Interview | "closure interview questions JavaScript" |
  </Accordion>
  
  <Accordion title="Promises Keyword Cluster">
    | Type | Keywords |
    |------|----------|
    | Primary | "JavaScript Promises", "Promises in JavaScript" |
    | What is | "what is a Promise in JavaScript", "what are Promises" |
    | How does | "how do Promises work", "how Promises work JavaScript" |
    | How to | "how to use Promises", "how to chain Promises" |
    | Comparison | "Promises vs callbacks", "Promises vs async await" |
    | Error | "Promise error handling", "Promise catch" |
  </Accordion>
  
  <Accordion title="Event Loop Keyword Cluster">
    | Type | Keywords |
    |------|----------|
    | Primary | "JavaScript event loop", "event loop JavaScript" |
    | What is | "what is the event loop in JavaScript" |
    | How does | "how does the event loop work", "how event loop works" |
    | Visual | "event loop explained", "event loop visualization" |
    | Related | "call stack and event loop", "task queue JavaScript" |
  </Accordion>
  
  <Accordion title="Call Stack Keyword Cluster">
    | Type | Keywords |
    |------|----------|
    | Primary | "JavaScript call stack", "call stack JavaScript" |
    | What is | "what is the call stack in JavaScript" |
    | How does | "how does the call stack work" |
    | Error | "call stack overflow JavaScript", "maximum call stack size exceeded" |
    | Visual | "call stack explained", "call stack visualization" |
  </Accordion>
</AccordionGroup>

---

### Title Tag Optimization

The frontmatter has **two title fields**:
- `title` — The page's `<title>` tag (SEO, appears in search results)
- `sidebarTitle` — The sidebar navigation text (cleaner, no "JavaScript" since we're on a JS site)

**The Two-Title Pattern:**

```mdx
---
title: "Closures: How Functions Remember Their Scope in JavaScript"
sidebarTitle: "Closures: How Functions Remember Their Scope"
---
```

- **`title`** ends with "in JavaScript" for SEO keyword placement
- **`sidebarTitle`** omits "JavaScript" for cleaner navigation

**Rules:**
1. **50-60 characters** ideal length for `title` (Google truncates longer titles)
2. **Concept name first** — lead with the topic, "JavaScript" comes at the end
3. **Add a hook** — what will the reader understand or be able to do?
4. **Be specific** — generic titles don't rank

**Title Formulas That Work:**

```
title: "[Concept]: [What You'll Understand] in JavaScript"
sidebarTitle: "[Concept]: [What You'll Understand]"

title: "[Concept]: [Benefit or Outcome] in JavaScript"
sidebarTitle: "[Concept]: [Benefit or Outcome]"
```

**Title Examples:**

| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |
|--------|---------------|----------------------------|
| `"Closures"` | `"Closures: How Functions Remember Their Scope in JavaScript"` | `"Closures: How Functions Remember Their Scope"` |
| `"DOM"` | `"DOM: How Browsers Represent Web Pages in JavaScript"` | `"DOM: How Browsers Represent Web Pages"` |
| `"Promises"` | `"Promises: Handling Async Operations in JavaScript"` | `"Promises: Handling Async Operations"` |
| `"Call Stack"` | `"Call Stack: How Function Execution Works in JavaScript"` | `"Call Stack: How Function Execution Works"` |
| `"Event Loop"` | `"Event Loop: How Async Code Actually Runs in JavaScript"` | `"Event Loop: How Async Code Actually Runs"` |
| `"Scope"` | `"Scope and Closures: Variable Visibility in JavaScript"` | `"Scope and Closures: Variable Visibility"` |
| `"this"` | `"this: How Context Binding Works in JavaScript"` | `"this: How Context Binding Works"` |
| `"Prototype"` | `"Prototype Chain: Understanding Inheritance in JavaScript"` | `"Prototype Chain: Understanding Inheritance"` |

**Character Count Check:**
Before finalizing, verify your `title` length:
- Under 50 chars: Consider adding more descriptive context
- 50-60 chars: Perfect length
- Over 60 chars: Will be truncated in search results — shorten it

---

### Meta Description Optimization

The `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.

**Rules:**
1. **150-160 characters** maximum (Google truncates longer descriptions)
2. **Include primary keyword** in the first half
3. **Include secondary keywords** naturally if space allows
4. **Start with an action word** — "Learn", "Understand", "Discover" (avoid "Master" — sounds AI-generated)
5. **Promise specific value** — what will they learn?
6. **End with a hook** — give them a reason to click

**Description Formula:**

```
[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].
```

**Description Examples:**

| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |
|---------|----------------------|--------------------------------|
| 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."` |
| 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."` |
| 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."` |
| 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."` |
| 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."` |
| 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."` |

**Character Count Check:**
- Under 120 chars: You're leaving value on the table — add more specifics
- 150-160 chars: Optimal length
- Over 160 chars: Will be truncated — edit ruthlessly

---

### Keyword Placement Strategy

Keywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.

**Priority Placement Locations:**

| Priority | Location | How to Include |
|----------|----------|----------------|
| 🔴 Critical | Title | Primary keyword in first half |
| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |
| 🔴 Critical | First paragraph | Natural mention within first 100 words |
| 🟠 High | H2 headings | Question-format headings with keywords |
| 🟠 High | "What you'll learn" box | Topic-related phrases |
| 🟡 Medium | H3 subheadings | Related keywords and concepts |
| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |
| 🟢 Good | Alt text | If using images, include keywords |

**Example: Keyword Placement for DOM Page**

```mdx
---
title: "DOM: How Browsers Represent Web Pages in JavaScript"      ← 🔴 Primary: "in JavaScript" at end
sidebarTitle: "DOM: How Browsers Represent Web Pages"             ← Sidebar: no "JavaScript"
description: "Learn how the DOM works in JavaScript. Understand   ← 🔴 Primary: "DOM works in JavaScript"
how browsers represent HTML as a tree, select and manipulate      ← 🔴 Secondary: "manipulate elements"
elements, traverse nodes, and optimize rendering."
---

How does JavaScript change what you see on a webpage?             ← Hook question
The **Document Object Model (DOM)** is a programming interface    ← 🔴 Primary keyword in first paragraph
for web documents. It represents your HTML as a **tree of 
objects** that JavaScript can read and manipulate.

<Info>
**What you'll learn in this guide:**                              ← 🟠 Topic reinforcement
- What the DOM actually is
- How to select elements (getElementById vs querySelector)        ← Secondary keywords
- How to traverse the DOM tree
- How to create, modify, and remove elements                      ← "DOM" implicit
- How browsers render the DOM (Critical Rendering Path)
</Info>

## What is the DOM in JavaScript?                                 ← 🟠 H2 with question keyword

The DOM (Document Object Model) is...                             ← Natural repetition

## How the DOM Works                                              ← 🟠 H2 with "how" keyword

## DOM Manipulation Methods                                       ← 🟡 H3 with related keyword

## Key Takeaways                                                  ← 🟡 Reinforce in summary
```

**Warning Signs of Keyword Stuffing:**
- Same exact phrase appears more than 3-4 times per 1000 words
- Sentences read awkwardly because keywords were forced in
- Using keywords where pronouns ("it", "they", "this") would be natural

---

### Answering Search Intent

Google ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.

**The First Paragraph Rule:**

The first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.

```mdx
<!-- ❌ BAD: Builds up to the answer -->
## What is the Event Loop?

Before we can understand the event loop, we need to talk about JavaScript's 
single-threaded nature. You see, JavaScript can only do one thing at a time, 
and this creates some interesting challenges. The way JavaScript handles 
this is through something called... the event loop.

<!-- ✓ GOOD: Answers immediately -->
## What is the Event Loop?

The **event loop** is JavaScript's mechanism for executing code, handling events, 
and managing asynchronous operations. It continuously monitors the call stack 
and task queue, moving queued callbacks to the stack when it's empty — this is 
how JavaScript handles async code despite being single-threaded.
```

**Question-Format H2 Headings:**

Use H2s that match how people search:

| Search Query | H2 to Use |
|--------------|-----------|
| "what is the DOM" | `## What is the DOM?` |
| "how closures work" | `## How Do Closures Work?` |
| "why use promises" | `## Why Use Promises?` |
| "when to use async await" | `## When Should You Use async/await?` |

---

### Featured Snippet Optimization

Featured snippets appear at **position zero** — above all organic results. Structure your content to win them.

**Snippet Types and How to Win Them:**

```
┌─────────────────────────────────────────────────────────────────────────┐
│                      FEATURED SNIPPET TYPES                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  QUERY TYPE           SNIPPET FORMAT        YOUR CONTENT STRUCTURE       │
│  ───────────          ──────────────        ─────────────────────────    │
│                                                                          │
│  "What is X"          Paragraph             40-60 word definition        │
│                                             immediately after H2         │
│                                                                          │
│  "How to X"           Numbered list         <Steps> component or         │
│                                             numbered Markdown list       │
│                                                                          │
│  "X vs Y"             Table                 Comparison table with        │
│                                             clear column headers         │
│                                                                          │
│  "Types of X"         Bulleted list         Bullet list under            │
│                                             descriptive H2               │
│                                                                          │
│  "[X] examples"       Bulleted list or      Code examples with           │
│                       code block            brief explanations           │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘
```

**Pattern 1: Definition Snippet (40-60 words)**

For "what is [concept]" queries:

```mdx
## What is a Closure in JavaScript?

A **closure** is a function that retains access to variables from its outer 
(enclosing) scope, even after that outer function has finished executing. 
Closures are created every time a function is created in JavaScript, allowing 
inner functions to "remember" and access their lexical environment.
```

**Why this wins:**
- H2 matches search query exactly
- Bold keyword in first sentence
- 40-60 word complete definition
- Explains the "why" not just the "what"

**Pattern 2: List Snippet (Steps)**

For "how to [action]" queries:

```mdx
## How to Make a Fetch Request in JavaScript

<Steps>
  <Step title="1. Call fetch() with the URL">
    The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.
  </Step>
  
  <Step title="2. Check if the response was successful">
    Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.
  </Step>
  
  <Step title="3. Parse the response body">
    Use `response.json()` for JSON data, `response.text()` for plain text.
  </Step>
  
  <Step title="4. Handle errors properly">
    Wrap everything in try/catch to handle both network and HTTP errors.
  </Step>
</Steps>
```

**Pattern 3: Table Snippet (Comparison)**

For "[X] vs [Y]" queries:

```mdx
## == vs === in JavaScript

| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |
|--------|----------------------|------------------------|
| Type coercion | Yes — converts types before comparing | No — types must match |
| Speed | Slower (coercion overhead) | Faster (no coercion) |
| Predictability | Can produce surprising results | Always predictable |
| Recommendation | Avoid in most cases | Use by default |

```javascript
// Examples
5 == "5"    // true (string coerced to number)
5 === "5"   // false (different types)
```
```

**Pattern 4: List Snippet (Types/Categories)**

For "types of [concept]" queries:

```mdx
## Types of Scope in JavaScript

JavaScript has three types of scope that determine where variables are accessible:

- **Global Scope** — Variables declared outside any function or block; accessible everywhere
- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function
- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block
```

---

### Content Structure for SEO

How you structure content affects both rankings and user experience.

**The Inverted Pyramid:**

Put the most important information first. Search engines and users both prefer content that answers questions immediately.

```
┌─────────────────────────────────────────────────────────────────────────┐
│                        THE INVERTED PYRAMID                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│                                                                          │
│            ┌───────────────────────────────...