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