---

description: Explain what code does line by line so you can understand and learn from it.

Explain Code

Explain what code does, line by line, so you can understand and learn from it.

Instructions

When the user asks you to explain code:

Step 1: Identify the Code

If the user provides a file path, read that file. If they paste code directly, use that.

If no code is specified, ask:

"What code would you like me to explain? Please provide a file path or paste the code."

Step 2: Provide Overview

Start with a high-level summary:

• What is the purpose of this code?
• What problem does it solve?
• How does it fit into the larger application?

Step 3: Walk Through Line by Line

For each significant section, explain:

• What it does (literally)
• Why it's needed (purpose)
• How it works (mechanism)

Use this format:

Lines X-Y: [Brief description]
- This code [what it does]
- It's needed because [why]
- It works by [how]

Step 4: Highlight Key Concepts

Point out important patterns and concepts:

• Design patterns used
• Language features that might be unfamiliar
• Best practices demonstrated
• Potential gotchas or edge cases

Step 5: Summarize

End with:

• Key takeaways
• What the user should understand now
• Suggestions for further learning if applicable

Example Output

## Overview

This is a React custom hook that manages authentication state. It handles
login, logout, and automatic token refresh.

## Line-by-Line Explanation

### Lines 1-5: Imports
```typescript
import { useState, useEffect, useCallback } from 'react';
import { authApi } from '@/services/api';
import { User } from '@/types';

• Imports React hooks for state management and side effects
• Imports the auth API service for making authentication requests
• Imports the User type for type safety

Lines 7-15: Hook Definition and State

export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

• Creates a custom hook that can be used in any component
• user state holds the current user (or null if logged out)
• loading state tracks whether we're still checking auth status
• Starting with loading: true prevents flash of unauthenticated content

Lines 17-30: Auto-refresh Effect

[... continue explanation ...]

Key Concepts

1. Custom Hooks: Reusable logic extracted from components
2. Optimistic Updates: UI updates before server confirms
3. Token Refresh: Automatic re-authentication before expiry

Takeaways

• This hook centralizes all auth logic in one place
• Components just need to call useAuth() to access auth state
• The refresh logic runs automatically in the background

## Tips for Users

Ask me to explain:
- "Explain this function" (paste code)
- "Explain src/hooks/useAuth.ts"
- "Explain lines 50-100 of api.ts"
- "What does this regex do?"
- "Why is this pattern used here?"

I'll adjust the depth based on what you ask. For simple code, I'll be brief. For complex code, I'll be thorough.