react-patterns

Enforce React and Next.js development policies for components, hooks, and performance.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/cooldaemon/dotfiles --skill react-patterns-cooldaemon
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/cooldaemon/dotfiles/tree/main/.claude/skills/react-patterns
Command: npx skills add https://github.com/cooldaemon/dotfiles --skill react-patterns-cooldaemon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear, actionable policies and best practices for developing React and Next.js applications, ensuring code quality, performance, and accessibility.

Core Features & Use Cases

  • State Management: Enforces functional updates and context null checks for robust state handling.
  • Conditional Rendering: Promotes clear and readable conditional rendering patterns.
  • Performance Optimization: Guides on memoization, code splitting, and virtualization.
  • Accessibility: Mandates useId for labels and proper focus management in modals.
  • Anti-Patterns: Highlights common mistakes and their correct solutions.
  • Component Design: Encourages composition and compound components.

Quick Start

Review the state management policies for React components.

Frequently Asked Questions about react-patterns

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

FAQPage Schema
What are the best practices for React state management and context null checks?

React state management best practices involve enforcing functional updates and performing context null checks to ensure robust state handling. This approach prevents race conditions and maintains predictable component rendering.

How do I optimize React and Next.js performance using memoization and code splitting?

React and Next.js performance optimization uses memoization, code splitting, and virtualization to reduce render cycles and bundle size. This ensures efficient loading and maintainable component design patterns.

How do I manage focus in React modals and use useId for accessibility?

React accessibility mandates using useId for labels and proper focus management in modals. This ensures keyboard navigation and screen reader compatibility for interactive UI components.

What are common React anti-patterns for conditional rendering and component design?

Common React anti-patterns in conditional rendering and component design involve unclear logic and monolithic structures. Correct solutions promote readable conditional patterns, composition, and compound components.

Does this approach work for both React and Next.js component development?

Yes, these development policies apply to both React and Next.js component development. They enforce best practices for writing components, hooks, and optimizing performance across both frameworks.

When should I use memoization or code splitting in my React application?

Memoization and code splitting in React applications should be used to optimize performance when dealing with expensive renders or large bundles. They improve maintainability and efficiency through targeted updates.