Skills
.Work. You
Rest

react-patterns

Official

Build modern React 19 apps, optimized by default.

Software Engineering#performance#frontend#Server Actions#useOptimistic#React Compiler#component patterns#React 19#useActionState
AuthorMadAppGang
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Keeping up with the latest React 19 features like the React Compiler, Server Actions, and new hooks can be challenging. This Skill provides best practices for building performant and maintainable React applications.

Core Features & Use Cases

  • Compiler-Friendly Code: Write components optimized by the React Compiler for automatic memoization and performance gains.
  • React 19 Actions: Implement form-centric mutations with useActionState and useOptimistic for built-in validation and optimistic UI.
  • use Hook: Leverage the new use hook for unwrapping Promises and Context, especially with Suspense.
  • Decision Guide: Understand when to choose between React Actions and TanStack Query mutations for different scenarios.
  • Use Case: Implement a "create todo" form using React 19 Actions, complete with validation and an optimistic update that instantly shows the new todo in the list.

Quick Start

Use the react-patterns skill to implement a compiler-friendly UserCard component.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-patterns
Download link: https://github.com/MadAppGang/claude-code/archive/main.zip#react-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository