Stats
Actions
Available In
Tags
Plugin
react-tips
Guide React and JavaScript coding with interactive skills that validate useEffect necessity via decision trees—suggesting alternatives like derivations or queries—apply high-impact patterns for state management, performance, hooks, and component design, and promote ES2025/ES2026 APIs over legacy code during writing or review.
What's Inside
Skills3
modern-js
/modern-js
Use when writing or reviewing JavaScript - prefer ES2025/ES2026 APIs (Iterator helpers, Set methods, Temporal, using, Promise.try, Error.isError, Math.sumPrecise, Map.getOrInsert) over older patterns.
no-unnecessary-effects
/no-unnecessary-effects
Before writing useEffect, run through a decision tree to verify it's actually needed. Prevents the most common React anti-pattern in AI-generated code.
react-tips
/react-tips
10 high-impact React patterns and anti-patterns - state management, performance, hooks, and component design. Use when writing or reviewing React components.
README
React Tips - Claude Code Plugin
High-impact React and JavaScript patterns for writing better code. Extracted from the Daily React newsletter by Dan Neciu.
What's Inside
react-tips
10 React patterns and anti-patterns for state management, performance, hooks, and component design:
- useReducer for related state - Prevent impossible state combinations
- useTransition over debounce - Keep UIs responsive during heavy work
- State colocation - Free performance by moving state closer to consumers
- useEffect mental model - It's synchronization, not a lifecycle hook
- Stable keys - Never use index as key
- useMemo anti-patterns - Stop memoizing cheap operations
- Single Responsibility - One reason to change, not "one thing"
- Key prop resets - Delete useEffect by changing the key
- useLayoutEffect - Kill tooltip flicker with synchronous DOM measurement
- Compound Components - Build composable APIs with Context
no-unnecessary-effects
A decision tree that stops the AI from reaching for useEffect when a better alternative exists. Covers every common misuse: derived state, event handling, state resets, data fetching, parent notifications, effect chains, and external store subscriptions.
Full article: You really, really, really don't need an effect! I swear!
modern-js
A lookup table of ES2025 and ES2026 APIs that models trained before 2025 don't reach for by default: Iterator helpers, Set methods, Temporal, using, Promise.try, Error.isError, Math.sumPrecise, Map.getOrInsert, native JSON imports, import defer, and more. The skill forces Claude to check output against modern alternatives before finalizing code.
Full article: What's actually new in JavaScript (and what's coming next)
Install
Add the marketplace:
/plugin marketplace add Cst2989/react-tips-skill
Install the plugin:
/plugin install [email protected]
Usage
Once installed, the skills are available in Claude Code. They activate automatically when you're writing or reviewing React components. You can also invoke them directly:
/react-tips:react-tips
/react-tips:no-unnecessary-effects
/react-tips:modern-js
Read More
- 10 React tips I wish someone had told me before I mass-produced bugs
- You really, really, really don't need an effect! I swear!
- What's actually new in JavaScript (and what's coming next)
License
MIT
Stats
Version1.2.0
Stars18
Forks1
MaintenanceExcellent
LicenseMIT
Last Commit
Added
Available In
Tags
