recipe-manager

Recipe Manager Skill

Your Role

You specialize in managing recipe data for CookMode V2. You help users create, edit, and maintain recipe entries in the recipes.js file following the established schema and patterns.

When to Use This Skill

Invoke this skill when the user wants to:

• Add a new recipe
• Edit an existing recipe
• Fix recipe formatting or structure
• Validate recipe data
• Convert recipe formats
• Bulk update recipe properties

Recipe Data Schema (Structured Object Format)

Standard Recipe Structure

'recipe-slug': {
    name: 'Display Name',
    category: 'Entree' | 'Side' | 'Soup' | 'Dessert',
    components: {
        'Component Name': [
            {
                amount: number | string,    // 2, 0.5, '1/4', '1/3'
                unit: string,              // 'cup', 'tbsp', 'oz', 'lb', etc.
                ingredient: string,        // 'carrots', 'olive oil'
                prep: string               // Optional: 'diced', 'minced'
            }
        ]
    },
    instructions: [
        'Step 1 instructions',
        'Step 2 instructions'
    ],
    notes: 'Single string' | ['Array', 'of', 'strings'],
    images: ['url1.jpg', 'url2.jpg'] // optional
}

Required Fields

• name (string): Display name of the recipe
• category (string): One of: Entree, Side, Soup, Dessert
• components (object): Ingredient lists grouped by component (array of objects)
• instructions (array): Step-by-step cooking instructions

Optional Fields

• notes (string or array): Additional tips or information
• images (array): URLs to recipe photos

Ingredient Object Structure

Required Fields (per ingredient)

• amount: Number or fraction string
• Numbers: 2, 0.5, 1.5
• Fractions: '1/2', '1/4', '1/3'
• unit: Unit of measurement
• Volume: 'cup', 'tbsp', 'tsp'
• Weight: 'oz', 'lb', 'g', 'kg'
• Count: 'large', 'medium', 'small', 'cloves', 'whole'
• Other: 'recipe', 'pinch', 'dash'
• ingredient: The ingredient name
• Descriptive: 'all-purpose flour', 'cremini mushrooms'
• Simple: 'carrots', 'garlic', 'olive oil'

Optional Fields (per ingredient)

• prep: Preparation instructions
• Cutting: 'diced', 'minced', 'sliced', 'chopped'
• State: 'softened', 'melted', 'room temperature'
• Additional: 'divided', 'plus more to taste', 'Pinot Noir recommended'

Examples

// Simple ingredient
{ amount: 2, unit: 'cups', ingredient: 'flour' }

// With preparation
{ amount: 1, unit: 'large', ingredient: 'onion', prep: 'diced' }

// Fraction amount
{ amount: '1/4', unit: 'tsp', ingredient: 'salt' }

// Complex prep note
{ amount: 5, unit: 'large', ingredient: 'carrots', prep: 'peeled and sliced into large chunks' }

// Non-standard unit
{ amount: 1, unit: 'recipe', ingredient: 'mashed potatoes', prep: 'or serve with rice' }

Scaling Logic (New)

Much simpler with object format!

function scaleIngredient(ingredientObj, multiplier) {
    const scaledAmount = parseAmount(ingredientObj.amount) * multiplier;
    return {
        ...ingredientObj,
        amount: scaledAmount
    };
}

function parseAmount(amount) {
    if (typeof amount === 'number') return amount;
    if (amount.includes('/')) {
        const [num, den] = amount.split('/').map(Number);
        return num / den;
    }
    return parseFloat(amount);
}

Display Formatting

function formatIngredient(obj, orderCount = 1) {
    const scaledAmount = parseAmount(obj.amount) * orderCount;
    const prep = obj.prep ? `, ${obj.prep}` : '';
    return `${scaledAmount.toFixed(2)} ${obj.unit} ${obj.ingredient}${prep}`;
}

// Examples:
// { amount: 2, unit: 'cups', ingredient: 'flour' }
// → "2.00 cups flour"

// { amount: 1, unit: 'large', ingredient: 'onion', prep: 'diced' }
// → "1.00 large onion, diced"

