Claude MarketplacesSubmit
giuseppe-trisciuoglio avatar

React Patterns

giuseppe-trisciuoglio/developer-kit

This is your reference card for React 19's new primitives in Next.js App Router projects. It covers useOptimistic for instant UI feedback, useActionState for form handling with Server Actions, and useTransition for non-blocking updates. The skill includes copy-paste patterns for Server Component/Client Component splits, Zod validation with Server Actions, and custom hooks. What I like is the quick reference table that maps patterns to hooks, plus it reminds you to test Server Actions with both valid and invalid inputs. Most useful when you're working with the newer concurrent features and need to remember which hook solves which problem without digging through docs.

skills.sh installs
4.9K
GitHub stars
369
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add giuseppe-trisciuoglio/developer-kit --skill react-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

React 19 Development Patterns

Overview

React 19 patterns for Next.js App Router, Server Actions, optimistic UI, and concurrent features. See Quick Reference for API summary and Examples for copy-paste patterns.

When to Use

  • Building React 19 applications with Next.js App Router
  • Implementing optimistic UI with useOptimistic or useTransition
  • Creating Server Actions with form validation
  • Migrating from class components to hooks
  • Optimizing concurrent rendering with React Compiler
  • Managing complex state with useReducer or custom hooks
  • Wrapping async operations in Suspense boundaries

Quick Reference

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/giuseppe-trisciuoglio/developer-kit
Categories
Frontend Development, Backend & APIs, Security, Debugging

More from giuseppe-trisciuoglio/developer-kit

All 102

Recommended

More Frontend Development
1softaworks avatarreact-devsoftaworks/agent-toolkitThis skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components a4.2Kskills.sh installs
2freshtechbro avatarreact-three-fiberfreshtechbro/claudedesignskillsBuild declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications wit4.1Kskills.sh installs
3giuseppe-trisciuoglio avatarnextjs-code-reviewgiuseppe-trisciuoglio/developer-kitProvides comprehensive code review capability for Next.js applications, validates Server Components, Client Components, Server Actions, caching strategies, meta3.9Kskills.sh installs
4getsentry avatarsentry-nextjs-sdkgetsentry/sentry-for-aiFull Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, 3.7Kskills.sh installs
5getsentry avatarsentry-react-sdkgetsentry/sentry-for-aiFull Sentry SDK setup for React. Use when asked to "add Sentry to React", "install @sentry/react", or configure error monitoring, tracing, session replay, profi3.2Kskills.sh installs
6nexu-io avatarfrontend-slidesnexu-io/open-designGenerate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.3Kskills.sh installs