Engineering ReactServer ComponentsHooks

React Specialist

Advanced React patterns: Server Components, Suspense, concurrent rendering, custom hooks, state management, and performance optimization guides.

A production React expert covering the full modern stack: RSC, Suspense boundaries, useTransition for non-blocking updates, custom hooks architecture, and state management trade-offs between Zustand, Jotai, and Redux Toolkit. Diagnoses unnecessary re-renders with React DevTools Profiler and applies memoization where it actually helps.

Added Mar 20, 2026

$npx skills add johnefemer/skillfish --skill react-specialist

Capabilities Real Examples Get Started Models & Context Works Great With

What This Skill Can Do

Concrete capabilities you get when you install this skill.

Architect component trees with Server and Client Components correctly

Design custom hooks that encapsulate domain logic and are testable

Diagnose and fix unnecessary re-renders with memo, useMemo, useCallback

Implement Suspense boundaries with streaming and error boundaries

Choose and configure state management libraries for the problem shape

Optimize bundle size with code splitting, lazy loading, and tree shaking

Real Conversations

See how the React Specialist skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

I need a custom hook for paginated API data that handles loading, error, and 'load more' states. It should work with React Query under the hood but expose a clean API to components.

Agent

Here's a usePaginatedList hook that wraps React Query's useInfiniteQuery:

import { useInfiniteQuery } from '@tanstack/react-query';

interface PaginatedResponse<T> {
  items: T[];
  nextCursor: string | null;
}

function usePaginatedList<T>(
  key: string[],
  fetcher: (cursor: string | undefined) => Promise<PaginatedResponse<T>>,
) {
  const query = useInfiniteQuery({
    queryKey: key,
    queryFn: ({ pageParam }) => fetcher(pageParam as string | undefined),
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
  });

  return {
    items: query.data?.pages.flatMap(p => p.items) ?? [],
    isLoading: query.isLoading,
    isLoadingMore: query.isFetchingNextPage,
    error: query.error,
    hasMore: query.hasNextPage,
    loadMore: query.fetchNextPage,
  };
}

// Usage — component never touches React Query internals
function UserList() {
  const { items, isLoading, hasMore, loadMore } = usePaginatedList(
    ['users'],
    (cursor) => api.getUsers({ cursor, limit: 20 }),
  );
  if (isLoading) return <Spinner />;
  return (
    <>
      {items.map(u => <UserCard key={u.id} user={u} />)}
      {hasMore && <button onClick={() => loadMore()}>Load more</button>}
    </>
  );
}

The hook flattens pages automatically — components just get a flat array. Swap the fetcher to change the data source without touching the component.

You

My dashboard re-renders every component on every WebSocket message even though most components only care about one metric. I have 30+ components and the profiler shows 300ms renders.

Agent

300ms re-renders on a dashboard almost always mean too-coarse state and missing memoization. Here's the fix pattern:

1. Split global state into atomic slices (Zustand):

// ❌ One big store — any metric change re-renders all subscribers
const useStore = create(() => ({ metrics: { cpu: 0, mem: 0, rps: 0 /* ... */ } }));

// ✅ Selector per metric — only the subscribing component re-renders
const useCpu = () => useStore(s => s.metrics.cpu);
const useMem = () => useStore(s => s.metrics.mem);

2. Memoize component output:

const CpuGauge = React.memo(({ value }: { value: number }) => (
  <Gauge value={value} label="CPU" />
));
// memo does shallow comparison — primitive props like number work perfectly

3. Throttle WebSocket updates (React 18 batching + startTransition):

socket.on('metrics', (data) => {
  startTransition(() => {
    setMetrics(data); // marks update as non-urgent — yields to user events
  });
});

4. Profile to confirm: Open React DevTools → Profiler → record 5 seconds. Filter to components with render time >16ms. The flame graph shows exactly which component is re-rendering and why (prop change vs parent re-render vs context).

Combining atomic selectors + React.memo cuts re-renders to O(changed metrics) instead of O(all components). Expect sub-16ms renders after this.

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Claude Sonnet 4 or GPT-4o for complex hook design and RSC architecture; these models understand React 18/19 API nuances well.

Context Window

SKILL.md ~4KB. Most React tasks fit in 32K context; whole-app refactors benefit from larger context windows.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Works Great With

These skills complement React Specialist for end-to-end coverage. Install them together for better results.

Senior Frontend

React, Next.js, TypeScript, Tailwind CSS, accessibility, and performance.

FrontendReact

TypeScript Pro

Advanced TypeScript patterns: generics, conditional types, mapped types, module augmentation, declaration files, and strict-mode migration guides.

TypeScriptGenerics

Next.js Developer

Next.js App Router mastery: Server/Client Components, route handlers, middleware, ISR, caching strategies, and deployment optimization.

Next.jsApp Router

Playwright Pro

Production-grade Playwright testing toolkit with 55 templates and smart reporting.

TestingPlaywright

UI Design System

UI design system toolkit for tokens, components, and patterns.

UIDesign System

$ skillfish add johnefemer/skillfish --all # install all skills at once

Ready to try React Specialist?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.