Frontend Optimization

Folder: .github/skills/tsh-optimizing-frontend/
Used by: Software Engineer

Provides frontend rendering optimization strategies, code splitting patterns, memoization guidelines, bundle size control, asset optimization, and memory management practices.

Key Areas

Area	Coverage
Rendering	Avoiding unnecessary re-renders, proper memoization, stable references
Code Splitting	Route-based and component-based lazy loading strategies
Bundle Size	Tree shaking, import optimization, dependency analysis
Assets	Image optimization, lazy loading, responsive images
Memory	Leak prevention, cleanup patterns, subscription management

When to Use

• Optimizing component rendering performance.
• Reducing bundle size.
• Debugging performance issues (slow renders, memory leaks).
• Implementing lazy loading.
• Reviewing code for performance regressions.

Reference Files

• references/react-patterns.md — React-specific optimization patterns (memoization, refs, previous value tracking).

Connected Skills

• tsh-implementing-frontend — Component patterns and design system usage.
• tsh-writing-hooks — Hook lifecycle and cleanup patterns.
• tsh-reviewing-frontend — Performance spot-checks during code review.