Guide React development, review, and refactoring with React 19 patterns.
npx skills add https://github.com/MolcajeteAI/plugin --skill react-writing-code
Please help me install this Agent Skill. Skill: react-writing-code Source: https://github.com/MolcajeteAI/plugin/tree/main/molcajete/skills/react-writing-code Command: npx skills add https://github.com/MolcajeteAI/plugin --skill react-writing-code
This Skill provides guidance and best practices for writing, reviewing, and refactoring React code, ensuring maintainability, performance, and adherence to modern patterns.
ref as a prop.Use the react-writing-code skill to refactor a component to use composition over configuration.
High-intent search queries and answers about installing and using this skill.
To refactor React components using composition, build flexible UI components by extracting stateful logic into custom hooks. This approach ensures your React code remains maintainable and reusable without relying on complex configuration props.
Managing React state with Zustand handles global client state efficiently, while urql manages server and remote data fetching. Choosing the right tool for different state types ensures your React application maintains performance and scalability.
React 19 server components and Actions change frontend development by allowing server-side rendering and direct server mutations. This modern pattern reduces client-side JavaScript and optimizes performance bottlenecks in your React application.
You should extract custom hooks for state management in React when component logic becomes complex or reusable. Extracting stateful logic into custom hooks ensures code quality, maintainability, and efficient component composition.
To identify and fix performance bottlenecks in React, analyze component rendering patterns and optimize state management with tools like Zustand. Applying modern React patterns ensures efficient rendering and maintains application performance.
Yes, this React guidance covers using ref as a prop in component development. Understanding this React 19 feature allows you to build reusable components and manage DOM access efficiently without breaking composition patterns.
sevenbelowllcInitialize React projects and bundle them into single HTML files.
stardustrainApply React and Next.js performance optimization guidelines to code structure, rendering, and data fetching.
neozenithIntegrate Google ADK with Vite, React, TypeScript, Tailwind CSS, and Shadcn UI.
mae616Analyze Svelte/SvelteKit projects for compile-time reactivity and state management optimizations.