SKILL.md
Usage: /explain-code PATHORDESCRIPTION
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.mdto 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