Guide React development with component architecture, hooks, and performance patterns.
npx skills add https://github.com/drimchansky/agents-kit --skill react-drimchansky
Please help me install this Agent Skill. Skill: _react Source: https://github.com/drimchansky/agents-kit/tree/main/skills/_react Command: npx skills add https://github.com/drimchansky/agents-kit --skill react-drimchansky
This Skill provides guidance on writing efficient, maintainable, and performant React code by outlining best practices for components, hooks, performance optimization, and common patterns.
useRef, useReducer, and useEffect.memo, useMemo, useCallback, and proper key usage to optimize rendering.Review the best practices for using React hooks.
High-intent search queries and answers about installing and using this skill.
Optimize React component rendering by applying memoization techniques using memo, useMemo, and useCallback to prevent unnecessary re-renders, alongside proper key assignment for list items. These performance tuning practices ensure efficient state management.
React hooks best practices involve following the Rules of Hooks and knowing when to implement custom hooks, useRef, useReducer, and useEffect for efficient state management. Proper hook usage maintains component focus and ensures scalable frontend architecture.
Use useReducer instead of useState in React when managing complex state logic across multiple components or when the next state depends on the previous one. This pattern implementation ensures maintainable state management and predictable component behavior.
Prevent prop drilling in React component design by prioritizing composition over passing props through multiple layers. This component architecture approach keeps components focused, reusable, and structured for scalable user interface development.
No, this React Skill requires zero dependencies or external libraries. It provides standalone guidelines for component architecture, hook implementation, and performance optimization applicable directly within your existing frontend development workflow.
React useEffect causes infinite loops when dependency arrays are mismanaged or state updates trigger continuous re-renders. Following proper hook usage guidelines and dependency management ensures efficient rendering and prevents performance degradation.
sevenbelowllcInitialize React projects and bundle them into single HTML files.
Jst-Well-DanCreate distinctive frontend interfaces with HTML/CSS/JS and modern frameworks.
zenobi-usDevelop accessible React, Vue, or Angular components with TypeScript strict mode.
xiaobei930Implement frontend patterns for component design, state management, performance, and accessibility across Vue, React, Svelte, and Angular.