explain-code
Scannednpx machina-cli add skill AgnosticUI/agnosticui/explain-code --openclawUsage: /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.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
Source
git clone https://github.com/AgnosticUI/agnosticui/blob/master/.claude/skills/explain-code/SKILL.mdView on GitHub Overview
Translates code or descriptive prompts into plain-English explanations of what the code does and why it matters. It covers user-facing behavior, architectural context, and how it fits into AgnosticUI's multi-framework system, including design tokens and accessibility considerations.
How This Skill Works
It first reads the repository context (PROJECT_CONTEXT.md) to understand the architecture, then locates and reads the target file(s) using the given path or description. It uses Grep/Glob to find related files, determines whether the item is a core component, framework-specific code, or a utility, and then produces a structured explanation covering what it does, how it works, and why it's designed that way within AgnosticUI's CSS-first, token-aware, accessibility-conscious multi-framework system.
When to Use It
- When you need a plain-English explanation of a file path or description (e.g., v2/lib/src/components/Button.ts)
- When you want to understand how a core component or a framework utility is implemented and used across frameworks
- When you need to understand how design tokens, CSS custom properties, or tokens are used in the code
- When you're comparing framework-agnostic versus framework-specific behavior
- When you want usage patterns, examples, and edge cases for a component or utility
Quick Start
- Step 1: Read .claude/PROJECT_CONTEXT.md to understand AgnosticUI's architecture
- Step 2: Provide a PATH to a file or a natural-language description; the tool will locate and read related files using Read, Grep, Glob
- Step 3: Review the plain-English explanation, focusing on what it does, how it works, and its architectural context within the multi-framework system
Best Practices
- Start with the user-facing behavior (what the code achieves) before diving into implementation
- Read PROJECT_CONTEXT.md to situate the code in AgnosticUI's architecture
- Identify whether the code is a core component, framework utility, or framework-specific implementation and cite related files
- Highlight design token usage and CSS-property references (CSS-first emphasis)
- Note edge cases, gotchas, and common usage patterns with concrete examples
Example Use Cases
- /explain-code v2/lib/src/components/Button.ts
- /explain-code the button ripple effect
- /explain-code design token system
- /explain-code header accessibility utilities
- /explain-code token-driven theming in CSS vars
