skills.rest
taikiwt
taikiwtCOMMUNITY
Explore all skills by this author →
𝕏@taikiwtGitHub

React & UI Rules

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
One-click install
npx skills add https://github.com/taikiwt/sitecue --skill react-ui-rules
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
hackefellerhackefeller
1

react-patterns

Standardize React component design, naming, and state management patterns.

Official
Basic
hasnaxyzhasnaxyz

react

Render JSON UI specifications into React component trees with type-safe catalogs.

Official
Advanced
aussiegingersnapaussiegingersnap
9

state-tanstack

Orchestrate React server and client state with Tanstack Query and Zustand.

Community
Intermediate
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced