skills.rest
sakamoto-family-smile
sakamoto-family-smileCOMMUNITY
Explore all skills by this author →
GitHub

react-patterns

Guide React 18/19 component patterns for hooks, server/client boundaries, and accessibility.

Updated Apr 13, 2026
Search Tags:#frontend#react#components#hooks#patterns#server-client#accessible
One-click install
npx skills add https://github.com/sakamoto-family-smile/agent_monorepo --skill react-patterns-sakamoto-family-smile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/sakamoto-family-smile/agent_monorepo/tree/main/.claude/skills/ecc/react-patterns
Command: npx skills add https://github.com/sakamoto-family-smile/agent_monorepo --skill react-patterns-sakamoto-family-smile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This collection provides a structured, accessible approach for applying React 18/19 patterns to build robust component trees, reducing boilerplate and decision fatigue for developers.

Core Features & Use Cases

  • Hooks discipline guidance to ensure correct usage of useEffect/useMemo and avoid derived state pitfalls.
  • Clear boundaries between Server Components and Client Components to optimize rendering, data fetching, and bundle size.
  • Patterns for Suspense, error boundaries, form actions, and data-fetching strategies to improve UX and resilience.
  • Real-world use cases include migrating legacy components, designing modular UI, and coaching teams for consistent patterns.

Quick Start

Apply these patterns when coding or reviewing React components to ensure consistency and accessibility.

Frequently Asked Questions about react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide between Server Components and Client Components in React 18/19?▼

To decide between Server and Client Components, evaluate rendering boundaries to optimize data fetching, bundle size, and rendering performance. Apply pattern-based decisions to enforce clear server/client boundaries and build robust, accessible component trees.

What is the best way to structure Suspense and error boundaries for data fetching in React?▼

The best way to structure Suspense and error boundaries is applying React 18/19 patterns to improve UX and resilience. Use these patterns alongside form actions and data-fetching strategies to handle asynchronous rendering and recover from failures gracefully.

Can I use server actions for form submissions with accessible React components?▼

Yes, you can use server actions for forms by applying React 18/19 patterns to enforce accessibility-first composition. This approach ensures robust component trees while handling form submissions and maintaining strict server/client boundaries.

Why does my React component tree need strict hooks discipline and pattern-based data fetching?▼

Your React component tree needs strict hooks discipline to prevent derived state pitfalls and ensure correct useEffect/useMemo usage. Pattern-based data fetching reduces boilerplate and decision fatigue while enforcing robust, accessible component boundaries.

Related Skills

Explore More Software Engineering Skills→
botPhUbotPhU

react-expert

Diagnose and fix complex React 18/19 component issues.

Community
Advanced
tmarsbrtmarsbr

frontend-developer

Build reusable React/Next.js UI components with accessibility and performance patterns.

Community
Advanced
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate
landmaster135landmaster135

web-component-design

Designs cross-framework UI components for React, Vue, and Svelte.

Community
Advanced