What this prompt does
This prompt assigns the model the role of a senior mobile UI engineer and asks it to specify a weekly meal planner screen tightly enough to build, returning working component code rather than pseudocode. Meal planners look simple until drag-and-drop and a derived grocery list meet real state, which is where the bugs hide, so the prompt is structured around that recompute. Four variables steer it: [stack] sets the framework (React Native by default), [meal_slots] defines the slots per day, [recipe_source] says where recipes come from (the user's saved library), and [grocery_grouping] decides how the list is organized, like by store section.
The deliverables include a 7-day grid with the meal slots as drop targets, drag-and-drop recipes from a searchable library into any slot, an auto-generated grocery list aggregated and grouped by store section, a per-day nutrition summary that recalculates as meals change, and the ability to save the current week as a reusable template and reload it. It also asks for empty, loading, and conflict states — such as a slot that already has a meal — so the recompute-heavy UI stays predictable when state changes on every edit. Because the prompt asks for working component code and a sample week, recipe, and grocery data shape rather than pseudocode, the drag-and-drop, the derived grocery list, and the nutrition summary all share a concrete data model, which is what keeps the deduping and recompute logic honest once real recipes and real edits start hitting the screen.
When to use it
- Building a weekly meal planner with drag-and-drop scheduling
- Generating a grocery list that aggregates and dedupes ingredients
- Defining meal slots per day through
[meal_slots] - Pulling recipes from a
[recipe_source]like a saved library - Grouping the grocery list by
[grocery_grouping]such as store section - Handling conflict states when a slot already holds a meal
Example output
You get components, props and types, and a sample week, recipe, and grocery data shape: the 7-day grid with slots as drop targets, the drag-and-drop from a searchable recipe library, the auto-generated grocery list grouped by store section, the per-day nutrition summary that recalculates on change, the save-as-template feature, and the empty, loading, and conflict states.
Pro tips
- Get the grocery-list aggregation right early; deduping ingredients across recipes is the part people always underestimate.
- Set
[grocery_grouping]to match how users shop, like produce, dairy, and pantry, so the list is genuinely useful in store. - Define
[meal_slots]precisely so the grid drop targets match the user's day. - Point
[recipe_source]at the real library so search returns the right recipes into slots. - Ask for the conflict state explicitly — what happens when a slot already has a meal is where the UI quietly breaks.
- Keep the nutrition summary recalculating on every edit so the numbers never lag behind the plan.
