React

React UI Engineering AI Skill Guide

Overview & Engine Architecture

React models UI as a tree of function components that return elements. State updates schedule re-renders; hooks let components subscribe to state, context, and lifecycle-like effects. Agents keep components pure where possible, minimize effect churn, choose controlled vs uncontrolled inputs deliberately, and ship accessible markup (labels, roles, keyboard support).

Component tree
  -> render (pure-ish)
      -> hooks state / context
          -> commit to DOM
              -> effects run

When to use this skill

• Building UI components and forms
• Refactoring prop-drilling into composition or context (sparingly)
• Fixing effect infinite loops and stale closures
• Improving accessibility of interactive controls

Operational directives

1. Derive values during render instead of mirroring props into state.
2. List useEffect dependencies correctly; do not empty the array to "run once" if you read changing values.
3. Give stable unique keys (IDs), never array index for reorderable lists.
4. Prefer composition (children) over boolean prop sprawl.
5. Interactive controls need keyboard access and visible focus.

Patterns

Controlled input:

function Search({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  return (
    <label>
      Search
      <input value={value} => onChange(e.target.value)} />
    </label>
  );
}

Avoid effect for derived state:

// Bad: syncing fullName into state from props
// Good:
const fullName = `${user.first} ${user.last}`;

Common bugs

Best practices

• Colocate state with the lowest common consumer.
• Use error boundaries for recoverable UI regions.
• Test behavior with Testing Library (role/text queries).
• Keep side effects (network) in dedicated hooks or server layers.

Limitations

• Concurrent features and framework integrations (Next.js) change data-fetching defaults.
• Global state libraries (Redux, Zustand) need team conventions beyond this skill.
• CSS strategy (CSS modules, Tailwind, etc.) is orthogonal.

Related skills

• @nextjs - React within App Router constraints
• @typescript - typing props and hooks
• @playwright - end-to-end UI verification