Does this skill support React 18 projects?

While many patterns overlap, this skill specifically prioritizes React 19 and Next.js 15+ primitives like the use() API and modern form hooks.

How does this skill handle useEffect?

It identifies 'code smells' where effects are used for data fetching or derived state and suggests modern server-side or pure-render alternatives.

Does it improve application performance?

Yes, by promoting Server Components and reducing client-side JavaScript, it helps improve First Contentful Paint (FCP) and overall TTI.

Can it help with Pages Router to App Router migrations?

Yes, it is designed to recognize legacy patterns like getServerSideProps and provide the modern App Router equivalents.

React & Next.js Modern Best Practices

Name: React & Next.js Modern Best Practices
Author: Tylerbryy

byTylerbryy

•

개발자 도구

Enforces modern React 19 and Next.js App Router patterns to eliminate unnecessary effects and optimize server-first data fetching.

This skill guides developers through the paradigm shift from client-side synchronization to async-native development using React 19 and the Next.js App Router. It provides actionable checklists and code examples to eliminate waterfall requests, manage form state using modern hooks like useActionState, and implement Server Components and Server Actions correctly. By identifying legacy anti-patterns like useEffect-based fetching, it helps you build high-performance, SEO-friendly applications that leverage the latest architectural standards.

주요 기능

01Enforces Server Component defaults for zero-JS bundle sizes

02Optimizes data fetching through request memoization and the use() API

03Promotes type-safe Server Actions for progressive enhancement and mutations

04Audits code for incorrect useEffect usage and derived state anti-patterns

05Guides implementation of React 19 form hooks like useActionState and useFormStatus

061 GitHub stars

사용 사례

01Migrating legacy React applications from the Pages Router to the App Router

02Refactoring heavy client-side state logic into optimized Server Components

03Implementing progressively enhanced, type-safe forms with modern React 19 hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tylerbryy/codewarden react-next-modern

For use in Claude.ai and ChatGPT

Download Skill