React ui engineering

Skill SHIHAOZOU/ai-frontend-engineering-skills/skills/react-ui-engineering

Production-ready frontend Agent Skills for Codex, Claude Code & Cursor—covering React development, debugging, refactoring, code review, bilingual docs, and npx skills installation. 面向 Codex、Claude Code 与 Cursor 的生产级前端 Agent Skills，覆盖 React 开发、Bug 修复、重构、Code Review 与双语工程规范，支持 npx skills 安装。

Install

npx -y skills add SHIHAOZOU/ai-frontend-engineering-skills --skill react-ui-engineering

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

17 days oldThe repository was created 17 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Implement and review React or Next.js components, hooks, state, rendering boundaries, and tests. Use whenever a task mentions React, JSX, TSX, Hooks, Context, Server Components, Hydration, or Next.js UI behavior.

SKILL.md

2.8 KB, as published. Nobody here has run it

React Engineering Skill

For the Simplified Chinese reference, read references/zh-CN.md when the user communicates primarily in Chinese or requests Chinese output.

Purpose

Produce predictable React behavior with explicit ownership, stable rendering boundaries, and accessible component APIs.

When to Use

Use for React components, hooks, Context, forms, data fetching, Server/Client Component boundaries, or render performance.

Inputs

Component behavior and states
React/framework version and rendering model
Existing component, hook, state, and test patterns
Design and API contracts

Outputs

Component boundary and ownership plan
Typed React implementation
Interaction tests and performance notes

Workflow

Identify framework version, router, rendering mode, and style system.
Search for equivalent components and hooks.
Decide server, client, local state, URL state, and cache ownership.
Design typed props, events, composition points, and error states.
Implement without effects for values that can be derived during render.
Add behavior-focused tests and inspect avoidable rerenders.
Validate hydration, keyboard behavior, and reduced motion where relevant.

Decision Tree

flowchart TD
  A[New React behavior] --> B{Needs browser API or interaction?}
  B -->|No| C[Prefer Server Component when supported]
  B -->|Yes| D[Client Component]
  D --> E{State shareable in URL?}
  E -->|Yes| F[URL state]
  E -->|No| G{Server-owned data?}
  G -->|Yes| H[Query/cache layer]
  G -->|No| I[Local state first]

Checklist

Hooks obey call-order rules.
State has a single owner.
Effects synchronize only with external systems.
Keys are stable and semantic.
Server/Client boundaries minimize JavaScript.
Tests use roles, names, and user interactions.

Constraints

MUST use function components unless the repository requires otherwise.
MUST NOT mutate props or state.
SHOULD NOT use useMemo, useCallback, or memo without measured value.
MUST NOT suppress Hydration errors instead of fixing their cause.

Examples

Good: derive filteredItems during render from items and query.

Bad: store filteredItems in state and synchronize it in an effect.

Anti-patterns

Giant components combining data, business rules, and presentation
Context used for rapidly changing local state
Index keys for reorderable lists
Client Components added only to access static utilities