Function generateChildrenPropsInstructions

src/nodes/code/prompt.ts:98–131

* Generate children rendering instructions based on detected modes

(modes: { hasStates: boolean; hasIndependentChildren: boolean })

 * Generate children rendering instructions based on detected modes
 */
function generateChildrenPropsInstructions(modes: { hasStates: boolean; hasIndependentChildren: boolean }): string {
    const instructions: string[] = [];

    if (modes.hasStates) {
        instructions.push(`
      - **List Rendering (States-based)**:
        - Check if \`<frame_details>\` contains a \`states\` property (array).
        - Each state entry has: \`state\` (data array), \`componentName\`, \`componentPath\`.
        - Implementation:
          \`\`\`tsx
          import ComponentName from 'path';
          
          {states[0].state.map((item, index) => (
            <ComponentName key={index} {...item} />
          ))}
          \`\`\`
        - **CRITICAL - Only Use State Data**:
          - **ONLY** pass props that exist in the state data objects.
          - **DO NOT** add extra props like \`content\`, \`className\`, or any other fields not present in state.
          - **DO NOT** create or invent additional data - use exactly what's in the state array.
          - Example: If state has \`{iconSrc, title, description}\`, only pass those three props.
        - **Asset Imports**: If state data contains image paths (e.g., \`imageSrc\`, \`iconSrc\`), 
          import them at the top and pass as values.`);
    }

    if (modes.hasIndependentChildren) {
        instructions.push(`
      - **Independent Components (No Props) - CRITICAL**:
        - If a child has NO \`componentName\` and NO \`properties\`, render as \`<ComponentName />\` without any props.
        - These components use default values or hardcoded content internally.`);
    }

    return instructions.join('\n');
}

export const generateFramePrompt = ({
    childrenImports,