本文へ移動
cccskills
無料GitHub で公開

learn-teach

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

インストール方法を見る

含まれるファイル(1)

  • SKILL.md4.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Audit Claude Code agents, skills, and commands for quality and production readiness. Use when evaluating skill quality, checking production readiness scores, or comparing agents against best-practice templates.

日本語の概要は準備中です。原文の説明を表示しています。

FlorianBruniaux/claude-code-ultimate-guide6,1432026年10月7日 更新

Codebase health audit scoring 7 categories with progression plan

日本語の概要は準備中です。原文の説明を表示しています。

FlorianBruniaux/claude-code-ultimate-guide6,1432026年10月7日 更新

Autonomous improvement loop: scan codebase metrics, scaffold experiment files, run agent-driven iterations until metric improves

日本語の概要は準備中です。原文の説明を表示しています。

FlorianBruniaux/claude-code-ultimate-guide6,1432026年10月7日 更新

best-of-n

無料

Generate bounded independent candidates, score them against a frozen rubric, and verify the selected result with a proof log.

日本語の概要は準備中です。原文の説明を表示しています。

FlorianBruniaux/claude-code-ultimate-guide6,1432026年10月7日 更新

canary

無料

Post-deploy monitoring: watch production after a deploy and alert on regressions

日本語の概要は準備中です。原文の説明を表示しています。

FlorianBruniaux/claude-code-ultimate-guide6,1432026年10月7日 更新

catchup

無料

Restore context after /clear by summarizing recent work and project state

日本語の概要は準備中です。原文の説明を表示しています。

FlorianBruniaux/claude-code-ultimate-guide6,1432026年10月7日 更新

FlorianBruniaux のスキルをすべて見る

このスキルの問題を報告する