react-writing-code

Write and refactor React code with server/client patterns and Zustand or urql.

Updated May 6, 2026
One-click install
npx skills add https://github.com/Abdullahmohammadaref/acar --skill react-writing-code-abdullahmohammadaref
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-writing-code
Source: https://github.com/Abdullahmohammadaref/acar/tree/main/.agents/skills/react-writing-code
Command: npx skills add https://github.com/Abdullahmohammadaref/acar --skill react-writing-code-abdullahmohammadaref

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps developers write and refactor React code following server/client patterns, ensuring maintainable and scalable codebases.

Core Features & Use Cases

  • Server/client pattern guidance for React 19 components
  • Actions, use() hook usage, component composition, and custom hooks
  • State management patterns with Zustand and urql, plus performance tips

Quick Start

Follow the rules above to structure React components into server/client layouts and apply recommended patterns in your codebase.

Frequently Asked Questions about react-writing-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure React components for server/client separation?

React server/client separation involves splitting components into server and client layouts following strict patterns. This guide provides rules for structuring these components, ensuring clear separation of concerns and maintainable codebases in real projects.

What is the best way to manage state in React with Zustand and urql?

Managing state with Zustand and urql involves applying specific state management patterns for scalable applications. This guide exposes guidelines and examples for integrating these libraries to handle performance-conscious data fetching and state.

How do I use the React use() hook and Actions in my codebase?

The React use() hook and Actions are used to handle asynchronous operations and component composition. This guide provides examples and best-practice rules for implementing these features correctly within your server/client component architecture.

Can I refactor existing React code to follow performance-conscious patterns?

Refactoring React code to follow performance-conscious patterns involves applying component composition and state management guidelines. This guide supports refactoring efforts by enforcing naming, structure, and best-practice rules for scalable codebases.

Why does my React component composition need clear separation of concerns?

React component composition needs clear separation of concerns to ensure maintainable and scalable codebases. This guide enforces structural rules and naming conventions to prevent tangled logic between server and client components.

Does this React guide cover custom hooks and performance tips?

Yes, this React guide covers custom hooks and performance tips alongside server/client patterns. It provides guidelines for Actions, the use() hook, and component composition to ensure performance-conscious practices in real projects.