React & UI Rules

Name: React & UI Rules
Availability: InStock
Author: taikiwt

Enforce React UI rules for optimistic UI, accessibility, and SSR-safe patterns.

Updated Jan 27, 2026

Search Tags:#ui #accessibility #frontend #react #state-management #ux #ssr

Ready to run

npx skills add https://github.com/taikiwt/sitecue --skill react-ui-rules

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: React & UI Rules
Source: https://github.com/taikiwt/sitecue/tree/main/.agent/skills/react
Command: npx skills add https://github.com/taikiwt/sitecue --skill react-ui-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The rules provide a reference for optimistic UI, sorting, UX, and React implementation standards to ensure consistent, predictable user experiences.

Core Features & Use Cases

Enforces optimistic UI behavior with proper state locking during API calls.
Separates UI state from server state using Zustand and TanStack Query for reliable data handling.
Covers complex UI patterns such as drag-and-drop, hierarchical navigation, accessibility, responsive design, and SSR hydration safety.
Provides concrete guidelines that reduce bugs caused by improper DOM nesting, event handling, and CSS specificity.

Quick Start

Apply these rules by auditing your React components and adopting the patterns described to enforce consistent UI behavior across the project.

Frequently Asked Questions about React & UI Rules

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

FAQPage Schema

How do I enforce consistent React UI rules for UX across multiple frontend projects?▼

Separate UI state from server state in React by using Zustand for local UI behavior and TanStack Query for server data, ensuring reliable data handling and preventing state mutation conflicts during API calls.

What is the best way to handle optimistic UI state locking during API calls in React?▼

Handle optimistic UI in React by locking component state during active API calls, preventing duplicate user interactions and ensuring the interface accurately reflects pending server synchronization without visual inconsistency.

How do I prevent SSR hydration mismatches when building accessible React components?▼

Prevent SSR hydration mismatches in React by applying SSR-safe rendering patterns that ensure server-generated DOM matches client output, maintaining accessibility and hierarchical navigation integrity during initial load.

Does this React UI ruleset work with drag-and-drop and complex hierarchical navigation patterns?▼

The React UI ruleset supports drag-and-drop and hierarchical navigation by providing concrete guidelines for DOM nesting, event handling, and CSS specificity, reducing bugs in complex interactive component patterns.

How do I audit existing React components to apply standard UI implementation rules?▼

Audit existing React components by checking them against standard UI implementation rules covering state separation, accessibility, and responsive design, then adopt the specified patterns to enforce consistent behavior throughout the project.