learn-teach

# Teach me Step-by-step explanation of a concept with progressive depth. ## Usage ``` /learn:teach React hooks # Learn about React hooks /learn:teach async/await # Understand async patterns /learn:teach SOLID principles # Learn design principles /learn:teach --deep SQL joins # In-depth explanation ``` ## Instructions 1. Start with a **one-sentence definition** of the concept 2. Explain **why it matters** (real-world problem it solves) 3. Show a **minimal example** (simplest possible code) 4. Break down **each part** of the example with comments 5. Show a **practical example** (real-world use case) 6. Highlight **common mistakes** beginners make 7. Suggest **next concepts** to learn ## Response format ```markdown ## [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