Imported from jeffabailey/learn (coding-challenges/java-coding-challenges/.local/secondary_skills/recipe-creator/SKILL.md). Install upstream with npx skills add jeffabailey/learn --skill recipe-creator. Copyright stays with the author.

Recipe Creator

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.

When to Use

• User wants a recipe for a specific dish ("make me a mushroom risotto")

• User has ingredients and wants meal ideas ("what can I make with chicken, rice, and tomatoes?")

• User needs recipes for dietary restrictions ("I need a gluten-free dinner recipe")

• User wants to scale a recipe up or down ("scale this to 8 servings")

• User wants meal prep or batch cooking plans

• User wants recipes created for a meal plan (even if the plan was generated by the meal-planner skill)

• User asks to "fill in" or "build out" recipes referenced in a meal plan

• User asks about ingredient substitutions ("I don't have buttermilk, what can I use?", "make this dairy-free")

• User asks about cooking techniques ("how do I deglaze a pan?", "what's the right way to sear meat?")

• User wants to convert an existing recipe ("turn this into a vegan version", "make this keto-friendly")

• User asks what pairs well with a dish ("what goes well with risotto?", "what side dish for grilled chicken?")

• User wants to repurpose leftovers ("I have leftover risotto, what can I do with it?")

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 the media-generation skill

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 the media-generation skill 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 = {

tsp: { threshold: 3, to: "Tbsp", factor: 1/3 },

Tbsp: { threshold: 4, to: "cup", factor: 1/16 },

};

1. Cooking mode — Step-by-step walkthrough with countdown timers, wake lock, large text.

2. Prep timeline — Visual Gantt chart showing overlapping tasks, color-coded by type.

3. Nutrition panel — Per-serving values that update with serving size.

"What Can I Make?" Logic

Think in formula + flavor profile, not recipe lookup:

1. Bucket ingredients: protein / starch / veg / aromatic / fat / acid

2. Match a base formula (stir-fry, braise, grain bowl, frittata, soup, sheet-pan roast)

3. Assign a flavor direction based on what's in the pantry

4. Every savory dish needs fat + acid + salt to taste finished

5. Rank suggestions by fewest missing ingredients

Ratios — Cook Without a Recipe

From Ruhlman's Ratio. All by weight:

| Thing | Ratio | Notes |

|-------|-------|-------|

| Bread dough | 5 flour : 3 water (+yeast, salt 2%) | 60% hydration = sandwich, 75%+ = ciabatta |

| Pasta dough | 3 flour : 2 egg | ~100g flour per person |

| Pie dough | 3 flour : 2 fat : 1 water | Fat cold, water iced |

| Cookie | 1 sugar : 2 fat : 3 flour | Base for shortbread -> choc chip |

| Pancake | 2 flour : 2 liquid : 1 egg : 1/2 fat | Thinner = crepe |

| Vinaigrette | 3 oil : 1 acid | Mustard to emulsify |

| Custard | 1 egg : 2 liquid | Creme brulee, quiche, bread pudding |

| Stock | 3 water : 2 bones | Simmer, never boil |

| Rice | 1 rice : 1.5 water by volume | Less for jasmine, more for brown |

Substitutions

| Out of | Use | Conversion |

|--------|-----|------------|

| Buttermilk | Milk + acid | 1 cup milk + 1 Tbsp lemon juice, sit 5 min |

| 1 egg (binding) | Flax/chia | 1 Tbsp ground + 3 Tbsp water, gel 5 min |

| Butter (baking) | Oil | Use 80% of butter weight |

| Heavy cream | Coconut cream | 1:1, faint coconut taste |

| Cake flour | AP flour | 1 cup AP - 2 Tbsp + 2 Tbsp cornstarch |

| Fresh herbs | Dried | Use 1/3 the amount, add early |

Nutrition — Live USDA Lookup

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.

Best Practices

• Visual/audio cues over times — "onions translucent" beats "5 min"

• Salt in layers — season at each stage

• Rest meat — 5 min for steaks, 15+ for roasts

• Ingredients listed in order of use

• Flag top-9 allergens

Limitations

• Nutrition from USDA API uses generic entries — brand variance exists

• Baking ratios assume weight measurement; volume introduces 10-20% error

• Not medical dietary advice