Recipe Creator

When NOT to Use

• 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)
• Health data analysis (use personal-health skill)

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.

Architecture: Full-Stack Recipe Web App

All recipes are stored in a database and served through an API, displayed in a React web app. This means:

• Recipes persist across conversations — the user's collection grows over time

• New recipes are added via API calls; the frontend renders them automatically

• No hardcoded components per recipe — recipes are structured data, not custom React components

Data Model

recipes table:

• id, title, description, heroImage

• prepTime, cookTime, totalTime, difficulty

• baseServings

• ingredients (jsonb): array of { name, qty, unit, stepIndex[], shared? }

• steps (jsonb): array of { title, text, timerSeconds?, timerLabel?, image? }

• prepTimeline (jsonb): array of { label, start, end, type }

• nutrition (jsonb): { calories, protein, carbs, fat } per serving

• tags (text[]), allergens (text[])

• notes (jsonb): array of { label, text }

• createdAt

meal_plans table:

• id, title, description

• days (jsonb): array of { label, meals: [{ slot, recipeId?, mealName, mealDescription, time, nutrition }] }

• shoppingList (jsonb): array of { item, qty, usedIn[] }

• prepTips (jsonb): array of { label, text }

• prepTimeline (jsonb): array of { label, start, end, type }

• createdAt

Frontend Pages

1. Home / Collection — Grid of recipe cards with hero images, title, cook time, difficulty. Search bar and tag filters.
2. Recipe Detail — Full recipe page with:

• Hero image

• Metadata bar (prep/cook/total time, difficulty, servings adjuster)

• Smart-scaling ingredient list with checkboxes

• Step-by-step instructions with inline images

• Prep timeline (visual Gantt-style)

• Nutrition panel (per serving, updates with serving size)

• "Start Cooking Mode" button

• Notes section (storage, substitutions, allergens)

1. Cooking Mode — Full-screen step-by-step walkthrough:

• One step at a time, large readable text

• Built-in countdown timers

• Step images inline

• Prev/Next navigation

• Wake lock to prevent screen dimming

1. Meal Plan — Visual meal plan with:

• Day-by-day layout with meal slots

• Links to individual recipes

• Weekend prep session timeline

• Combined shopping list with checkable items and cross-references

• Nutrition totals

1. Dashboard summary — Recipe count, total cook time saved, most-used ingredients, etc.

API Endpoints

• GET /api/recipes — List all recipes (supports ?search= and ?tags=)

• GET /api/recipes/:id — Get single recipe

• POST /api/recipes — Create recipe

• PUT /api/recipes/:id — Update recipe

• DELETE /api/recipes/:id — Delete recipe

• GET /api/recipes/dashboard — Summary stats

• GET /api/meal-plans — List meal plans

• GET /api/meal-plans/:id — Get single meal plan

• POST /api/meal-plans — Create meal plan

• DELETE /api/meal-plans/:id — Delete meal plan

Build Workflow

1. Write the OpenAPI spec with all endpoints above

2. Run codegen to generate React hooks and Zod schemas

3. Write DB schema and push to database

4. Create the web app artifact and launch design subagent

5. Implement API routes

6. Seed the database with user's requested recipes (structured data, not components)

7. Generate hero images for each recipe using generateImage

8. Test end-to-end

Adding New Recipes (Ongoing)

When the user requests new recipes in future conversations:

1. Generate the recipe data (ingredients, steps, nutrition, etc.)

2. Generate a hero image

3. POST the recipe to the API

4. The frontend automatically displays it in the collection

No new components need to be written. The recipe is just data.

Recipe Generation

Recipe Card Features

1. Generated hero image — Use generateImage to create a photorealistic hero image. Style: overhead or 45-degree angle, natural lighting, styled surface.

2. Step images — For key technique steps, generate images showing what that step should look like.

3. Serving size adjuster with smart scaling — Dynamic recalculation with intelligent unit conversion:

const unitUpgrades = {