Walk through adding a new recipe to the website with validation and AI image generation
Guide the user through adding a new recipe seamlessly. This skill handles recipe validation, JSON updates, and automatic image generation using the Gemini API.
Start by asking the user for basic recipe information:
Recipe Title (required)
Emoji (required)
Category (required - must be one of):
breakfast — Breakfast dishesmains — Main coursessides — Side dishesdesserts — Desserts and sweetssauces — Sauces, dressings, and condimentsTags (suggested, comma-separated)
Serves (optional)
Display the auto-generated recipe ID and ask for confirmation before proceeding.
Ingredients can be organized into groups (optional headings like "Dressing", "Salad").
For each group:
Validate: At least one ingredient group with at least one item is required.
Collect step-by-step instructions:
Ask for any optional notes (comma-separated), such as:
Display a summary of the recipe:
==========================================================
📋 RECIPE SUMMARY
==========================================================
Title: [title]
ID: [generated-id]
Category: [category]
Tags: [tags or "none"]
Serves: [serves or "not specified"]
Ingredient Groups: [count]
Instructions: [count] steps
Notes: [count]
==========================================================
Ask: "Add this recipe? (y/n)"
Once confirmed:
data/recipes.json{
"id": "chickpea-salad",
"title": "Chickpea Salad",
"emoji": "🥗",
"category": "sides",
"tags": ["vegetarian", "salad", "quick"],
"serves": "4–6",
"image": null,
"relatedRecipes": [],
"ingredientGroups": [...],
"instructions": [...],
"notes": [...]
}
Generate an AI food photography image using the Gemini API:
export GEMINI_API_KEY=$(grep GEMINI_API_KEY .env | cut -d '=' -f2)
cd scripts && node generate-images.js --id=[recipe-id]
If the command succeeds, update the recipe's image field in recipes.json to images/recipes/[recipe-id].jpg
If it fails, inform the user they can generate it later with:
node scripts/generate-images.js --id=[recipe-id]
Display final success message:
==========================================================
🎉 RECIPE ADDED SUCCESSFULLY!
==========================================================
Recipe ID: [id]
Title: [title]
Image: images/recipes/[id].jpg
Category: [category]
Next steps:
1. Review the recipe in the website
2. Commit changes: git add . && git commit -m "Add [title] recipe"
3. Push to GitHub: git push origin main
==========================================================
If any step fails:
If image generation fails:
data/recipes.json — Recipe added to the recipes arrayimages/recipes/[id].jpg — AI-generated image (if successful)🍳 Add a Recipe to the Website
📌 Recipe title: Chickpea Salad
😊 Emoji: 🥗
🏷️ Category (breakfast/mains/sides/desserts/sauces): sides
🔖 Tags (optional): vegetarian, salad, quick
👥 Serves (e.g., "4–6" or leave blank): 4–6
✨ Recipe ID: chickpea-salad
Does the first ingredient group have a heading? (y/n): y
Group heading: Dressing
Ingredient 1: 1/2 cup Greek yogurt
Ingredient 2: 3 Tbsp mayonnaise
Ingredient 3: [Leave blank to finish]
Does the second ingredient group have a heading? (y/n): y
Group heading: Salad
Ingredient 1: 3 cans chickpeas
Ingredient 2: 1 cup celery, diced
[Continue...]
Step 1: In a small bowl, combine yogurt with mayo...
Step 2: Place chickpeas in bowl and lightly mash...
Step 3: [Leave blank to finish]
Notes (optional, comma-separated): Can be stored in fridge for 2 days
📋 RECIPE SUMMARY
[displays summary]
Add this recipe? (y/n): y
✅ Recipe added to recipes.json
📸 Generating AI image...
✅ Saved to images/recipes/chickpea-salad.jpg
🎉 RECIPE ADDED SUCCESSFULLY!
[displays success summary]