跳到正文
cccskills
免费在 GitHub 公开

code-explanation

Explains complex code through clear narratives, visual diagrams, and step-by-step breakdowns. Use when user asks to explain code, understand algorithms, analyze design patterns, wants code walkthroughs, or mentions "explain this code", "how does this work", "code breakdown", or "understand this function".

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(4)

  • SKILL.md3.1 KB
  • EXAMPLES.md10.5 KB
  • TROUBLESHOOTING.md1.7 KB
  • WORKFLOW.md7.0 KB

SKILL.md(原文)

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

Code Explanation

Expert skill for explaining complex code to developers at all levels through visual aids, step-by-step breakdowns, and progressive complexity.

Quick Start

1. Analyze Complexity First

Before explaining, assess the code:

  • Lines of code and structural complexity
  • Concepts used (async, decorators, generators, etc.)
  • Design patterns present
  • Difficulty level (beginner/intermediate/advanced)

2. Choose Explanation Depth

AudienceApproach
BeginnerStart with analogies, avoid jargon, explain fundamentals
IntermediateFocus on patterns and design decisions
AdvancedDeep dive into implementation details and trade-offs

3. Use Visual Aids

Generate Mermaid diagrams for:

  • Flow diagrams - Control flow and decision trees
  • Class diagrams - Object relationships and inheritance
  • Sequence diagrams - Method calls and interactions

4. Progressive Disclosure

Structure explanations from simple to complex:

  1. Overview - What does this code do? (1-2 sentences)
  2. Key Concepts - What programming concepts are used?
  3. Step-by-Step - Walk through the logic
  4. Deep Dive - Advanced details for those who want more

Output Format

Standard Explanation Structure

## What This Code Does
[1-2 sentence summary]

## Key Concepts
- Concept 1: Brief explanation
- Concept 2: Brief explanation

## Visual Overview
[Mermaid diagram if complexity warrants]

## Step-by-Step Breakdown
1. [First step with code reference]
2. [Second step with code reference]
...

## Common Questions
- Why is X done this way?
- What happens if Y?

## Related Patterns
[Links to similar patterns or alternatives]

Core Techniques

Explaining Algorithms

  1. State the problem being solved
  2. Show input → output transformation
  3. Visualize with step-by-step execution
  4. Analyze time/space complexity

Explaining Design Patterns

  1. Name the pattern
  2. Explain the problem it solves
  3. Show UML-style diagram
  4. List benefits and trade-offs

Explaining Complex Functions

  1. Signature and purpose
  2. Parameter meanings
  3. Return value
  4. Side effects (if any)
  5. Edge cases

Best Practices

  • Use analogies - Compare to real-world concepts
  • Show, don't just tell - Include code snippets
  • Reference line numbers - Use file_path:line_number format
  • Highlight gotchas - Point out non-obvious behavior
  • Suggest improvements - When appropriate

Resources

Integration

This skill auto-invokes when triggered by explanation-related keywords. For explicit control, use the /code-explain command.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

adr

免费

Create, review, and manage Architecture Decision Records (ADRs) with auto-numbering, template detection, quality review, and index maintenance. Use when user mentions "ADR", "architecture decision", "document this decision", "create ADR", "review ADR", editing ADR files (docs/adr/, doc/adr/, .adr/), or discussing architectural choices and tradeoffs.

中文简介正在准备中。当前显示原文说明。

joaquimscosta/arkhe-claude-plugins212026年10月16日 更新

architect

免费

Analyze system architecture, module structure, API contracts, data models, and code patterns. Use when designing systems, reviewing module boundaries, evaluating API designs, analyzing data models, checking pattern conformance, tracing decisions, or reviewing frontend architecture. Triggers: "architecture", "module design", "API design", "data model", "boundaries", "patterns", "decisions", "frontend architecture".

中文简介正在准备中。当前显示原文说明。

joaquimscosta/arkhe-claude-plugins212026年10月16日 更新

Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts. Use when creating, refining, or validating design directives for Google Stitch. Use when user says "create a Stitch prompt", "optimize this for Stitch", "convert this spec to a Stitch prompt", "write a UI prompt", or mentions Google Stitch prompt authoring. Follows Stitch best practices with short, directive prompts focused on screens, structure, and visual hierarchy.

中文简介正在准备中。当前显示原文说明。

joaquimscosta/arkhe-claude-plugins212026年10月16日 更新

Zero-dependency live-preview server providing an agent↔browser bidirectional companion. Watches a content directory, wraps HTML fragments in a frame template, broadcasts live-reload over WebSocket, and captures browser-side click events to a JSONL file. Use when an agent needs to show HTML to the user in a browser and react to clicks — mockups, design exploration, gallery browsing, multi-select choices, prototype iteration. Triggered by "live preview", "browser companion", "preview server", "browser mockup", "show in browser", "arkhe-preview", or any skill that wants to write HTML fragments and have the user see them reload in real time.

中文简介正在准备中。当前显示原文说明。

joaquimscosta/arkhe-claude-plugins212026年10月16日 更新

Deletes merged git branches (local and remote) and flags stale unmerged branches for manual review. Use when user mentions "cleanup branches", "delete merged branches", "prune old branches", "remove stale branches", "branch cleanup", or runs /cleanup-branches command.

中文简介正在准备中。当前显示原文说明。

joaquimscosta/arkhe-claude-plugins212026年10月16日 更新

Interactive Claude Code environment setup wizard. Detects existing configuration, guides through best-practice setup for Global CLAUDE.md, project scaffolding, MCP servers, hooks, custom agents, keybindings, and settings. Use when user runs /devtools:code-env-setup, mentions "setup claude code", "configure claude", "claude code setup", "environment setup", or "initialize claude code".

中文简介正在准备中。当前显示原文说明。

joaquimscosta/arkhe-claude-plugins212026年10月16日 更新

查看 joaquimscosta 的全部技能

报告此技能的问题