Component Analysis Skill

When to Use

• Refactoring discussions
• Before major component changes
• When asked to "analyze" or "audit" a component
• Code review of specific files

Analysis Process

1. Identify Component

• Component Path: Full file path
• Component Name: The component name

2. Initial Examination

• Code structure and organization
• Purpose and functionality
• Immediate issues
• Total lines (check 200-line rule)

3. Coding Guidelines Check

4. Styling Check

5. Mobile-First Check

• Mobile-first breakpoints
• Touch-friendly interactions
• Responsive typography
• Container responsiveness

6. Generate Report

# Component Analysis: [Name]

**File:** `[path]`
**Lines:** [X] / 200 max
**Score:** [X]/10

## ✅ Compliant
- [Things done well]

## ⚠️ Warnings
- [Minor issues]

## ❌ Violations
- [Critical issues]

## 📋 Recommendations

### High Priority
1. [Critical fix]

### Medium Priority
1. [Improvement]

## 🔧 Suggested Fixes
[Before/After code examples]

7. Offer Next Steps

• A) Implement high-priority fixes
• B) Create feature documentation
• C) Refactor if > 200 lines

Severity Levels

• 🔴 Critical: Breaking functionality, security issues
• 🟡 Major: Performance, accessibility violations
• 🟢 Minor: Code style, documentation

Common Violations

1. No TypeScript interface for props → Define

   interface ComponentProps

2. useEffect missing dependencies → Add to dependency array
3. Hardcoded colors → Use Tailwind tokens
4. No dark mode → Add

   dark:

   variants
5. Missing alt text → Add descriptive alt attributes