# Tablet recipe cook mode > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The screen a recipe app ("Pantry Press") shows when the tablet is propped up next to the stove. It shows one step at a time, in type big enough to read from a metre away, with messy hands. The ingredients for that step sit in a dark olive panel on the right, each with a large tick box. Two timers live as chips in the top bar. When one runs out it turns tomato red and pulses gently until tapped. A green dot says the screen will stay on. Move between steps by swiping the step text or with 72px Back and Next buttons. The look is bold kitchen: cream paper, dark olive ink, one tomato red, heavy rounded Rubik. The detail worth copying is that the time in each step is set in red inside the sentence, and the matching timer is one tap away under it. ## Reference behaviour 1. First frame: step 4 of 7, "Tip in the tomatoes and chickpeas. Simmer until thick and glossy, 10 minutes." with "10 minutes." in tomato red. The tip reads "Squash a few chickpeas with the spoon. It thickens the sauce." A "Start 10 min sauce timer" button sits under it. The panel lists four ingredients. Chopped tomatoes and Chickpeas are ticked. The footer reads "2 of 4 still to add" and "Next step needs: Eggs". 2. The top bar shows two running timer chips: Bread 0:18 and Sauce 9:48. Both count down once a second. "Screen stays on" shows with a green dot. 3. When Bread reaches zero, its chip turns tomato red, the pause icon becomes a bell, the time reads "Done", and a soft ring pulses out from the chip every 1.8s. A screen reader hears "Bread timer is done". 4. Tap a running chip: it pauses and the time turns grey-olive. Tap again: it resumes. Tap a done chip: it stops ringing and resets to its full time, paused. 5. Tap "Start 10 min sauce timer": the Sauce chip restarts at 10:00. Starting a timer with a new name replaces a done chip first, then a paused one, then the first chip. There are never more than two chips. 6. Tap an ingredient row: its box fills cream with an olive tick, the name gets a line through it at 60% opacity. The footer count updates. With all ticked it reads "All in. On to the next step." 7. Tap Next ("Next: Add the eggs"): step 5 slides in from the right. Back slides the previous step in from the left. Back is disabled on step 1. On step 7, Next reads "Finish". 8. Drag the step text sideways: it follows the finger. Let go past 80px to change step. Under 80px it springs back in 240ms. At the first or last step the drag moves at a quarter speed and always springs back. 9. Tap a step dot to jump to that step. Left and Right arrow keys move one step. 10. Ticks are kept per step. Going back to step 4 shows the same ticks. 11. A step with no new ingredients shows "Nothing new to add. Keep the lid close." in the panel. 12. Tap "Screen stays on": it changes to "Screen may sleep" and the dot turns grey. Where the Wake Lock API exists, it is requested and released to match. ## Structure ``` 1180 × 820, 24px top clearance ┌──────────────────────────────────────────────────────────────────────────────┐ │ (X) Chickpea shakshuka (‖ Bread 0:18) (‖ Sauce 9:48) ● Screen on │ 56 │ Pantry Press · Serves 4 · 35 min │ ├───────────────────────────────────────────────────────┬──────────────────────┤ │ │ FOR THIS STEP │ │ (4) STEP 4 OF 7 │ Tick as you add │ │ │ [x] Chopped tomatoes │ 72 │ Tip in the tomatoes │ [x] Chickpeas │ │ and chickpeas. 54px / 800 │ [ ] Sugar │ │ Simmer until thick and │ [ ] Salt │ │ glossy, 10 minutes. ← red │ │ │ (bulb) Squash a few chickpeas… 19px │ 2 of 4 still to add │ │ [ (clock) Start 10 min sauce timer ] 56px │ Next step needs: Eggs│ ├──────────────────┬────────────────────────────────────┼──────────────────────┤ │ [ < Back ] │ ● ● ● ▬▬ ● ● ● │ [ Next: Add the eggs >]│ 72 └──────────────────┴────────────────────────────────────┴──────────────────────┘ 220 minmax(0,1fr) 340 padding 0 28px 24px, row gap 20px, column gap 28px ``` - `.app` is a grid with rows `auto minmax(0,1fr) auto`, padding `0 28px 24px`, gap 20px. - `

`: a 56px close button, the recipe title and meta, a `role="group" aria-label="Timers"` holding two chip buttons, the wake button with `aria-pressed`. - `

`: a grid `minmax(0,1fr) 340px`, gap 28px. - `

` holds `.slide` with `aria-live="polite"`: the step badge and label, the step sentence as the `h1`, the tip, and the timer start button. - `