react-development

React Development

Optimized for React 19+, TypeScript 5.5+, React Testing Library 16+, and modern server-first app architectures.

Expert guidance for building high-quality React applications with React 19+, modern hooks, TypeScript, and best practices following official React documentation at https://react.dev.

• Leverage native parallel subagent dispatch and 200k+ context windows where available.

Component Review Rubric Reference

Apply the shared Component Review Rubric before approving React components, then run the React-specific checks below.

Anti-Patterns

• Fetching everything in client effects by default: Server-first data loading is usually simpler, faster, and easier to cache.
• Adding memoization before profiling: Manual optimizations can create stale-prop bugs and hide simpler design fixes.
• Skipping keyboard and accessible-name review: A component is not done if only pointer users can operate it reliably.

Verification Protocol

Before claiming "skill applied successfully":

1. Pass/fail: The React Development guidance is tied to a concrete route, component, screen, or design artifact.
2. Pass/fail: Component states cover loading, empty, error, success, and responsive breakpoints where applicable.
3. Pass/fail: Accessibility, visual hierarchy, and interaction behavior are reviewed against the shared component rubric.
4. Pressure-test scenario: Review the component on a narrow mobile viewport, keyboard-only path, and slow-loading state.
5. Success metric: Zero generic UI approval; every approval cites rendered behavior or source evidence.

Before and After Example

// Before
'use client';

export function Dashboard() {
  const [orders, setOrders] = useState<Order[]>([]);
  useEffect(() => {
    fetch('/api/orders').then((r) => r.json()).then(setOrders);
  }, []);
  return <OrdersTable orders={orders} />;
}

// After
export async function Dashboard() {
  const orders = await getOrders();
  return <OrdersTable orders={orders} />;
}