Skip to content

Cst2989/react-tips-skill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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:

  1. useReducer for related state - Prevent impossible state combinations
  2. useTransition over debounce - Keep UIs responsive during heavy work
  3. State colocation - Free performance by moving state closer to consumers
  4. useEffect mental model - It's synchronization, not a lifecycle hook
  5. Stable keys - Never use index as key
  6. useMemo anti-patterns - Stop memoizing cheap operations
  7. Single Responsibility - One reason to change, not "one thing"
  8. Key prop resets - Delete useEffect by changing the key
  9. useLayoutEffect - Kill tooltip flicker with synchronous DOM measurement
  10. 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 react-tips@neciudan.dev

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

License

MIT

About

Claude Code plugin: 10 high-impact React patterns and anti-patterns

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors