utopia-hooks

A screen an agent writes without this skill still compiles. It just does not look like ours - a StatefulWidget with logic threaded through setState calls, instead of one hook and one State class. Here is the difference the skill enforces:

// Without the skill: logic lives in the widget, mutated by setState.
class CounterPage extends StatefulWidget {
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int value = 0;

  @override
  Widget build(BuildContext context) => CounterView(
        value: value,
        onPressed: () => setState(() => value++),
      );
}

// With the skill: a State class holds the logic, one hook drives it,
// the View is a pure StatelessWidget reading only that state.
class CounterPageState {
  final int value;
  final VoidCallback onPressed;
  const CounterPageState({required this.value, required this.onPressed});
}

CounterPageState useCounterPageState() {
  final state = useState(0);
  return CounterPageState(value: state.value, onPressed: () => state.value++);
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
      const HookCoordinator(use: useCounterPageState, builder: CounterView.new);
}