実例: 「お気に入り」機能

小さな機能を端から端まで作ってみましょう。ユーザーがリスト内の項目をお気に入りとしてマークでき、いくつお気に入りにしたかの件数を見られる、という機能です。

切り分ける

私ならこう垂直ステップに分割します。

各項目の隣に星ボタンを追加する(まだ何もしない、ただ表示されるだけ)。
星をクリックすると、オン/オフの見た目が切り替わる(状態のみ、保存はしない)。
トグルを反映した「★ 3 favorites」のカウンターを表示する。
お気に入りを保存して、ページのリロード後も残るようにする。

各ステップが独立して実行可能で、目に見えることに注目してください。どのステップの後で止めても、動くアプリが手元に残ります。

ステップ1: ボタン

良いプロンプトは、ファイル名、変更内容、そして触らないものを名指しします。

In the ItemCard component (src/components/ItemCard.jsx), add a star
button in the top-right corner of each card. It should render an
outline star icon. Don't wire up any click behavior yet — just make
it appear. Keep the rest of the card layout unchanged.

アプリを実行します。星が見えますか? いいですね。コミットします。

git add -A && git commit -m "Add star button to item cards"

ステップ2: 状態をトグルする

Make the star button toggle between filled and outline when clicked.
Track this with local component state — don't save it anywhere yet.
A filled star means favorited.

これであなたは状態とUIを一緒に扱っていますが、これは普通のことです。AIはおそらく次のようなものを追加するでしょう。

const [isFavorite, setIsFavorite] = useState(false);

<button onClick={() => setIsFavorite(!isFavorite)}>
  {isFavorite ? <StarFilled /> : <StarOutline />}
</button>

星をいくつかクリックしてみます。切り替わりますか? コミット。

ステップ3: カウンター

Add a "★ N favorites" counter at the top of the item list. It should
count how many items currently have their star filled. Lift the
favorite state up to the list component if you need to so the counter
can see it.

このステップでは、AIに状態の置き場所を再構成してもらう必要があるかもしれません — それは想定内で、まさにそれを独立した小さなステップとしてやる理由です。実行して、星をいくつか切り替え、数字が変わるのを見ます。コミット。

ステップ4: 永続化する

Persist favorites so they survive a page reload. Use localStorage for
now — save the list of favorited item IDs whenever it changes, and
load it on startup.

ページをリロードします。まだお気に入りのままですか? あなたは今、実行可能なスライスを一つずつ重ねて、機能を出荷したのです。