Agent skill
frontend-performance
Provides performance optimization patterns for React applications. This skill should be used when optimizing bundle size, implementing code splitting, reducing re-renders, or improving web vitals.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/frontend-performance-allenlin90-eridu-services-2
SKILL.md
Frontend Performance
This skill provides patterns for optimizing React application performance.
Canonical Examples
Study these real implementations:
- Code Splitting: router.tsx
- Lazy Loading: Route-level lazy loading with TanStack Router
Core Optimization Strategies
1. Code Splitting & Lazy Loading
Route-level code splitting (automatic with TanStack Router):
// Routes are automatically code-split
export const Route = createFileRoute('/studios/$studioId/tasks')({
component: TasksPage, // Automatically lazy-loaded
});
Component-level lazy loading:
import { lazy, Suspense } from 'react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function Page() {
return (
<Suspense fallback={<LoadingSpinner />}>
<HeavyComponent />
</Suspense>
);
}
2. Memoization
useMemo for expensive computations:
const sortedItems = useMemo(
() => items.sort((a, b) => a.name.localeCompare(b.name)),
[items]
);
useCallback for stable function references:
const handleClick = useCallback(
(id: string) => { updateItem(id); },
[updateItem]
);
React.memo for component memoization:
export const ItemCard = React.memo(({ item }: ItemCardProps) => {
return <div>{item.name}</div>;
});
3. Virtual Scrolling
For long lists (>100 items), use @tanstack/react-virtual:
import { useVirtualizer } from '@tanstack/react-virtual';
function VirtualList({ items }: { items: Item[] }) {
const parentRef = useRef<HTMLDivElement>(null);
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 100,
});
return (
<div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
<div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
{virtualizer.getVirtualItems().map((virtualItem) => (
<div
key={virtualItem.index}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}px)`,
}}
>
<ItemCard item={items[virtualItem.index]} />
</div>
))}
</div>
</div>
);
}
4. Image Optimization
// Use native lazy loading
<img src={url} loading="lazy" alt={alt} />
// Use responsive images
<img
srcSet={`${url}-small.jpg 400w, ${url}-medium.jpg 800w, ${url}-large.jpg 1200w`}
sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
src={url}
alt={alt}
/>
5. Bundle Size Optimization
Analyze bundle:
npm run build -- --analyze
Tree-shaking: Import only what you need:
// ✅ GOOD: Named imports
import { Button } from '@eridu/ui';
// ❌ BAD: Default imports from barrel files
import * as UI from '@eridu/ui';
Performance Checklist
- Routes are code-split (automatic with TanStack Router)
- Heavy components use
lazy()+Suspense - Expensive computations use
useMemo - Callbacks use
useCallbackwhen passed to memoized children - List items use
React.memo - Long lists (>100 items) use virtual scrolling
- Images use
loading="lazy" - Bundle analyzed and optimized
- Tree-shaking enabled (named imports)
Related Skills
- frontend-tech-stack - Tech stack configuration
- studio-list-pattern - Infinite scroll patterns
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?