react-patterns
Write React components with minimal state, proper memoization, and type-safe patterns. Use when creating components, managing state, or optimizing renders.
How do I install this agent skill?
npx skills add https://github.com/casper-studios/casper-marketplace --skill react-patternsIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill consists of documentation and code examples for React development best practices, covering state management, memoization, and conditional logic. No malicious code, network operations, or security vulnerabilities were identified.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
4/4 files flagged
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
React Patterns
Core React patterns for component design, state management, and optimization.
State Philosophy
Avoid state variables. Prefer derived values and props. Scope state to the smallest subtree that needs it. Use discriminated unions for complex state.
See state-management.md for:
- Derived values over state
- Component boundaries for state scoping
- Context API patterns
- Zustand for complex state
- State machines over multiple useState
Memoization
Required for any O(n) operation. Memoize atomically to minimize dependency arrays. Use Loader/Inner pattern to narrow types before useMemo.
See memoization.md for:
- When to useMemo
- Atomic memoization
- useCallback for handlers
- Loader/Inner pattern for type narrowing
Conditional Logic
Use affirmative logic, explicit conditionals, and ternaries over &&. Early returns for guard clauses.
See conditional-logic.md for:
- Affirmative logic
- Explicit conditionals
- Conditional rendering
- Type narrowing with conditionals
- Early returns
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/casper-studios/casper-marketplace/react-patterns">View react-patterns on skillZs</a>