random updates

.bmad-core/tasks/generate-ai-frontend-prompt.md

@@ -2,57 +2,50 @@
 
 ## Purpose
 
-To generate a masterful, comprehensive, and optimized prompt that can be used with AI-driven frontend development tools (e.g., Lovable, Vercel v0, or similar) to scaffold or generate significant portions of the frontend application.
+To generate a masterful, comprehensive, and optimized prompt that can be used with any AI-driven frontend development tool (e.g., Vercel v0, Lovable.ai, or similar) to scaffold or generate significant portions of a frontend application.
 
 ## Inputs
 
-- Completed UI/UX Specification (`front-end-spec-tmpl`)
-- Completed Frontend Architecture Document (`front-end-architecture`)
-- Main System Architecture Document (`architecture` - for API contracts and tech stack)
-- Primary Design Files (Figma, Sketch, etc. - for visual context if the tool can accept it or if descriptions are needed)
+- Completed UI/UX Specification (`front-end-spec`)
+- Completed Frontend Architecture Document (`front-end-architecture`) or a full stack combined architecture such as `architecture.md`
+- Main System Architecture Document (`architecture` - for API contracts and tech stack to give further context)
 
 ## Key Activities & Instructions
 
-1. **Confirm Target AI Generation Platform:**
+### 1. Core Prompting Principles
 
-   - Ask the user to specify which AI frontend generation tool/platform they intend to use (e.g., "Lovable.ai", "Vercel v0", "GPT-4 with direct code generation instructions", etc.).
-   - Explain that prompt optimization might differ slightly based on the platform's capabilities and preferred input format.
+Before generating the prompt, you must understand these core principles for interacting with a generative AI for code.
 
-2. **Synthesize Inputs into a Structured Prompt:**
+- **Be Explicit and Detailed**: The AI cannot read your mind. Provide as much detail and context as possible. Vague requests lead to generic or incorrect outputs.
+- **Iterate, Don't Expect Perfection**: Generating an entire complex application in one go is rare. The most effective method is to prompt for one component or one section at a time, then build upon the results.
+- **Provide Context First**: Always start by providing the AI with the necessary context, such as the tech stack, existing code snippets, and overall project goals.
+- **Mobile-First Approach**: Frame all UI generation requests with a mobile-first design mindset. Describe the mobile layout first, then provide separate instructions for how it should adapt for tablet and desktop.
 
-   - **Overall Project Context:**
-     - Briefly state the project's purpose (from brief/PRD).
-     - Specify the chosen frontend framework, core libraries, and UI component library (from `front-end-architecture` and main `architecture`).
-     - Mention the styling approach (e.g., Tailwind CSS, CSS Modules).
-   - **Design System & Visuals:**
-     - Reference the primary design files (e.g., Figma link).
-     - If the tool doesn't directly ingest design files, describe the overall visual style, color palette, typography, and key branding elements (from `front-end-spec-tmpl`).
-     - List any global UI components or design tokens that should be defined or adhered to.
-   - **Application Structure & Routing:**
-     - Describe the main pages/views and their routes (from `front-end-architecture` - Routing Strategy).
-     - Outline the navigation structure (from `front-end-spec-tmpl`).
-   - **Key User Flows & Page-Level Interactions:**
-     - For a few critical user flows (from `front-end-spec-tmpl`):
-       - Describe the sequence of user actions and expected UI changes on each relevant page.
-       - Specify API calls to be made (referencing API endpoints from the main `architecture`) and how data should be displayed or used.
-   - **Component Generation Instructions (Iterative or Key Components):**
-     - Based on the chosen AI tool's capabilities, decide on a strategy:
-       - **Option 1 (Scaffolding):** Prompt for the generation of main page structures, layouts, and placeholders for components.
-       - **Option 2 (Key Component Generation):** Select a few critical or complex components from the `front-end-architecture` (Component Breakdown) and provide detailed specifications for them (props, state, basic behavior, key UI elements).
-       - **Option 3 (Holistic, if tool supports):** Attempt to describe the entire application structure and key components more broadly.
-     - <important_note>Advise the user that generating an entire complex application perfectly in one go is rare. Iterative prompting or focusing on sections/key components is often more effective.</important_note>
-   - **State Management (High-Level Pointers):**
-     - Mention the chosen state management solution (e.g., "Use Redux Toolkit").
-     - For key pieces of data, indicate if they should be managed in global state.
-   - **API Integration Points:**
-     - For pages/components that fetch or submit data, clearly state the relevant API endpoints (from `architecture`) and the expected data shapes (can reference schemas in `data-models` or `api-reference` sections of the architecture doc).
-   - **Critical "Don'ts" or Constraints:**
-     - e.g., "Do not use deprecated libraries." "Ensure all forms have basic client-side validation."
-   - **Platform-Specific Optimizations:**
-     - If the chosen AI tool has known best practices for prompting (e.g., specific keywords, structure, level of detail), incorporate them. (This might require the agent to have some general knowledge or to ask the user if they know any such specific prompt modifiers for their chosen tool).
+### 2. The Structured Prompting Framework
 
