Why does it avoid using React.FC?

React 19 and modern TypeScript conventions discourage React.FC because it can be less flexible and previously included implicit children; standard function components with explicit interfaces are now preferred.

Does this skill support React 18 or older versions?

While many patterns are backward compatible, this skill specifically prioritizes React 19+ standards and explicitly advises against patterns that were deprecated or discouraged in recent versions.

How does it handle TypeScript integration?

It enforces strict typing using readonly props, explicit return types, and discriminated unions to ensure maximum type safety and prevent common runtime errors.

What is the 'Result' type pattern mentioned?

The Result type pattern is a functional approach to error handling that returns either a success or error object, forcing developers to handle errors explicitly rather than relying on unpredictable try/catch blocks.

Is this skill compatible with frameworks like Next.js?

Yes, it includes specific guidance and configuration awareness for modern frameworks like Next.js, TanStack Start, and backend-integrated solutions like Convex.

React 19+ Design Patterns

Name: React 19+ Design Patterns
Author: JasonDocton

byJasonDocton

0•

디자인 도구

Implements modern React 19 patterns with TypeScript to ensure type safety, performance, and maintainable component architectures.

The react-patterns skill equips Claude with the latest standards for React 19 and TypeScript development, focusing on high-quality component design and robust state management. It provides strict guidance on avoiding deprecated patterns like React.FC or defaultProps while promoting industry-standard best practices such as readonly props, discriminated unions for complex state, and result-type error handling. This skill is essential for developers building modern web applications who want to ensure their codebase is future-proof, type-safe, and follows the latest architectural conventions for React 19.x and TypeScript 5.9+.

주요 기능

01Automated identification and refactoring of deprecated React APIs and patterns

020 GitHub stars

03Robust state management via discriminated unions to eliminate impossible states

04Advanced TypeScript integration using readonly props and explicit types

05Functional error handling patterns using Result types instead of unchecked try/catch

06Strict React 19+ component architectural patterns and best practices

사용 사례

01Bootstrapping new, type-safe UI features with production-ready patterns

02Migrating legacy React components to modern React 19 standards and TypeScript 5.9+

03Refactoring complex component state into manageable, type-safe discriminated unions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jasondocton/rad-claude react-patterns

For use in Claude.ai and ChatGPT

Download Skill