跳到正文
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(原文)

安装前可以查看交给 AI 代理的指令内容。

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 / 1000 字

此表单受 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-guide62082026年10月20日 更新

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-guide62082026年10月20日 更新

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-guide62082026年10月20日 更新

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-guide62082026年10月20日 更新

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-guide62082026年10月20日 更新

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-guide62082026年10月20日 更新

查看 FlorianBruniaux 的全部技能

报告此技能的问题