-3. **Present and Refine the Master Prompt:**
-   - Output the generated prompt in a clear, copy-pasteable format (e.g., a large code block).
-   - Explain the structure of the prompt and why certain information was included.
-   - Work with the user to refine the prompt based on their knowledge of the target AI tool and any specific nuances they want to emphasize.
-   - <important_note>Remind the user that the generated code from the AI tool will likely require review, testing, and further refinement by developers.</important_note>
+To ensure the highest quality output, you MUST structure every prompt using the following four-part framework.
+
+1. **High-Level Goal**: Start with a clear, concise summary of the overall objective. This orients the AI on the primary task.
+   - _Example: "Create a responsive user registration form with client-side validation and API integration."_
+2. **Detailed, Step-by-Step Instructions**: Provide a granular, numbered list of actions the AI should take. Break down complex tasks into smaller, sequential steps. This is the most critical part of the prompt.
+   - _Example: "1. Create a new file named `RegistrationForm.js`. 2. Use React hooks for state management. 3. Add styled input fields for 'Name', 'Email', and 'Password'. 4. For the email field, ensure it is a valid email format. 5. On submission, call the API endpoint defined below."_
+3. **Code Examples, Data Structures & Constraints**: Include any relevant snippets of existing code, data structures, or API contracts. This gives the AI concrete examples to work with. Crucially, you must also state what _not_ to do.
+   - _Example: "Use this API endpoint: `POST /api/register`. The expected JSON payload is `{ "name": "string", "email": "string", "password": "string" }`. Do NOT include a 'confirm password' field. Use Tailwind CSS for all styling."_
+4. **Define a Strict Scope**: Explicitly define the boundaries of the task. Tell the AI which files it can modify and, more importantly, which files to leave untouched to prevent unintended changes across the codebase.
+   - _Example: "You should only create the `RegistrationForm.js` component and add it to the `pages/register.js` file. Do NOT alter the `Navbar.js` component or any other existing page or component."_
+
+### 3. Assembling the Master Prompt
+
+You will now synthesize the inputs and the above principles into a final, comprehensive prompt.
+
+1. **Gather Foundational Context**:
+   - Start the prompt with a preamble describing the overall project purpose, the full tech stack (e.g., Next.js, TypeScript, Tailwind CSS), and the primary UI component library being used.
+2. **Describe the Visuals**:
+   - If the user has design files (Figma, etc.), instruct them to provide links or screenshots.
+   - If not, describe the visual style: color palette, typography, spacing, and overall aesthetic (e.g., "minimalist", "corporate", "playful").
+3. **Build the Prompt using the Structured Framework**:
+   - Follow the four-part framework from Section 2 to build out the core request, whether it's for a single component or a full page.
+4. **Present and Refine**:
+   - Output the complete, generated prompt in a clear, copy-pasteable format (e.g., a large code block).
+   - Explain the structure of the prompt and why certain information was included, referencing the principles above.
+   - <important_note>Conclude by reminding the user that all AI-generated code will require careful human review, testing, and refinement to be considered production-ready.</important_note>