This is a solid reference for modern React development that covers the essentials: hooks like useState, useReducer, and useContext with actual working examples, plus patterns for combining them effectively. You'll find it useful when you need to remember the right way to handle complex state with useReducer instead of prop drilling, or when setting up context providers properly. The code examples are practical, like the task manager reducer and theme context implementations, not just toy demos. It's clearly written for React 18+ functional components, so if you're still dealing with class components or need to refactor legacy code, the patterns here will help. The guide assumes you know React basics but need reminders on best practices and composition patterns.

skills.sh installs
473
GitHub stars
63
last updated
Aug 21, 2026

Install

$ npx -y skills add manutej/luxor-claude-marketplace --skill react-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

React Patterns - Modern Development Guide

A comprehensive skill for mastering modern React development patterns, including React 18+ features, hooks, component composition, state management strategies, and performance optimization techniques for building scalable web applications.

When to Use This Skill

Use this skill when:

  • Building modern React applications with functional components and hooks
  • Implementing complex state management with useReducer and Context API
  • Optimizing React application performance with memoization techniques
  • Creating reusable custom hooks for shared logic
  • Working with Server Components and React Server Components (RSC)
  • Managing forms, side effects, and asynchronous operations
  • Refactoring class components to modern functional patterns
  • Building type-safe React applications with proper patterns
  • Implementing advanced component composition patterns
  • Debugging React performance issues and unnecessary re-renders

Core Concepts

React Philosophy

Modern React emphasizes:

Sponsors

Details

Repository
github.com/manutej/luxor-claude-marketplace
Categories
Frontend Development, Debugging
First seen
Jun 3, 2026

More from manutej/luxor-claude-marketplace

All 66
1pedronauck avatarreactpedronauck/skillsReact 19 development under the React Compiler. Use when writing React components or hooks, deciding whether a useMemo/useCallback/memo belongs in the code, diag473skills.sh installs
2dauquangthanh avatarfrontend-design-reviewdauquangthanh/hanoi-rainbowConducts comprehensive frontend design reviews covering UI/UX design quality, design system validation, accessibility compliance, responsive design patterns, co463skills.sh installs
3jwynia avatarshadcn-layoutsjwynia/agent-skillsGenerate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout is460skills.sh installs
4aj-geddes avatarfrontend-routingaj-geddes/useful-ai-promptsImplement client-side routing using React Router, Vue Router, and Angular Router. Use when building multi-page applications with navigation and route protection454skills.sh installs
5jwynia avatarpwa-developmentjwynia/agent-skillsImplement Progressive Web App features for React and Svelte projects. This skill should be used when the user asks to 'make a PWA', 'add offline support', 'crea447skills.sh installs
6inertia-rails avatarshadcn-inertiainertia-rails/skillsshadcn/ui component integration for Inertia Rails React (NOT Next.js): forms, dialogs, tables, toasts, dark mode, command palette, and more. Use when building U436skills.sh installs