Enforce React component discipline for pure components, minimal state, and correct hook usage.
npx skills add https://github.com/xobotyi/cc-foundry --skill react-xobotyi
Please help me install this Agent Skill. Skill: react Source: https://github.com/xobotyi/cc-foundry/tree/main/plugins/frontend/skills/react Command: npx skills add https://github.com/xobotyi/cc-foundry --skill react-xobotyi
This Skill enforces best practices for building robust, maintainable, and performant React applications, preventing common pitfalls in component design, state management, and hook usage.
useState, useReducer, and Context.useEffect as an escape hatch.Apply React component best practices to the provided code snippet.
High-intent search queries and answers about installing and using this skill.
To manage React component state optimally, you should minimize stateful logic, position state at the correct component level, and choose between useState, useReducer, and Context based on complexity. This approach prevents unnecessary re-renders and maintains performance.
To keep React components pure, you must ensure they function strictly as pure functions without side effects, applying composition over configuration. This leads to predictable behavior and cleaner, more efficient user interfaces.
You should use useEffect in React as an escape hatch for synchronizing external systems rather than for data transformations. Correct hook lifecycles and minimal usage prevent common pitfalls and maintain component purity.
Yes, this approach works for reviewing existing React code by checking it against modern patterns for component purity, state management, and correct hook lifecycles. It ensures adherence to best practices for robust, performant applications.
YeomanYeOrchestrate JSX UI development by routing tasks through boundary analysis and audits.
mako-aiInstrument React components and collect render metrics to identify performance bottlenecks.
gaoqiongxieBuild interactive web applications with React 18, Tailwind CSS, and shadcn/ui components.
rajeshygEnforce JavaScript/JSX coding standards for React components and hooks.