react-patterns is agent-read markdown (skill) from kunanonj/ai-skills-hub: Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices..
Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.
What the file says
# 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
…
Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.
GET https://markdownregistry.com/api/v1/artifacts/art_22d75wfvvxnsemhx
GET https://markdownregistry.com/api/v1/resolve?ref=kunanonj/ai-skills-hub/react-patterns
GET https://markdownregistry.com/api/v1/blob/faf194b1a81ee8fb7693c85479f271ed9de2dfb82f57bdd49af35c9ef7cafdcf
Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
kunanonj/ai-skills-hub · .agents/skills/analyze-codebase-for-mcp/SKILL.md · Analyze an arbitrary codebase to identify functions, APIs, and data sources suitable for exposure as MCP tools…
kunanonj/ai-skills-hub · .agents/skills/api-analyzer/SKILL.md · Validates whether an API request is correct based on provided inputs (method, URL, headers, body, auth, query params)…
kunanonj/ai-skills-hub · .agents/skills/api-design-principles/SKILL.md · Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight…
kunanonj/ai-skills-hub · .agents/skills/architecture-decision-records/SKILL.md · Comprehensive patterns for creating, maintaining, and managing Architecture Decision Records (ADRs) that capture the…
kunanonj/ai-skills-hub · .agents/skills/backend-api-design/SKILL.md · Design RPC-style APIs with layered architecture (Controller → Manager → Repository). Use when creating new API…
kunanonj/ai-skills-hub · .agents/skills/backend-dev-guidelines/SKILL.md · You are a senior backend engineer operating production-grade services under strict architectural and reliability…
kunanonj/ai-skills-hub · .agents/skills/backend-security-coder/SKILL.md · Expert in secure backend coding practices specializing in input validation, authentication, and API security. Use…
kunanonj/ai-skills-hub · .agents/skills/browser-screenshot-diff/SKILL.md · Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay…
kunanonj/ai-skills-hub · .agents/skills/browser-testing-with-devtools/SKILL.md · Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use…
vodailocz/kilo-kit-mcp · skills/engineering/react-patterns/SKILL.md · Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
