From 49eeb523cab4d94464c150f557a681b018183c6e Mon Sep 17 00:00:00 2001 From: Taylor Mullen Date: Wed, 11 Feb 2026 10:56:10 -0800 Subject: [PATCH] fix(core): update system prompt snapshots for non-interactive scaffolding --- evals/interactive-hang.eval.ts | 6 +++-- .../core/__snapshots__/prompts.test.ts.snap | 24 +++++++++---------- packages/core/src/prompts/snippets.ts | 11 ++++----- 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/evals/interactive-hang.eval.ts b/evals/interactive-hang.eval.ts index 43b49759bb..12088b4fa0 100644 --- a/evals/interactive-hang.eval.ts +++ b/evals/interactive-hang.eval.ts @@ -67,8 +67,10 @@ describe('interactive_commands', () => { ).toBeDefined(); expect( scaffoldCall?.toolRequest.args, - 'Agent should have passed a non-interactive flag (-y, --yes, or a specific --template)', - ).toMatch(/(?:^|\s)(--yes|-y|--template\s+\S+)(?:\s|$|\\|")/); + 'Agent should have passed a non-interactive flag (-y, --yes, --no-interactive, or a specific --template)', + ).toMatch( + /(?:^|\s)(--yes|-y|--no-interactive|--template\s+\S+)(?:\s|$|\\|")/, + ); }, }); }); diff --git a/packages/core/src/core/__snapshots__/prompts.test.ts.snap b/packages/core/src/core/__snapshots__/prompts.test.ts.snap index ed79a3a497..795bdd7a0d 100644 --- a/packages/core/src/core/__snapshots__/prompts.test.ts.snap +++ b/packages/core/src/core/__snapshots__/prompts.test.ts.snap @@ -588,7 +588,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -702,7 +702,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. **Build the application and ensure there are no compile errors.** # Operational Guidelines @@ -798,7 +798,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\`. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. **Build the application and ensure there are no compile errors.** # Operational Guidelines @@ -1392,7 +1392,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -1505,7 +1505,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -1622,7 +1622,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -1739,7 +1739,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -1964,7 +1964,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -2316,7 +2316,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -2429,7 +2429,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -2653,7 +2653,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. @@ -2766,7 +2766,7 @@ Operate using a **Research -> Strategy -> Execution** lifecycle. For the Executi - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using \`run_shell_command\` for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** 5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype. diff --git a/packages/core/src/prompts/snippets.ts b/packages/core/src/prompts/snippets.ts index d90be40196..f019b6b5a3 100644 --- a/packages/core/src/prompts/snippets.ts +++ b/packages/core/src/prompts/snippets.ts @@ -553,7 +553,7 @@ function newApplicationSteps(options: PrimaryWorkflowsOptions): string { if (options.approvedPlan) { return ` 1. **Understand:** Read the approved plan. Treat this file as your single source of truth. -2. **Implement:** Implement the application according to the plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', or specific template flags) to prevent the environment from hanging waiting for user input. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, CSS animations, icons) to ensure a complete, rich, and coherent experience. Never link to external services or assume local paths for assets that have not been created. If you discover new requirements or need to change the approach, confirm with the user and update the plan file. +2. **Implement:** Implement the application according to the plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, CSS animations, icons) to ensure a complete, rich, and coherent experience. Never link to external services or assume local paths for assets that have not been created. If you discover new requirements or need to change the approach, confirm with the user and update the plan file. 3. **Verify:** Review work against the original request and the approved plan. Fix bugs, deviations, and ensure placeholders are visually adequate. **Ensure styling and interactions produce a high-quality, polished, and beautiful prototype.** Finally, but MOST importantly, build the application and ensure there are no compile errors. 4. **Finish:** Provide a brief summary of what was built.`.trim(); } @@ -588,10 +588,9 @@ function newApplicationSteps(options: PrimaryWorkflowsOptions): string { - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. **User Approval:** Obtain user approval for the proposed plan. -4. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', or specific template flags) to prevent the environment from hanging waiting for user input. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. -5. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** -6. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype.`.trim(); +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)} for commands like 'npm init', 'npx create-react-app'. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons) to ensure a complete, coherent experience. Never link to external services or assume local paths for assets that have not been created. +4. **Verify:** Review work against the original request. Fix bugs and deviations. Ensure styling and interactions produce a high-quality, functional, and beautiful prototype. **Build the application and ensure there are no compile errors.** +5. **Solicit Feedback:** Provide instructions on how to start the application and request user feedback on the prototype.`.trim(); } return ` @@ -604,7 +603,7 @@ function newApplicationSteps(options: PrimaryWorkflowsOptions): string { - **Mobile:** Compose Multiplatform or Flutter. - **Games:** HTML/CSS/JS (Three.js for 3D). - **CLIs:** Python or Go. -3. Implementation: Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', or specific template flags) to prevent the environment from hanging waiting for user input. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. +3. **Implementation:** Autonomously implement each feature per the approved plan. When starting, scaffold the application using ${formatToolName(SHELL_TOOL_NAME)}. For interactive scaffolding tools (like create-react-app, create-vite, or npm create), you MUST use the corresponding non-interactive flag (e.g. '--yes', '-y', '--no-interactive', or specific template flags) to prevent the environment from hanging waiting for user input. For example, use 'npx --yes create-vite@latest my-app --no-interactive --template react-ts' for Vite projects. For visual assets, utilize **platform-native primitives** (e.g., stylized shapes, gradients, icons). Never link to external services or assume local paths for assets that have not been created. 4. **Verify:** Review work against the original request. Fix bugs and deviations. **Build the application and ensure there are no compile errors.**`.trim(); }