Build components from content slots, with every state

Ask an agent for a card component and it'll give you one. Ask what goes in it and it'll make that up too. Start from the content instead.

Your content model already lists the slots each page type holds. For the bakery, every loaf has a name, a price, its allergens, and whether it's available today: available, few left or sold out. Each slot becomes one part of the loaf's entry, and nothing else goes on it. There's no star rating, because no slot holds one.

Another fictional client, a walking-holiday company called Fell and Tarn, has three optional slots: the next departure, a starting price and a photo. That's where the design work is, because each one is a case the component has to handle empty.

Variants follow the same rule: one exists only when the content differs and you can name how. A loaf that's running low gets a gold few left badge. A sold-out loaf says so, and loses its quantity buttons. A dark card for variety has no content reason, so it's cut.

Then the states. Here's the list with the head baker's real content. A list you've only seen like this isn't finished. Empty: before the day's list is in, Today's bread has nothing to show, so it says so and points to the hours. A loaf that's sold out says so too, and loses its quantity buttons. Loading: for the moment before the list arrives, each row keeps its full height, so nothing on the page jumps when the data lands. Broken: the list doesn't arrive, so the page says so and gives the shop's phone number. And when one price is missing from the data, the row shows a confirm marker for the review to catch. Never a price someone guessed. Longest: the longest allergen line on the real list, at the narrowest width, three hundred and twenty pixels. It wraps to two lines. Every name and price stays on one line, and nothing scrolls sideways. Five versions of one list. Each is a decision, and if you don't make it, the agent will.

Write the states down beside the component, in words, before an agent builds it. Here they are for Fell and Tarn's walk list. The error state offers a phone number, because an apology on its own is a dead end.

You'll recognize generated components quickly: every card exactly three lines long, icons that illustrate nothing, ratings nobody supplied. If a component only looks right with invented text, it was built for the invented text.

Then check it with the client's real content, and break it on purpose. Blank each slot that could arrive empty. Slow the connection, then cut it off. Paste in the longest real value at your narrowest width. Expect one of these to catch something you missed.

Components come from slots. Variants come from real differences in the content. And nothing's finished until you've seen it empty, loading, broken and at its longest.