Explain Code

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