본문으로 건너뛰기
cccskills
무료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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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

설치 방법 보기

이럴 때 유용합니다

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

포함된 파일(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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.2천2026년 10월 18일 업데이트

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.2천2026년 10월 18일 업데이트

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.2천2026년 10월 18일 업데이트

best-of-n

무료

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.2천2026년 10월 18일 업데이트

canary

무료

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.2천2026년 10월 18일 업데이트

catchup

무료

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.2천2026년 10월 18일 업데이트

FlorianBruniaux의 스킬 모두 보기

이 스킬의 문제 신고