Skip to content
cccskills
FreePublished on GitHub

learn-teach

Learn programming concepts through a short definition, a minimal code example, and a practical use case. Explanations adapt to experience level, highlight common mistakes, and suggest related topics and a small practice exercise.

OriginalShow the original description

Step-by-step explanation of a concept with progressive depth

See how to install

Good for

  • Learning React hooks from small examples
  • Understanding how async/await works
  • Exploring SQL joins in depth
  • Getting a quick definition and example

Files included (1)

  • SKILL.md4.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

## [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

CategoryExamples
Reacthooks, context, suspense, server components
JavaScriptclosures, promises, event loop, prototypes
TypeScriptgenerics, mapped types, utility types
PatternsSOLID, DI, composition, factories
BackendREST, GraphQL, authentication, caching
Databaseindexes, joins, transactions, normalization
DevOpscontainers, CI/CD, infrastructure as code

$ARGUMENTS

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Evaluate Claude Code agents, skills, and commands with weighted quality criteria. Get scores, readiness grades, template comparisons, and practical improvement suggestions in Markdown or JSON reports to guide reviews before release.

  • Review skills before release
  • Compare agent definitions with reference templates
  • Quickly check critical quality criteria
FlorianBruniaux/claude-code-ultimate-guide6.2KUpdated Oct 18, 2026

audit-codebase

FreeSummary

Assess a codebase across seven areas, including exposed credentials, security, dependencies, structure, and tests. Receive category scores, findings tied to file locations, and a prioritized improvement plan with smaller tasks that can be completed quickly.

  • Assessing the overall health of an inherited project
  • Reviewing exposed credentials and security risks
  • Identifying dependency and test coverage gaps
FlorianBruniaux/claude-code-ultimate-guide6.2KUpdated Oct 18, 2026

autoresearch

FreeSummary

Measure code patterns such as casts to any or disabled lint rules, then run repeated, targeted edits. Keep changes that improve the chosen metric, revert unsuccessful changes, and track results for each improvement loop.

  • Finding code patterns to prioritize for cleanup
  • Preparing measurement files for an improvement loop
  • Repeating targeted edits to reduce casts to any
FlorianBruniaux/claude-code-ultimate-guide6.2KUpdated Oct 18, 2026

best-of-n

FreeSummary

Generate several separate solutions, compare them against criteria fixed in advance, and verify the selected result through executable checks or an independent reviewer. Keep a proof log documenting candidates, evidence, failures, and remaining limits.

  • Comparing implementation options before choosing one
  • Verifying a solution when a wrong choice would be costly
  • Keeping evaluation evidence for delivery or audit
FlorianBruniaux/claude-code-ultimate-guide6.2KUpdated Oct 18, 2026

canary

FreeSummary

Monitor a live application after deployment and compare it with a saved baseline, a record of its earlier state. Check page responses, loading times, and new errors, flag persistent changes, and produce a per-page health report.

  • Recording a healthy baseline before deployment
  • Monitoring production immediately after deployment
  • Checking key pages for slower responses or failures
FlorianBruniaux/claude-code-ultimate-guide6.2KUpdated Oct 18, 2026

catchup

FreeSummary

Rebuild project context after clearing a conversation or returning to work. Review recent Git history, uncommitted changes, and TODO markers to get a structured summary of project status and suggested next steps.

  • Restoring project context after /clear
  • Reviewing recent changes after a long break
  • Checking unfinished work before choosing the next task
FlorianBruniaux/claude-code-ultimate-guide6.2KUpdated Oct 18, 2026

See all skills by FlorianBruniaux

Report a problem with this skill