Does it remove all useEffect usage?

No, it enforces the 'Escape Hatch' rule, ensuring useEffect is used only for external system synchronization while replacing it with better patterns for data fetching or derived state.

Can this help migrate from Pages Router to App Router?

Yes, it includes checklists and transformation patterns specifically designed to move logic from legacy Pages Router structures to the modern App Router architecture.

How does it improve application performance?

By shifting logic to Server Components, it reduces the client-side JavaScript bundle, eliminates network waterfalls, and improves Core Web Vitals through server-rendering.

Is it compatible with TypeScript projects?

Absolutely. The skill is specifically designed for TypeScript/React/Next.js environments, ensuring type-safe implementation of modern architectural patterns.

How does this skill help with React 19?

It identifies legacy patterns and provides specific code examples for implementing React 19's new primitives like Server Actions, the use() hook, and improved form state management.

React & Next.js Modernizer

Name: React & Next.js Modernizer
Author: tylergibbs1

bytylergibbs1

•

開発者ツール

Enforces modern React 19 and Next.js App Router patterns to optimize data fetching, state management, and server-side performance.

This skill guides developers through the architectural shift from legacy client-side synchronization to async-native patterns using React 19 and Next.js App Router. It systematically identifies and eliminates common anti-patterns, such as excessive useEffect usage and client-side data waterfalls, by promoting Server Components, Server Actions, and the use() API. It is an essential tool for teams migrating legacy Pages Router projects or building high-performance, SEO-friendly applications that leverage the latest React primitives and streaming capabilities.

主な機能

01Implementation support for React 19 Server Components and Actions

02Detection and refactoring of legacy useEffect anti-patterns

03Modern form state management using useActionState and useFormStatus

04Optimization of data fetching using request memoization and React.cache

051 GitHub stars

06Guided migration patterns for Next.js Pages Router to App Router

ユースケース

01Migrating a legacy React application to the Next.js App Router architecture

02Replacing complex state-based form logic with type-safe Server Actions

03Refactoring heavy client-side components into lightweight, server-rendered versions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tylergibbs1/codewarden react-next-modern

For use in Claude.ai and ChatGPT

Download Skill