Build, modify, and debug React components and hooks for EOS SaaS interfaces.
npx skills add https://github.com/antonyfmunoz/OS --skill react-antonyfmunoz
Please help me install this Agent Skill. Skill: react Source: https://github.com/antonyfmunoz/OS/tree/main/skills/tools/react Command: npx skills add https://github.com/antonyfmunoz/OS --skill react-antonyfmunoz
React development in the EOS SaaS codebase is prone to subtle UI bugs like incorrect state modeling, stale closures, effect loops, and misuse of client vs server state. This Skill helps you write React components that behave predictably under Strict Mode, concurrent rendering, and Suspense.
useState/useReducer), derived state (compute during render), and server state (React Query).useActionState, useOptimistic, useFormStatus, concurrent patterns, and React 19 use() with Suspense-ready cached promises.Use the react skill when updating the EOS SaaS UI in /opt/OS/saas to implement or debug a component, hook, or rendering flow while following React 18/19 and the project’s React Query + RHF + Zod rules.
High-intent search queries and answers about installing and using this skill.
Preventing React Strict Mode double-invocation issues requires keeping side effects out of render and maintaining pure components. This approach ensures predictable behavior by enforcing React purity rules and verifying correct hook dependency arrays.
The best way to manage server state vs client state is using React Query for server state and useState or useReducer for client state. Derived state should be computed during render to avoid stale closures and unnecessary re-renders.
Building typed and validated forms with React Hook Form and Zod involves integrating Zod schemas for type-safe validation. This ensures robust form handling by validating data on the client side before submission.
Yes, React 19 use() works with Suspense for cached promises. This modern capability allows you to unwrap promises directly within components, enabling Suspense-friendly rendering patterns for asynchronous data fetching.
Your React component has stale closures and incorrect state modeling due to side effects inside the render phase and improper hook usage. Enforcing declarative pure rendering with UI = f(state) resolves these common UI bugs.
antonyfmunozVendor shadcn/ui components into EOS SaaS repos with Radix and Tailwind.
hungrytechDesign, implement, and test React UI components with Vite and TypeScript.
Bbeierle12Build React forms with React Hook Form and Zod validation.
openwebfIntegrates WebF's Cupertino UI components into JavaScript projects.