agentskills.codes
RE

react19

by ramiroquesadaCodingSource

Promotes React 19 APIs and modern patterns like Server Actions and compiler-optimized hooks.

FrontendReactTypeScript

Install

mkdir -p .claude/skills/react19 && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14474" && unzip -o skill.zip -d .claude/skills/react19 && rm skill.zip

Installs to .claude/skills/react19

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Patrones y APIs de React 19. Usa cuando trabajes con componentes, hooks, o cualquier codigo React para asegurar que se usen las APIs mas recientes.
147 charsno explicit “when” trigger
Intermediate

Key capabilities

  • →Use `use()` hook for reading promises and context
  • →Implement forms with `useActionState()` for server actions
  • →Manage form status in child components with `useFormStatus()`
  • →Apply optimistic UI updates with `useOptimistic()`
  • →Pass `ref` as a normal prop without `forwardRef`
  • →Use `<Context>` directly as a provider

How it works

This skill guides the use of modern React 19 APIs and patterns, such as `use()` and `useActionState()`, while discouraging obsolete practices.

Inputs & outputs

You give it
React component requirements or existing React code
You get back
React 19 compliant components using modern APIs

When to use react19

  • →Implement React 19 forms
  • →Manage server actions
  • →Optimise component hooks

About this skill

React 19 - Patrones Modernos

Cuando escribas codigo React para PROSEGUIT, usa exclusivamente APIs de React 19:

APIs nuevas de React 19

  • use() hook: Para leer promesas y contexto directamente
  • useActionState(): Reemplaza useReducer para form actions
  • useFormStatus(): Estado de formularios en componentes hijos
  • useOptimistic(): Actualizaciones optimistas de UI
  • React Compiler: No usar useMemo, useCallback, memo manualmente - el compilador los maneja

Patrones a seguir

  • Formularios con <form action={...}> nativo (Server Actions pattern)
  • ref como prop normal (ya no necesita forwardRef)
  • <Context> como provider directo (ya no <Context.Provider>)
  • Metadata con <title>, <meta>, <link> directamente en componentes
  • Stylesheet precedence con precedence prop en <link>

Patrones a EVITAR (obsoletos)

  • NO usar forwardRef -> pasar ref como prop
  • NO usar <Context.Provider> -> usar <Context> directo
  • NO usar useMemo/useCallback/memo innecesariamente -> React Compiler
  • NO usar useEffect para fetch -> usar use() con Suspense
  • NO usar useContext -> usar use(Context)

Estructura de componentes PROSEGUIT

// Componente funcional simple con CSS modules
import styles from './MiComponente.module.css';

function MiComponente({ datos, ref }) {
  return (
    <div className={styles.container} ref={ref}>
      {datos}
    </div>
  );
}

When not to use it

  • →When using legacy React APIs like `forwardRef` or `useEffect` for data fetching
  • →When manually applying `useMemo`, `useCallback`, or `memo` unnecessarily
  • →When not working with React 19 or later

Limitations

  • →This skill strictly enforces the use of React 19 APIs.
  • →It explicitly prohibits `forwardRef` and `<Context.Provider>`.
  • →It discourages `useEffect` for data fetching in favor of `use()` with Suspense.

How it compares

This workflow focuses on the latest React 19 features and compiler optimizations, moving away from manual memoization and legacy context providers.

Compared to similar skills

react19 side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
react19 (this skill)04moNo flagsIntermediate
nextjs-developer3282moNo flagsAdvanced
zustand1132moNo flagsIntermediate
ui-ux-expert-skill919moReviewAdvanced

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

nextjs-developer

zenobi-us

Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.

328531

zustand

lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

113434

ui-ux-expert-skill

fercracix33

Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.

91244

web-artifacts-builder

anthropics

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

49162

accessibility-compliance

wshobson

Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.

45132

radix-ui-design-system

sickn33

Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.

33130

Search skills

Search the agent skills registry