explain-code

用通俗易懂的英语解释代码的功能与作用。

SKILL.md

--- frontmatter

name: explain-code
description: Explain what code does in plain English
disable-model-invocation: true
allowed-tools: Read, Grep, Glob

Usage: /explain-code PATH_OR_DESCRIPTION

Examples:

•/explain-code v2/lib/src/components/Button.ts
•/explain-code the button ripple effect
•/explain-code design token system

Explain: $ARGUMENTS

Setup:

•Read .claude/PROJECT_CONTEXT.md to understand AgnosticUI's architecture

Process:

•
Locate and read the code:
- •Identify if it's a core component, framework implementation, or utility
- •Read the specified file(s)
- •
  Use Grep/Glob to find related files if needed:
  - •If explaining core component, show framework usage examples
  - •If explaining framework story, reference core component
  - •If explaining utility, show where it's used
•
Understand the context:
- •Where does this fit in AgnosticUI's architecture?
- •Is it framework-agnostic or framework-specific?
- •Does it use design tokens or CSS custom properties?
- •Are there related files in other frameworks?
•
Explain clearly:
- •What it does (high level, user-facing behavior)
- •How it works (key logic, algorithms, patterns)
- •Why it's structured this way (architectural decisions)
- •
  AgnosticUI-specific context:
  - •How it fits the CSS-first approach
  - •Framework-agnostic vs framework-specific aspects
  - •Design token usage
  - •Accessibility considerations
- •Common usage patterns with examples
- •Edge cases or gotchas to be aware of
•
Provide helpful context:
- •Show where it's used (examples, stories, playgrounds)
- •Note framework differences if applicable
- •Link to related components or utilities
- •Reference relevant playbooks if they exist

Keep explanations:

•Clear and jargon-free (or explain jargon)
•Organized from high-level to details
•Focused on understanding, not just describing
•Contextualized within AgnosticUI's multi-framework architecture