Is forwardRef still recommended?

No, in React 19 forwardRef is deprecated. This skill enforces passing ref as a regular prop to simplify component logic and improve readability.

Does this skill support React 18 features?

While many patterns are backward compatible, this skill specifically prioritizes React 19 features like ref-as-a-prop and the new Actions API hooks for future-proof development.

What are the architectural tiers covered?

UI is organized into four levels: Primitives (base blocks), Components (reusable UI), Patterns (composed features), and Templates (page layouts).

How does it improve form handling?

By using useActionState and useFormStatus, it removes the need for manual useState boilerplate for loading and error states during form submissions.

How does this skill handle component styling?

It follows a styling-agnostic philosophy, requiring that all reusable components expose a className prop to allow for external customization with any CSS framework.

React 19 Component Architecture

Name: React 19 Component Architecture
Author: agents-inc

byagents-inc

0•

设计工具

Builds modern React 19 applications using tiered component patterns, the Actions API, and optimized hook implementations.

This skill provides specialized expertise for architecting high-performance React 19 applications. It focuses on modernizing frontend workflows by replacing deprecated patterns like forwardRef with direct ref props, implementing the new Actions API via useActionState and useFormStatus, and establishing a rigorous tiered component hierarchy (Primitives, Components, Patterns, Templates). Whether you are migrating a legacy codebase or starting a fresh project, this skill ensures type-safe, composable, and styling-agnostic UI development following industry-standard best practices.

主要功能

01Provides instant UI feedback logic with useOptimistic and transition-based updates

02Implements React 19 ref-as-prop patterns to eliminate forwardRef boilerplate

03Automates form state management using useActionState and useFormStatus

04Enforces a scalable tiered architecture for design systems and page templates

05Facilitates conditional data fetching and context reading with the use() hook

060 GitHub stars

使用场景

01Building a type-safe UI library with clear separation between primitives and complex patterns

02Migrating production applications from React 18 to React 19 standards

03Implementing robust form handling with built-in loading states and error recovery

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-framework-react

For use in Claude.ai and ChatGPT

Download Skill