|
1
|
--- |
|
2
|
name: recipe-creator |
|
3
|
description: Create recipes, suggest meals from ingredients, and handle dietary substitutions. |
|
4
|
--- |
|
5
|
|
|
6
|
# Recipe Creator |
|
7
|
|
|
8
|
Create recipes, suggest meals from available ingredients, handle dietary restrictions and conversions, explain cooking techniques, recommend dish pairings, and repurpose leftovers. All output is delivered as structured data in a full-stack web application with database persistence. |
|
9
|
|
|
10
|
## When to Use |
|
11
|
|
|
12
|
- User wants a recipe for a specific dish ("make me a mushroom risotto") |
|
13
|
- User has ingredients and wants meal ideas ("what can I make with chicken, rice, and tomatoes?") |
|
14
|
|
|
15
|
- User needs recipes for dietary restrictions ("I need a gluten-free dinner recipe") |
|
16
|
- User wants to scale a recipe up or down ("scale this to 8 servings") |
|
17
|
|
|
18
|
- User wants meal prep or batch cooking plans |
|
19
|
- User wants recipes created for a meal plan (even if the plan was generated by the meal-planner skill) |
|
20
|
|
|
21
|
- User asks to "fill in" or "build out" recipes referenced in a meal plan |
|
22
|
- User asks about ingredient substitutions ("I don't have buttermilk, what can I use?", "make this dairy-free") |
|
23
|
|
|
24
|
- User asks about cooking techniques ("how do I deglaze a pan?", "what's the right way to sear meat?") |
|
25
|
- User wants to convert an existing recipe ("turn this into a vegan version", "make this keto-friendly") |
|
26
|
|
|
27
|
- User asks what pairs well with a dish ("what goes well with risotto?", "what side dish for grilled chicken?") |
|
28
|
- User wants to repurpose leftovers ("I have leftover risotto, what can I do with it?") |
|
29
|
|
|
30
|
## When NOT to Use |
|
31
|
|
|
32
|
- Fitness-goal-driven meal planning with calorie targets, macro splits, or weekly periodization (use meal-planner skill — but come back here to create the actual recipes) |
|
33
|
- Health data analysis (use personal-health skill) |
|
34
|
|
|
35
|
**Overlap with meal-planner:** The meal-planner skill designs *what* to eat and *when*. This skill creates the *recipes themselves* — structured data with ingredients, steps, timers, nutrition, and images. If a meal plan references meals that don't have full recipes yet, use this skill to create them and link via `recipeId`. |
|
36
|
|
|
37
|
## Architecture: Full-Stack Recipe Web App |
|
38
|
|
|
39
|
All recipes are stored in a **database** and served through an **API**, displayed in a **React web app**. This means: |
|
40
|
|
|
41
|
- Recipes persist across conversations — the user's collection grows over time |
|
42
|
- New recipes are added via API calls; the frontend renders them automatically |
|
43
|
|
|
44
|
- No hardcoded components per recipe — recipes are structured data, not custom React components |
|
45
|
|
|
46
|
### Data Model |
|
47
|
|
|
48
|
**recipes table:** |
|
49
|
|
|
50
|
- id, title, description, heroImage |
|
51
|
- prepTime, cookTime, totalTime, difficulty |
|
52
|
|
|
53
|
- baseServings |
|
54
|
- ingredients (jsonb): array of `{ name, qty, unit, stepIndex[], shared? }` |
|
55
|
|
|
56
|
- steps (jsonb): array of `{ title, text, timerSeconds?, timerLabel?, image? }` |
|
57
|
- prepTimeline (jsonb): array of `{ label, start, end, type }` |
|
58
|
|
|
59
|
- nutrition (jsonb): `{ calories, protein, carbs, fat }` per serving |
|
60
|
- tags (text[]), allergens (text[]) |
|
61
|
|
|
62
|
- notes (jsonb): array of `{ label, text }` |
|
63
|
- createdAt |
|
64
|
|
|
65
|
**meal_plans table:** |
|
66
|
|
|
67
|
- id, title, description |
|
68
|
- days (jsonb): array of `{ label, meals: [{ slot, recipeId?, mealName, mealDescription, time, nutrition }] }` |
|
69
|
|
|
70
|
- shoppingList (jsonb): array of `{ item, qty, usedIn[] }` |
|
71
|
- prepTips (jsonb): array of `{ label, text }` |
|
72
|
|
|
73
|
- prepTimeline (jsonb): array of `{ label, start, end, type }` |
|
74
|
- createdAt |
|
75
|
|
|
76
|
### Frontend Pages |
|
77
|
|
|
78
|
1. **Home / Collection** — Grid of recipe cards with hero images, title, cook time, difficulty. Search bar and tag filters. |
|
79
|
1. **Recipe Detail** — Full recipe page with: |
|
80
|
|
|
81
|
- Hero image |
|
82
|
- Metadata bar (prep/cook/total time, difficulty, servings adjuster) |
|
83
|
|
|
84
|
- Smart-scaling ingredient list with checkboxes |
|
85
|
- Step-by-step instructions with inline images |
|
86
|
|
|
87
|
- Prep timeline (visual Gantt-style) |
|
88
|
- Nutrition panel (per serving, updates with serving size) |
|
89
|
|
|
90
|
- "Start Cooking Mode" button |
|
91
|
- Notes section (storage, substitutions, allergens) |
|
92
|
|
|
93
|
1. **Cooking Mode** — Full-screen step-by-step walkthrough: |
|
94
|
|
|
95
|
- One step at a time, large readable text |
|
96
|
- Built-in countdown timers |
|
97
|
|
|
98
|
- Step images inline |
|
99
|
- Prev/Next navigation |
|
100
|
|
|
101
|
- Wake lock to prevent screen dimming |
|
102
|
|
|
103
|
1. **Meal Plan** — Visual meal plan with: |
|
104
|
|
|
105
|
- Day-by-day layout with meal slots |
|
106
|
- Links to individual recipes |
|
107
|
|
|
108
|
- Weekend prep session timeline |
|
109
|
- Combined shopping list with checkable items and cross-references |
|
110
|
|
|
111
|
- Nutrition totals |
|
112
|
|
|
113
|
1. **Dashboard summary** — Recipe count, total cook time saved, most-used ingredients, etc. |
|
114
|
|
|
115
|
### API Endpoints |
|
116
|
|
|
117
|
- `GET /api/recipes` — List all recipes (supports `?search=` and `?tags=`) |
|
118
|
- `GET /api/recipes/:id` — Get single recipe |
|
119
|
|
|
120
|
- `POST /api/recipes` — Create recipe |
|
121
|
- `PUT /api/recipes/:id` — Update recipe |
|
122
|
|
|
123
|
- `DELETE /api/recipes/:id` — Delete recipe |
|
124
|
- `GET /api/recipes/dashboard` — Summary stats |
|
125
|
|
|
126
|
- `GET /api/meal-plans` — List meal plans |
|
127
|
- `GET /api/meal-plans/:id` — Get single meal plan |
|
128
|
|
|
129
|
- `POST /api/meal-plans` — Create meal plan |
|
130
|
- `DELETE /api/meal-plans/:id` — Delete meal plan |
|
131
|
|
|
132
|
### Build Workflow |
|
133
|
|
|
134
|
1. Write the OpenAPI spec with all endpoints above |
|
135
|
1. Run codegen to generate React hooks and Zod schemas |
|
136
|
|
|
137
|
1. Write DB schema and push to database |
|
138
|
1. Create the web app artifact and launch design subagent |
|
139
|
|
|
140
|
1. Implement API routes |
|
141
|
1. Seed the database with user's requested recipes (structured data, not components) |
|
142
|
|
|
143
|
1. Generate hero images for each recipe using `generateImage` |
|
144
|
1. Test end-to-end |
|
145
|
|
|
146
|
### Adding New Recipes (Ongoing) |
|
147
|
|
|
148
|
When the user requests new recipes in future conversations: |
|
149
|
|
|
150
|
1. Generate the recipe data (ingredients, steps, nutrition, etc.) |
|
151
|
1. Generate a hero image |
|
152
|
|
|
153
|
1. POST the recipe to the API |
|
154
|
1. The frontend automatically displays it in the collection |
|
155
|
|
|
156
|
No new components need to be written. The recipe is just data. |
|
157
|
|
|
158
|
## Recipe Generation |
|
159
|
|
|
160
|
### Recipe Card Features |
|
161
|
|
|
162
|
1. **Generated hero image** — Use `generateImage` to create a photorealistic hero image. Style: overhead or 45-degree angle, natural lighting, styled surface. |
|
163
|
1. **Step images** — For key technique steps, generate images showing what that step should look like. |
|
164
|
|
|
165
|
1. **Serving size adjuster with smart scaling** — Dynamic recalculation with intelligent unit conversion: |
|
166
|
|
|
167
|
```javascript |
|
168
|
|
|
169
|
const unitUpgrades = { |
|
170
|
|
|
171
|
tsp: { threshold: 3, to: "Tbsp", factor: 1/3 }, |
|
172
|
|
|
173
|
Tbsp: { threshold: 4, to: "cup", factor: 1/16 }, |
|
174
|
|
|
175
|
}; |
|
176
|
|
|
177
|
``` |
|
178
|
|
|
179
|
1. **Cooking mode** — Step-by-step walkthrough with countdown timers, wake lock, large text. |
|
180
|
1. **Prep timeline** — Visual Gantt chart showing overlapping tasks, color-coded by type. |
|
181
|
|
|
182
|
1. **Nutrition panel** — Per-serving values that update with serving size. |
|
183
|
|
|
184
|
### "What Can I Make?" Logic |
|
185
|
|
|
186
|
Think in **formula + flavor profile**, not recipe lookup: |
|
187
|
|
|
188
|
1. Bucket ingredients: protein / starch / veg / aromatic / fat / acid |
|
189
|
1. Match a base formula (stir-fry, braise, grain bowl, frittata, soup, sheet-pan roast) |
|
190
|
|
|
191
|
1. Assign a flavor direction based on what's in the pantry |
|
192
|
1. Every savory dish needs fat + acid + salt to taste finished |
|
193
|
|
|
194
|
1. Rank suggestions by fewest missing ingredients |
|
195
|
|
|
196
|
### Ratios — Cook Without a Recipe |
|
197
|
|
|
198
|
From Ruhlman's *Ratio*. **All by weight**: |
|
199
|
|
|
200
|
| Thing | Ratio | Notes | |
|
201
|
|
|
202
|
|-------|-------|-------| |
|
203
|
|
|
204
|
| Bread dough | 5 flour : 3 water (+yeast, salt 2%) | 60% hydration = sandwich, 75%+ = ciabatta | |
|
205
|
|
|
206
|
| Pasta dough | 3 flour : 2 egg | ~100g flour per person | |
|
207
|
|
|
208
|
| Pie dough | 3 flour : 2 fat : 1 water | Fat cold, water iced | |
|
209
|
|
|
210
|
| Cookie | 1 sugar : 2 fat : 3 flour | Base for shortbread -> choc chip | |
|
211
|
|
|
212
|
| Pancake | 2 flour : 2 liquid : 1 egg : 1/2 fat | Thinner = crepe | |
|
213
|
|
|
214
|
| Vinaigrette | 3 oil : 1 acid | Mustard to emulsify | |
|
215
|
|
|
216
|
| Custard | 1 egg : 2 liquid | Creme brulee, quiche, bread pudding | |
|
217
|
|
|
218
|
| Stock | 3 water : 2 bones | Simmer, never boil | |
|
219
|
|
|
220
|
| Rice | 1 rice : 1.5 water by volume | Less for jasmine, more for brown | |
|
221
|
|
|
222
|
### Substitutions |
|
223
|
|
|
224
|
| Out of | Use | Conversion | |
|
225
|
|
|
226
|
|--------|-----|------------| |
|
227
|
|
|
228
|
| Buttermilk | Milk + acid | 1 cup milk + 1 Tbsp lemon juice, sit 5 min | |
|
229
|
|
|
230
|
| 1 egg (binding) | Flax/chia | 1 Tbsp ground + 3 Tbsp water, gel 5 min | |
|
231
|
|
|
232
|
| Butter (baking) | Oil | Use 80% of butter weight | |
|
233
|
|
|
234
|
| Heavy cream | Coconut cream | 1:1, faint coconut taste | |
|
235
|
|
|
236
|
| Cake flour | AP flour | 1 cup AP - 2 Tbsp + 2 Tbsp cornstarch | |
|
237
|
|
|
238
|
| Fresh herbs | Dried | Use 1/3 the amount, add early | |
|
239
|
|
|
240
|
### Nutrition — Live USDA Lookup |
|
241
|
|
|
242
|
Use the USDA FoodData Central API (`fdc.nal.usda.gov`) when available. Fallback: protein ~4 kcal/g, carbs ~4 kcal/g, fat ~9 kcal/g. Flag as "estimated" when using fallback. |
|
243
|
|
|
244
|
### Best Practices |
|
245
|
|
|
246
|
- **Visual/audio cues over times** — "onions translucent" beats "5 min" |
|
247
|
- **Salt in layers** — season at each stage |
|
248
|
|
|
249
|
- **Rest meat** — 5 min for steaks, 15+ for roasts |
|
250
|
- Ingredients listed in order of use |
|
251
|
|
|
252
|
- Flag top-9 allergens |
|
253
|
|
|
254
|
## Limitations |
|
255
|
|
|
256
|
- Nutrition from USDA API uses generic entries — brand variance exists |
|
257
|
- Baking ratios assume weight measurement; volume introduces 10-20% error |
|
258
|
|
|
259
|
- Not medical dietary advice |