// { amount: '1/4', unit: 'tsp', ingredient: 'salt', prep: 'plus more to taste' }
// → "0.25 tsp salt, plus more to taste"

Category Order

Recipes display in this category order:

1. Entree
2. Side
3. Soup
4. Dessert

Defined in /js/components/RecipeGrid.js:20

Notes Field Handling

The RecipeModal.js component handles notes in two formats:

1. String: Renders as single paragraph
2. Array: Renders each item as separate paragraph

// Single note
notes: "Use a hand mixer for whipped texture."

// Multiple notes
notes: [
    "Use a hand mixer for whipped texture.",
    "Pairs well with mushroom bourguignon."
]

Component Groups

Common component patterns:

• Simple recipes: Single component (e.g., 'Ingredients')
• Complex recipes: Multiple components (e.g., 'Dough', 'Filling', 'Topping')
• Sauces: Often separate component (e.g., 'Base', 'Sauce')

Validation Checklist

When adding/editing recipes, verify:

• [ ] Slug is kebab-case (lowercase, hyphens)
• [ ] Name is human-readable
• [ ] Category is one of: Entree, Side, Soup, Dessert
• [ ] All ingredients are objects with amount, unit, ingredient fields
• [ ] amount is a number or fraction string ('1/2', '1/4')
• [ ] unit is a string (never empty)
• [ ] ingredient is a string (never empty)
• [ ] prep is optional string
• [ ] Components object has at least one entry
• [ ] Each component has array of ingredient objects
• [ ] Instructions array has at least one step
• [ ] Notes field is string OR array (not object)
• [ ] Images are valid URLs (if provided)
• [ ] No trailing commas in arrays/objects
• [ ] Proper JavaScript syntax

Common Tasks

Adding a New Recipe

1. Create kebab-case slug
2. Follow schema structure (object format)
3. Ensure all ingredients have amount, unit, ingredient fields
4. Add optional prep field for preparation notes
5. Add to appropriate category
6. Validate syntax

Converting String Format to Object Format

Old string format:

'2 cups all-purpose flour, sifted'

New object format:

{ amount: 2, unit: 'cups', ingredient: 'all-purpose flour', prep: 'sifted' }

Use ChatGPT/Claude to batch convert:

"Convert these recipe ingredients to structured format with amount, unit, ingredient, prep fields"

Converting Recipes

When importing from external sources:

1. Extract name, category, ingredients, instructions
2. Group ingredients into components
3. Format ingredients with quantities first
4. Convert steps to array
5. Add to recipes.js

File Location

recipes.js: /Users/adamfehse/Documents/gitrepos/cookmodeV2/recipes.js

This file is loaded as a global window.RECIPES object and accessed by:

• App.js - Passes to RecipeGrid and RecipeModal
• RecipeGrid.js - Displays cards and filters
• RecipeModal.js - Shows full recipe details

Best Practices

1. Keep it simple: Pico CSS philosophy applies to data too
2. Consistent formatting: Follow existing patterns
3. Clear component names: 'Sauce', 'Dough', 'Filling' not 'Component 1'
4. Precise quantities: Include unit of measure
5. Actionable instructions: Each step should be clear

Example: Adding a New Recipe (New Object Format)

'chocolate-chip-cookies': {
    name: 'Chocolate Chip Cookies',
    category: 'Dessert',
    components: {
        'Dough': [
            { amount: 2, unit: 'cups', ingredient: 'all-purpose flour' },
            { amount: 1, unit: 'tsp', ingredient: 'baking soda' },
            { amount: 0.5, unit: 'tsp', ingredient: 'salt' },
            { amount: 1, unit: 'cup', ingredient: 'butter', prep: 'softened' },
            { amount: 0.75, unit: 'cup', ingredient: 'granulated sugar' },
            { amount: 0.75, unit: 'cup', ingredient: 'brown sugar' },
            { amount: 2, unit: 'large', ingredient: 'eggs' },
            { amount: 2, unit: 'tsp', ingredient: 'vanilla extract' }
        ],
        'Mix-ins': [
            { amount: 2, unit: 'cups', ingredient: 'chocolate chips' }