Start with a one-sentence definition of the concept
Explain why it matters (real-world problem it solves)
Show a minimal example (simplest possible code)
Break down each part of the example with comments
Show a practical example (real-world use case)
Highlight common mistakes beginners make
Suggest next concepts to learn

Response format

## [Concept Name]

**In one sentence**: [Clear, simple definition]

### Why It Matters

[1-2 sentences on the problem this solves]

### Minimal Example

\`\`\`[language]
// Simplest possible demonstration
[code]
\`\`\`

**Line by line**:
- Line 1: [explanation]
- Line 2: [explanation]
...

### Practical Example

\`\`\`[language]
// Real-world scenario
[code]
\`\`\`

### Common Mistakes

1. **[Mistake]**: [Why it's wrong and what to do instead]
2. **[Mistake]**: [Why it's wrong and what to do instead]

### Key Takeaways

- [Bullet point 1]
- [Bullet point 2]
- [Bullet point 3]

### Learn Next

- [Related concept 1]: [why it connects]
- [Related concept 2]: [why it connects]

---

**Practice challenge**: [Small exercise to reinforce the concept]

Depth modes

Default

One-sentence definition
One minimal example
One practical example
2-3 common mistakes

`--deep`

Extended explanation with history/context
Multiple examples of increasing complexity
Edge cases and gotchas
Performance considerations
Comparison with alternatives
Interview-relevant details

`--quick`

Definition only
Single example
No extras

Adaptation rules

For beginners

Use analogies from everyday life
Avoid jargon (or explain it immediately)
More comments in code
Smaller code examples

For intermediates

Assume basic syntax knowledge
Focus on "why" over "what"
Include trade-offs
Show idiomatic patterns

For advanced topics

Reference official documentation
Discuss internal implementation when relevant
Include performance implications
Mention related patterns

Example session

User: /learn:teach useEffect

Claude: ## useEffect

**In one sentence**: useEffect lets you run side effects (data fetching, subscriptions, DOM changes) after React renders a component.

### Why It Matters

React components are pure functions that render UI. But real apps need to interact with the outside world: APIs, browser events, timers. useEffect is the bridge between React's declarative world and imperative side effects.

### Minimal Example

\`\`\`jsx
import { useEffect, useState } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    return () => clearInterval(id);  // Cleanup
  }, []);  // Empty array = run once

  return <div>{seconds}s</div>;
}
\`\`\`

**Line by line**:
- `useEffect(() => {...}, [])`: Run this function after first render
- `setInterval(...)`: Start a timer (side effect)
- `return () => clearInterval(id)`: Cleanup when component unmounts
- `[]`: Empty dependency array = only run on mount

### Common Mistakes

1. **Missing dependency array**: Without `[]`, effect runs on EVERY render
2. **Forgetting cleanup**: Intervals/subscriptions leak without return function
3. **Stale closures**: Using old state values instead of functional updates

---

**Practice challenge**: Add a pause button that stops and resumes the timer.

Topics well-suited for /learn:teach

Category	Examples
React	hooks, context, suspense, server components
JavaScript	closures, promises, event loop, prototypes
TypeScript	generics, mapped types, utility types
Patterns	SOLID, DI, composition, factories
Backend	REST, GraphQL, authentication, caching
Database	indexes, joins, transactions, normalization
DevOps	containers, CI/CD, infrastructure as code

$ARGUMENTS

learn-teach

Teach me

Usage

Instructions