Component Analysis Skill
Analyze components for coding standards compliance and provide actionable improvements.
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
Get from user or extract:
- Component Path: Full file path
- Component Name: The component name
2. Initial Examination
Read file and check:
- Code structure and organization
- Purpose and functionality
- Immediate issues
- Total lines (check 200-line rule)
3. Coding Guidelines Check
| Check | What to Look For |
|---|---|
| Size | < 200 lines (refactor if exceeded) |
| Single Responsibility | Does one thing well |
| TypeScript | Proper types, interfaces for props |
| Naming | PascalCase components, camelCase functions, handle* events |
| Hooks | Proper use of React hooks and effects |
| Documentation | TSDoc/JSDoc comments |
| Imports | Organized, no unused imports |
4. Styling Check
| Check | What to Look For |
|---|---|
| Tailwind v4 | Using @theme integration |
| Color Tokens | Using primary, accent, semantic tokens |
| Responsive | Mobile-first (sm:, md:, lg:) |
| Dark Mode | dark: variants |
| Performance | Avoiding expensive backdrop-filter |
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
- No TypeScript interface for props → Define
interface ComponentProps - useEffect missing dependencies → Add to dependency array
- Hardcoded colors → Use Tailwind tokens
- No dark mode → Add
dark:variants - Missing alt text → Add descriptive alt attributes