react-modern

Guide React 19+ code reviews in WrongStack for server/client boundaries.

224|27|Updated May 12, 2026
One-click install
npx skills add https://github.com/WrongStack/WrongStack --skill react-modern
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-modern
Source: https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/react-modern
Command: npx skills add https://github.com/WrongStack/WrongStack --skill react-modern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers write and review React 19+ code in WrongStack by enforcing server-first rendering, explicit client boundaries, and modern patterns like use(promise) and useTransition.

Core Features & Use Cases

  • Default to Server Components and only mark 'use client' for interactive code.
  • Guidelines for data fetching without useEffect and using server-side rendering where possible.
  • Pattern examples for server and client components, and explicit event typing with TypeScript.

Quick Start

Enable server components by default and annotate interactive parts with 'use client' only when needed.

Frequently Asked Questions about react-modern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write React 19 server components and mark client boundaries correctly?

To write React 19 server components, default to server-side rendering and only add 'use client' for interactive code. This enforces correct client boundaries and modern frontend patterns.

What is the best way to fetch data in React 19 without using useEffect?

The best way to fetch data without useEffect is using server components and modern patterns like use(promise). This enables server-side rendering and optimizes performance.

Do I need TypeScript to review React 19 server and client component patterns?

TypeScript is needed to apply explicit event typing and component conventions for React 19 patterns. It enforces correct server/client boundaries and modern data fetching structures.

When should I use the 'use client' directive in my React frontend?

You should use the 'use client' directive only for interactive code that requires client-side execution. Default to server components to maintain strict client boundaries and optimize rendering.

Can I use useTransition and use(promise) patterns for React 19 performance optimization?

You can use useTransition and use(promise) patterns for performance optimization in React 19. They support server-first rendering and modern data fetching without useEffect.

Why does my React 19 code review fail on server and client boundary separation?

React 19 code review fails on boundary separation when interactive code is not explicitly marked with 'use client'. Defaulting to server components and explicit TypeScript event typing resolves this.