sickn33/antigravity-awesome-skills/react-patterns

React Patterns

Principles for building production-ready React applications.

1. Component Design Principles

Component Types

Design Rules

• One responsibility per component
• Props down, events up
• Composition over inheritance
• Prefer small, focused components

2. Hook Patterns

When to Extract Hooks

Hook Rules

• Hooks at top level only; React’s use API is an exception that can be called in loops/conditions inside a component or Hook (not in try/catch); see use
• Same order every render
• Custom hooks start with "use"
• Clean up effects on unmount

3. State Management Selection

State Placement

4. React 19 Patterns

New Hooks

Compiler Benefits

These apply when React Compiler is installed and enabled in the build, not automatically on upgrading to React 19; see installation.

• Automatic memoization
• Less manual useMemo/useCallback
• Focus on pure components

5. Composition Patterns

Compound Components

• Parent provides context
• Children consume context
• Flexible slot-based composition
• Example: Tabs, Accordion, Dropdown

Render Props vs Hooks

6. Performance Principles

When to Optimize

Optimization Order

1. Check if actually slow
2. Profile with DevTools
3. Identify bottleneck
4. Apply targeted fix

7. Error Handling

Error Boundary Usage

Error Recovery

• Show fallback UI
• Log error
• Offer retry option
• Preserve user data

8. TypeScript Patterns

Props Typing

Common Types

9. Testing Principles

Test Priorities

• User-visible behavior
• Edge cases
• Error states
• Accessibility

10. Anti-Patterns

11. File Structure

<img width="1150" height="1438" alt="image" src="https://github.com/user-attachments/assets/10369698-472c-4695-a494-2c0672103aa1" />

Use this image as a reference for a better file structure of the project

Remember: React is about composition. Build small, combine thoughtfully.

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Example

User request:

Use @react-patterns for this task: Modern React patterns and principles.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.