Claude Code Plugins

Community-maintained marketplace

Feedback

React 19.3+ patterns. Use for forms, async data, pre-rendering, transitions, refs, context, metadata.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name react-19
description React 19.3+ patterns. Use for forms, async data, pre-rendering, transitions, refs, context, metadata.

React 19.3+

Avoid → Use

  • useState + onChange for forms → useActionStateexamples/form-action.tsx
  • await in server components → pass promise, use() in client → examples/use-server-promise.tsx
  • forwardRefref as prop
  • useCallback / useMemo → compiler handles it
  • useContextuse(Context)
  • Context.Provider<Context value={}>
  • Manual state reset on prop change → key prop

Patterns

  • Forms: useActionState(fn, init) + useOptimistic + useFormStatusexamples/form-action.tsx
  • Pre-rendering: <Activity mode="hidden">examples/activity-prerender.tsx
  • Effect events: useEffectEvent() for non-reactive logic in effects → examples/effect-event.tsx
  • Async data: pass promise from server, unwrap with use()examples/use-server-promise.tsx
  • ViewTransition: wrap elements, use startTransition() + addTransitionType()examples/view-transition.tsx
  • Mutations outside forms: useTransition + Server Action → examples/server-action-mutation.tsx
  • Suspense: <Suspense fallback={...}> wraps async components
  • Deferred value: useDeferredValue(value, initialValue)
  • Request memoization: cache(async fn) with cacheSignal()
  • Server Action: "use server" + revalidatePath() / revalidateTag()
  • Metadata: <title>, <meta>, <link> hoisted to <head>
  • Refs: ref as prop, cleanup via return function

Component structure

  • One component per file
  • Inner functions use arrow syntax: const handleX = () => {}