FreePublished on GitHub

react-patterns

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos

See how to install

Files included (1)

SKILL.md4.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

React Patterns

Principles for building production-ready React applications.

1. Component Design Principles

Component Types

Type	Use	State
Server	Data fetching, static	None
Client	Interactivity	useState, effects
Presentational	UI display	Props only
Container	Logic/state	Heavy state

Design Rules

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

2. Hook Patterns

When to Extract Hooks

Pattern	Extract When
useLocalStorage	Same storage logic needed
useDebounce	Multiple debounced values
useFetch	Repeated fetch patterns
useForm	Complex form state

Hook Rules

Hooks at top level only
Same order every render
Custom hooks start with "use"
Clean up effects on unmount

3. State Management Selection

Complexity	Solution
Simple	useState, useReducer
Shared local	Context
Server state	React Query, SWR
Complex global	Zustand, Redux Toolkit

State Placement

Scope	Where
Single component	useState
Parent-child	Lift state up
Subtree	Context
App-wide	Global store

4. React 19 Patterns

New Hooks

Hook	Purpose
useActionState	Form submission state
useOptimistic	Optimistic UI updates
use	Read resources in render

Compiler Benefits

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

Use Case	Prefer
Reusable logic	Custom hook
Render flexibility	Render props
Cross-cutting	Higher-order component

6. Performance Principles

When to Optimize

Signal	Action
Slow renders	Profile first
Large lists	Virtualize
Expensive calc	useMemo
Stable callbacks	useCallback

Optimization Order

Check if actually slow
Profile with DevTools
Identify bottleneck
Apply targeted fix

7. Error Handling

Error Boundary Usage

Scope	Placement
App-wide	Root level
Feature	Route/feature level
Component	Around risky component

Error Recovery

Show fallback UI
Log error
Offer retry option
Preserve user data

8. TypeScript Patterns

Props Typing

Pattern	Use
Interface	Component props
Type	Unions, complex
Generic	Reusable components

Common Types

Need	Type
Children	ReactNode
Event handler	MouseEventHandler
Ref	RefObject<Element>

9. Testing Principles

Level	Focus
Unit	Pure functions, hooks
Integration	Component behavior
E2E	User flows

Test Priorities

User-visible behavior
Edge cases
Error states
Accessibility

10. Anti-Patterns

❌ Don't	✅ Do
Prop drilling deep	Use context
Giant components	Split smaller
useEffect for everything	Server components
Premature optimization	Profile first
Index as key	Stable unique ID

11. File Structure

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.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

agent-manager-skill

Free

Use when manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agent-memory-mcp

Free

Use when a hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

Reference for how BDB structures autonomous software engineering work — the seven-node dispatcher graph (Architect, TechLead, UI/UX, Engineering, Media/EventTech, Reviewer, Shipping) that /startcycle-graph actually runs. Use when you need the high-level lifecycle framing without inventing your own process.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agent-tool-builder

Free

Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agentic-harness-patterns

Free

Harness patterns for coding agents — memory, permissions, context engineering, delegation, skills, hooks, bootstrap.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agenttrail

Free

agenttrail: live map of a multi-agent build in the browser: which plan component is being worked on, by which agent or harness, what is done and what is stuck. Use when a multi-agent pipeline starts (/startcycle, /startcycle-graph, /teamwork-preview) or after a plan-canvas approve, when the user asks to see what the agents are doing ("live map", "build board", "who is running now"), or by yourself whenever a multi-agent run is under way — no user prompt needed.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

See all skills by hybridlabor-api

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/hybridlabor-api/aos --skill react-patterns

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/hybridlabor-api/aos/tree/main/skills/global_config/react-patterns

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/react-patterns/ for Claude Code, or ~/.agents/skills/react-patterns/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: hybridlabor-api/aos
Stars: 6
Forks: 0
Category: Development
License: Apache-2.0
Original language: English
Last updated: Oct 16, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.

Files included (1)

SKILL.md (original)

React Patterns

1. Component Design Principles

Component Types

Design Rules

2. Hook Patterns

When to Extract Hooks

Hook Rules

3. State Management Selection

State Placement

4. React 19 Patterns

New Hooks

Compiler Benefits

5. Composition Patterns

Compound Components

Render Props vs Hooks

6. Performance Principles

When to Optimize

Optimization Order

7. Error Handling

Error Boundary Usage

Error Recovery

8. TypeScript Patterns

Props Typing

Common Types

9. Testing Principles

Test Priorities

10. Anti-Patterns

11. File Structure

When to Use

Limitations

Reviews

Comments

More skills from this repository

agent-manager-skill

agent-memory-mcp

agent-pipeline

agent-tool-builder

agentic-harness-patterns

agenttrail