Frontend

React Engineering

Keeps React component ownership, state, effects, types and data flow understandable as an app grows.

What it does

Keeps React component ownership, state, effects, types and data flow understandable as an app grows.

When to use it

Use for React or Next.js implementation, hook and state bugs, component refactors, or client-server boundary decisions.

Problems it prevents

Stops the slow drift into unowned state, effect soup and components nobody can safely change.

Typical workflow

  1. Assign clear component ownership
  2. Choose the right state model
  3. Keep effects safe and minimal
  4. Verify types and data flow

Example output

A component tree where state lives at the right level and every effect has a single, traceable reason to run.

What's included

  1. 01
    The complete prompt

    The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

  2. 02
    Install walkthrough

    Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

  3. 03
    Use notes

    How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Installation

Save the manual as SKILL.md in ~/.claude/skills/react-engineering/ to use it on every project, or in .claude/skills/react-engineering/ to scope it to one repository. Then invoke it directly:

/react-engineering

Read the official Claude Code skills guide

Works well with

Save by bundling

Get React Engineering as part of Frontend Builder: five skills that work together as one toolkit, for £1.96 less than buying all five separately.

View Frontend Builder (£9.49)