ros/BMAD-METHOD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEA and A updated

Browse Source
This commit is contained in:
Brian Madison
2025-06-08 00:43:02 -05:00
parent d8f75c30df
commit 335b288c91
23 changed files with 907 additions and 1019 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
agents/analyst.yml
View File

@@ -1,15 +1,14 @@
agent:
name: Mary
id: analyst
version: 1.0.0
title: Analyst
description: Project Analyst and Brainstorming Coach
persona: analyst
customize: >-
You are a bit of a know-it-all, and like to verbalize and emote as if you were a physical
person.
You are a bit of a know-it-all, and like to verbalize and emote as if you were a physical person.
dependencies:
tasks:
- create-doc-from-template
- advanced-elicitation
- create-deep-research-prompt
templates:

2
agents/architect.yml
View File

@@ -1,13 +1,13 @@
agent:
name: Fred
id: architect
version: 1.0.0
title: Architect
description: For system architecture, technical design, architecture checklists.
persona: architect
customize: ""
dependencies:
tasks:
- create-doc-from-template
- create-architecture
- create-infrastructure-architecture
- create-next-story-task

7
agents/bmad.yml
View File

@@ -1,10 +1,7 @@
# BMAD Agent Configuration
agent:
name: BMAD
name: BMad
id: bmad
version: 1.0.0
title: BMAD
title: BMad Primary Orchestrator and Coach
description: For general BMAD Method or Agent queries, oversight, or advice and guidance when unsure.
persona: bmad
customize: >-

2
agents/design-architect.yml
View File

@@ -1,13 +1,13 @@
agent:
name: Jane
id: design-architect
version: 1.0.0
title: Design Architect
description: For UI/UX specifications, front-end architecture, and UI 1-shot prompting.
persona: design-architect
customize: ""
dependencies:
tasks:
- create-doc-from-template
- create-frontend-architecture
- create-ai-frontend-prompt
- create-uxui-spec

3
agents/dev.yml
View File

@@ -1,8 +1,7 @@
agent:
name: James
id: dev
version: 1.0.0
title: Full Stack Dev
title: Full Stack Developer
description: Master Generalist Expert Senior Senior Full Stack Developer
persona: dev
customize: ""

4
agents/devops.yml
View File

@@ -1,8 +1,7 @@
agent:
name: Alex
id: devops
version: 1.0.0
title: Platform Engineer
title: DevOps Platform Engineer
description: >-
Alex loves when things are running secure, stable, reliable and performant. His motivation is to
have the production environment as resilient and reliable for the customer as possible. He is a
@@ -15,6 +14,7 @@ agent:
Bicep, etc.).
dependencies:
tasks:
- create-doc-from-template
- create-platform-infrastructure
- review-infrastructure
- validate-infrastructure

1
agents/pm.yml
View File

@@ -1,7 +1,6 @@
agent:
name: John
id: pm
version: 1.0.0
title: Product Manager
description: >-
Main goal is to help produce or maintain the best possible PRD and represent the end user the

3
agents/po.yml
View File

@@ -1,8 +1,7 @@
agent:
name: Sarah
id: po
version: 1.0.0
title: PO
title: Product Owner
description: >-
Product Owner helps validate the artifacts are all cohesive with a master checklist, and also
helps coach significant changes

3
agents/qa.yml
View File

@@ -1,8 +1,7 @@
agent:
name: Quinn
id: qa
version: 1.0.0
title: QA Test Architect
title: Quality Assurance Test Architect
description: Test Architect and Automation Expert
persona: qa
customize: ""

4
agents/sm.yml
View File

@@ -1,13 +1,13 @@
agent:
name: Bob
id: sm
version: 1.0.0
title: SM
title: Scrum Master
description: A very Technical Scrum Master helps the team run the Scrum process.
persona: sm
customize: ""
dependencies:
tasks:
- create-doc-from-template
- create-next-story-task
templates:
- story-tmpl

3
agents/team-dev.yml
View File

@@ -1,6 +1,6 @@
bundle:
name: Development Team Bundle
filename: team-dev.txt
description: Includes the entity that form the core of the implementation scrum team.
target_environment: web
agents:
@@ -8,3 +8,4 @@ agents:
- po
- sm
- dev
- qa

13
agents/team-full-app.yml
View File

@@ -1,13 +0,0 @@
bundle:
name: Full Team Bundle
filename: team-full.txt
target_environment: web
agents:
- bmad
- analyst
- pm
- architect
- design-architect
- po
- sm

16
agents/team-full-org.yml Normal file
View File

@@ -0,0 +1,16 @@
bundle:
name: Full Organization Team Bundle
description: This is a full organization of agents and includes every possible agent. This will produce the larges bundle but give the most options for discussion in a single session
target_environment: web
agents:
- bmad
- analyst
- pm
- architect
- design-architect
- devops
- po
- sm
- qa
- dev

2
agents/team-small-service.yml → agents/team-no-ux+.yml
View File

@@ -1,5 +1,5 @@
bundle:
name: Planning Team Bundle
name: Team No UI Bundle
filename: team-backend-planning.txt
target_environment: web

2
bmad-core/ide-agents/architect.ide.md
View File

@@ -35,7 +35,7 @@ When activated:
## Commands
- `*help` - Show available commands
- `*create-architecture` - Create an Architecture Document using the architecture template
- `*create-architecture` - Create a new architecture.md with `taskroot/create-doc-from-template` `tasks/architecture-tmpl.md`
- `*create-infrastructure` - Create an Infrastructure Architecture Document
- `*create-frontend-architecture` - Create a Frontend Architecture Document
- `*create {template-name}` - Create a document using the specified template

2
bmad-core/ide-agents/pm.ide.md
View File

@@ -36,6 +36,6 @@ When activated:
## Commands
- `*help` - Show available commands
- `*create-prd` - Create a Product Requirements Document using the PRD template
- `*create-prd` - Create a Product Requirements Document using the `default-template` unless another is provided
- `*create {template-name}` - Create a document using the specified template (e.g., `*create project-brief-tmpl`)
- `*list-templates` - Show available `templates`

18
bmad-core/tasks/advanced-elicitation.md
View File

@@ -8,9 +8,23 @@
## Task Instructions
### 1. Ask for review and Present Action List
### 1. Section Context and Review
[[LLM: Ask the user to review the {drafted document section, or context or document this protocol was executed from}. In the SAME message, inform them that they can suggest additions, removals, or modifications, OR they can select an action by number from the 'Advanced Reflective, Elicitation & Brainstorming Actions'. Then, present ONLY the numbered list (0-9) of these actions as defined in tasks#advanced-elicitation. Conclude by stating that selecting 9 will proceed to the next section. Await user selection. If an elicitation action (0-8) is chosen, execute it and then re-offer this combined review/elicitation choice. If option 9 is chosen, or if the user provides direct feedback on requirements, proceed accordingly.]]
[[LLM: When invoked after outputting a section:
1. First, provide a brief 1-2 sentence summary of what the user should look for in the section just presented (e.g., "Please review the technology choices for completeness and alignment with your project needs. Pay special attention to version numbers and any missing categories.")
2. If the section contains Mermaid diagrams, explain each diagram briefly before offering elicitation options (e.g., "The component diagram shows the main system modules and their interactions. Notice how the API Gateway routes requests to different services.")
3. If the section contains multiple distinct items (like multiple components, multiple patterns, etc.), inform the user they can apply elicitation actions to:
- The entire section as a whole
- Individual items within the section (specify which item when selecting an action)
4. Then present the action list as specified below.]]
### 2. Ask for Review and Present Action List
[[LLM: Ask the user to review the drafted section. In the SAME message, inform them that they can suggest additions, removals, or modifications, OR they can select an action by number from the 'Advanced Reflective, Elicitation & Brainstorming Actions'. If there are multiple items in the section, mention they can specify which item(s) to apply the action to. Then, present ONLY the numbered list (0-9) of these actions. Conclude by stating that selecting 9 will proceed to the next section. Await user selection. If an elicitation action (0-8) is chosen, execute it and then re-offer this combined review/elicitation choice. If option 9 is chosen, or if the user provides direct feedback, proceed accordingly.]]
**Present the numbered list (0-9) with this exact format:**

124
bmad-core/tasks/create-architecture.md
View File

@@ -1,124 +0,0 @@
# Architecture Creation Task
## Purpose
- To design a complete, robust, and well-documented technical architecture based on the project requirements (PRD, epics, brief), research findings, and user input.
- To make definitive technology choices and articulate the rationale behind them, leveraging the architecture template as a structural guide.
- To produce all necessary technical artifacts, ensuring the architecture is optimized for efficient implementation, particularly by AI developer agents, and validated against the `architect-checklist`.
## Instructions
1. **Input Analysis & Dialogue Establishment:**
- Ensure you have all necessary inputs: PRD document (specifically checking for the 'Technical Assumptions' and 'Initial Architect Prompt' sections for the decided repository and service architecture), project brief, any deep research reports, and optionally a `technical-preferences.md`. Request any missing critical documents.
- Thoroughly review all inputs.
- Summarize key technical requirements, constraints, NFRs (Non-Functional Requirements), and the decided repository/service architecture derived from the inputs. Present this summary to the user for confirmation and to ensure mutual understanding.
- Share initial architectural observations, potential challenges, or areas needing clarification based on the inputs.
**Establish Interaction Mode for Architecture Creation:**
- Ask the user: "How would you like to proceed with creating the architecture for this project? We can work:
A. **Incrementally (Default & Recommended):** We'll go through each architectural decision, document section, or design point step-by-step. I'll present drafts, and we'll seek your feedback and confirmation before moving to the next part. This is best for complex decisions and detailed refinement.
B. **"YOLO" Mode:** I can produce a more comprehensive initial draft of the architecture (or significant portions) for you to review more broadly first. We can then iterate on specific sections based on your feedback. This can be quicker for generating initial ideas but is generally not recommended if detailed collaboration at each step is preferred."
- Request the user to select their preferred mode (e.g., "Please let me know if you'd prefer A or B.").
- Once the user chooses, confirm the selected mode (e.g., "Okay, we will proceed in Incremental mode."). This chosen mode will govern how subsequent steps in this task are executed.
2. **Resolve Ambiguities & Gather Missing Information:**
- If key information is missing or requirements are unclear after initial review, formulate specific, targeted questions.
- **External API Details:** If the project involves integration with external APIs, especially those that are less common or where you lack high confidence in your training data regarding their specific request/response schemas, and if a "Deep Research" phase was not conducted for these APIs:
- Proactively ask the user to provide precise details. This includes:
- Links to the official API documentation.
- Example request structures (e.g., cURL commands, JSON payloads).
- Example response structures (e.g., JSON responses for typical scenarios, including error responses).
- Explain that this information is crucial for accurately defining API interaction contracts within the architecture, for creating robust facades/adapters, and for enabling accurate technical planning (e.g., for technical stories or epic refinements).
- Present questions to the user (batched logically if multiple) and await their input.
- Document all decisions and clarifications received before proceeding.
3. **Iterative Technology Selection & Design (Interactive, if not YOLO mode):**
- For each major architectural component or decision point (e.g., frontend framework, backend language/framework, database system, cloud provider, key services, communication patterns):
- If multiple viable options exist based on requirements or research, present 2-3 choices, briefly outlining their pros, cons, and relevance to the project. Consider any preferences stated in `technical-preferences.md` when formulating these options and your recommendation.
- State your recommended choice, providing a clear rationale based on requirements, research findings, user preferences (if known), and best practices (e.g., scalability, cost, team familiarity, ecosystem).
- Ask for user feedback, address concerns, and seek explicit approval before finalizing the decision.
- Document the confirmed choice and its rationale within the architecture document.
- **Starter Templates:** If applicable and requested, research and recommend suitable starter templates or assess existing codebases. Explain alignment with project goals and seek user confirmation.
4. **Create Technical Artifacts (Incrementally, unless YOLO mode, guided by `architecture-tmpl`):**
- For each artifact or section of the main Architecture Document:
- **Explain Purpose:** Briefly describe the artifact/section's importance and what it will cover.
- **Draft Section-by-Section:** Present a draft of one logical section at a time.
- Ensure the 'High-Level Overview' and 'Component View' sections accurately reflect and detail the repository/service architecture decided in the PRD.
- Ensure that documented Coding Standards (either as a dedicated section or referenced) and the 'Testing Strategy' section clearly define:
- The convention for unit test file location (e.g., co-located with source files, or in a separate folder like `tests/` or `__tests__/`).
- The naming convention for unit test files (e.g., `*.test.js`, `*.spec.ts`, `test_*.py`).
- When discussing Coding Standards, inform the user that these will serve as firm rules for the AI developer agent. Emphasize that these standards should be kept to the minimum necessary to prevent undesirable or messy code from the agent. Guide the user to understand that overly prescriptive or obvious standards (e.g., "use SOLID principles," which well-trained LLMs should already know) should be avoided, as the user, knowing the specific agents and tools they will employ, can best judge the appropriate level of detail.
- **Incorporate Feedback:** Discuss the draft with the user, incorporate their feedback, and iterate as needed.
- [Offer Advanced Self-Refinement & Elicitation Options](#offer-advanced-self-refinement--elicitation-options)
- **Seek Approval:** Obtain explicit user approval for the section before moving to the next, or for the entire artifact if drafted holistically (in YOLO mode).
5. **Identify Missing Technical Stories / Refine Epics (Interactive):**
- Based on the designed architecture, identify any necessary technical stories/tasks that are not yet captured in the PRD or epics (e.g., "Set up CI/CD pipeline for frontend deployment," "Implement authentication module using JWT," "Create base Docker images for backend services," "Configure initial database schema based on data models").
- Explain the importance of these technical stories for enabling the functional requirements and successful project execution.
- Collaborate with the user to refine these stories (clear description, acceptance criteria) and suggest adding them to the project backlog or relevant epics.
- Review existing epics/stories from the PRD and suggest technical considerations or acceptance criteria refinements to ensure they are implementable based on the chosen architecture. For example, specifying API endpoints to be called, data formats, or critical library versions.
- After collaboration, prepare a concise summary detailing all proposed additions, updates, or modifications to epics and user stories. If no changes are identified, explicitly state this.
6. **Validate Architecture Against Checklist & Finalize Output:**
- Once the main architecture document components have been drafted and reviewed with the user, perform a comprehensive review using the `architect-checklist`.
- Go through each item in the checklist to ensure the architecture document is comprehensive, addresses all key architectural concerns (e.g., security, scalability, maintainability, testability (including confirmation that coding standards and the testing strategy clearly define unit test location and naming conventions), developer experience), and that proposed solutions are robust.
- For each checklist item, confirm its status (e.g., \[x] Completed, \[ ] N/A, \[!] Needs Attention).
- If deficiencies, gaps, or areas needing more detail or clarification are identified based on the checklist:
- Discuss these findings with the user.
- Collaboratively make necessary updates, additions, or refinements to the architecture document to address these points.
- After addressing all checklist points and ensuring the architecture document is robust and complete, present a summary of the checklist review to the user. This summary should highlight:
- Confirmation that all relevant sections/items of the checklist have been satisfied by the architecture.
- Any items marked N/A, with a brief justification.
- A brief note on any significant discussions, decisions, or changes made to the architecture document as a result of the checklist review.
- **Offer Design Architect Prompt (If Applicable):**
- If the architecture includes UI components, ask the user if they would like to include a dedicated prompt for a "Design Architect" at the end of the main architecture document.
- Explain that this prompt can capture specific UI considerations, notes from discussions, or decisions that don't fit into the core technical architecture document but are crucial for the Design Architect.
- The prompt should also state that the Design Architect will subsequently operate in its specialized mode to define the detailed frontend architecture.
- If the user agrees, collaboratively draft this prompt and append it to the architecture document.
- Obtain final user approval for the complete architecture documentation generation.
- **Recommend Next Steps for UI (If Applicable):**
- After the main architecture document is finalized and approved:
- If the project involves a user interface (as should be evident from the input PRD and potentially the architecture document itself mentioning UI components or referencing outputs from a Design Architect's UI/UX Specification phase):
- Strongly recommend to the user that the next critical step for the UI is to engage the **Design Architect** agent.
- Specifically, advise them to use the Design Architect's **'Frontend Architecture Mode'**.
- Explain that the Design Architect will use the now-completed main Architecture Document and the detailed UI/UX specifications (e.g., `front-end-spec-tmpl.txt` or enriched PRD) as primary inputs to define the specific frontend architecture, select frontend libraries/frameworks (if not already decided), structure frontend components, and detail interaction patterns.
### Output Deliverables for Architecture Creation Phase
- A comprehensive Architecture Document, structured according to the `architecture-tmpl` (which is all markdown) or an agreed-upon format, including all sections detailed above.
- Clear Mermaid diagrams for architecture overview, data models, etc.
- A list of new or refined technical user stories/tasks ready for backlog integration.
- A summary of any identified changes (additions, updates, modifications) required for existing epics or user stories, or an explicit confirmation if no such changes are needed.
- A completed `architect-checklist` (or a summary of its validation).
- Optionally, if UI components are involved and the user agrees: A prompt for a "Design Architect" appended to the main architecture document, summarizing relevant UI considerations and outlining the Design Architect's next steps.
## Offer Advanced Self-Refinement & Elicitation Options
(This section is called when needed prior to this)
Present the user with the following list of 'Advanced Reflective, Elicitation & Brainstorming Actions'. Explain that these are optional steps to help ensure quality, explore alternatives, and deepen the understanding of the current section before finalizing it and moving on. The user can select an action by number, or choose to skip this and proceed to finalize the section.
"To ensure the quality of the current section: **[Specific Section Name]** and to ensure its robustness, explore alternatives, and consider all angles, I can perform any of the following actions. Please choose a number (8 to finalize and proceed):
**Advanced Reflective, Elicitation & Brainstorming Actions I Can Take:**
{Instruction for AI Agent: Display the title of each numbered item below. If the user asks what a specific option means, provide a brief explanation of the action you will take, drawing from detailed descriptions tailored for the context.}
1. **Critical Self-Review & User Goal Alignment**
2. **Generate & Evaluate Alternative Design Solutions**
3. **User Journey & Interaction Stress Test (Conceptual)**
4. **Deep Dive into Design Assumptions & Constraints**
5. **Usability & Accessibility Audit Review & Probing Questions**
6. **Collaborative Ideation & UI Feature Brainstorming**
7. **Elicit 'Unforeseen User Needs' & Future Interaction Questions**
8. **Finalize this Section and Proceed.**
After I perform the selected action, we can discuss the outcome and decide on any further revisions for this section."
REPEAT by Asking the user if they would like to perform another Reflective, Elicitation & Brainstorming Action UNIT the user indicates it is time to proceed ot the next section (or selects #8)

17
bmad-core/tasks/create-doc-from-template.md
View File

@@ -2,9 +2,7 @@
## Purpose
- Generate documents from any specified template following embedded instructions
- Support multiple document types through template-driven approach
- Enable any persona to create consistent, well-structured documents
- Generate documents from any specified template following embedded instructions from the perspective of the selected agent persona
## Instructions
@@ -16,9 +14,7 @@
@{example}
dependencies:
templates:
- prd-tmpl
- architecture-tmpl
templates: - prd-tmpl - architecture-tmpl
@{/example}
You would offer to create "PRD" and "Architecture" documents when the user asks what you can help with.
@@ -73,15 +69,6 @@ If template specifies a checklist:
- Begin directly with document content (no preamble)
- Include any handoff prompts specified in template
## Key Resources
- **Available Templates:** All files in `templates#` directory
- **Checklists:** As specified by template or persona
- **User Preferences:** `data#technical-preferences`
## Important Notes
- This task is template and persona agnostic
- All specific instructions are embedded in templates
- Focus on faithful template execution and clean output
- Template markup is for AI processing only - never expose to users

146
bmad-core/tasks/create-frontend-architecture.md
View File

@@ -1,146 +0,0 @@
# Create Frontend Architecture Task
## Purpose
To define the technical architecture for the frontend application. This includes selecting appropriate patterns, structuring the codebase, defining component strategy, planning state management, outlining API interactions, and setting up testing and deployment approaches, all while adhering to the guidelines in `front-end-architecture-tmpl` template.
## Inputs
- Product Requirements Document (PRD) (`prd-tmpl` or equivalent)
- Completed UI/UX Specification (`front-end-spec-tmpl` or equivalent)
- Main System Architecture Document (`architecture` or equivalent) - The agent executing this task should particularly note the overall system structure (Monorepo/Polyrepo, backend service architecture) detailed here, as it influences frontend patterns.
- Primary Design Files (Figma, Sketch, etc., linked from UI/UX Spec)
## Key Activities & Instructions
### 1. Confirm Interaction Mode
- Ask the user: "How would you like to proceed with creating the frontend architecture? We can work:
A. **Incrementally (Default & Recommended):** We'll go through each architectural decision and document section step-by-step. I'll present drafts, and we'll seek your feedback and confirmation before moving to the next part. This is best for complex decisions and detailed refinement.
B. **"YOLO" Mode:** I can produce a more comprehensive initial draft of the frontend architecture for you to review more broadly first. We can then iterate on specific sections based on your feedback. This can be quicker for generating initial ideas but is generally not recommended if detailed collaboration at each step is preferred."
- Request the user to select their preferred mode (e.g., "Please let me know if you'd prefer A or B.").
- Once the user chooses, confirm the selected mode (e.g., "Okay, we will proceed in Incremental mode."). This chosen mode will govern how subsequent steps are executed.
### 2. Review Inputs & Establish Context
- Thoroughly review the inputs, including the UI/UX Specification and the main Architecture Document (especially "Definitive Tech Stack Selections", API contracts, and the documented overall system structure like monorepo/polyrepo choices).
- Ask clarifying questions to bridge any gaps between the UI/UX vision and the overall system architecture.
### 3. Define Overall Frontend Philosophy & Patterns (for `front-end-architecture`)
- Based on the main architecture's tech stack and overall system structure (monorepo/polyrepo, backend service details), confirm and detail:
- Framework & Core Libraries choices.
- High-level Component Architecture strategy.
- High-level State Management Strategy.
- Data Flow principles.
- Styling Approach.
- Key Design Patterns to be employed.
### 4. Specify Detailed Frontend Directory Structure (for `front-end-architecture`)
- Collaboratively define or refine the frontend-specific directory structure, ensuring it aligns with the chosen framework and promotes modularity and scalability.
### 5. Outline Component Strategy & Conventions (for `front-end-architecture`)
- Define Component Naming & Organization conventions.
- Establish the "Template for Component Specification" (as per `front-end-architecture`), emphasizing that most components will be detailed emergently but must follow this template.
- Optionally, specify a few absolutely foundational/shared UI components (e.g., a generic Button or Modal wrapper if the chosen UI library needs one, or if no UI library is used).
### 6. Detail State Management Setup & Conventions (for `front-end-architecture`)
- Based on the high-level strategy, detail:
- Chosen Solution and core setup.
- Conventions for Store Structure / Slices (e.g., "feature-based slices"). Define any genuinely global/core slices (e.g., session/auth).
- Conventions for Selectors and Actions/Reducers/Thunks. Provide templates or examples.
### 7. Plan API Interaction Layer (for `front-end-architecture`)
- Define the HTTP Client Setup.
- Establish patterns for Service Definitions (how API calls will be encapsulated).
- Outline frontend Error Handling & Retry strategies for API calls.
### 8. Define Routing Strategy (for `front-end-architecture`)
- Confirm the Routing Library.
- Collaboratively define the main Route Definitions and any Route Guards.
### 9. Specify Build, Bundling, and Deployment Details (for `front-end-architecture`)
- Outline the frontend-specific Build Process & Scripts.
- Discuss and document Key Bundling Optimizations.
- Confirm Deployment to CDN/Hosting details relevant to the frontend.
### 10. Refine Frontend Testing Strategy (for `front-end-architecture`)
- Elaborate on the main testing strategy with specifics for: Component Testing, UI Integration/Flow Testing, and E2E UI Testing scope and tools.
### 11. Outline Performance Considerations (for `front-end-architecture`)
- List key frontend-specific performance strategies to be employed.
### 12. Document Drafting & Confirmation (Guided by `front-end-architecture-tmpl`)
- **If "Incremental Mode" was selected:**
- For each relevant section of the `front-end-architecture` (as outlined in steps 3-11 above, covering topics from Overall Philosophy to Performance Considerations):
- **a. Explain Purpose & Draft Section:** Explain the purpose of the section and present a draft for that section.
- **b. Initial Discussion & Feedback:** Discuss the draft with the user, incorporate their feedback, and iterate as needed for initial revisions.
- **c. [Offer Advanced Self-Refinement & Elicitation Options](#offer-advanced-self-refinement--elicitation-options)**
- **d. Final Approval & Documentation:** Obtain explicit user approval for the section. Ensure all placeholder links and references are correctly noted within each section. Then proceed to the next section.
- Once all sections are individually approved through this process, confirm with the user that the overall `front-end-architecture` document is populated and ready for Step 13 (Epic/Story Impacts) and then the checklist review (Step 14).
- **If "YOLO Mode" was selected:**
- Collaboratively populate all relevant sections of the `front-end-architecture-tmpl` (as outlined in steps 3-11 above) to create a comprehensive first draft.
- Present the complete draft of `front-end-architecture` to the user for a holistic review.
- <important_note>After presenting the full draft in YOLO mode, you MAY still offer a condensed version of the 'Advanced Reflective & Elicitation Options' menu, perhaps focused on a few key overarching review actions (e.g., overall requirements alignment, major risk assessment) if the user wishes to perform a structured deep dive before detailed section-by-section feedback.</important_note>
- Obtain explicit user approval for the entire `front-end-architecture` document before proceeding to Step 13 (Epic/Story Impacts) and then the checklist review (Step 14).
### 13. Identify & Summarize Epic/Story Impacts (Frontend Focus)
- After the `front-end-architecture` is confirmed, review it in context of existing epics and user stories (if provided or known).
- Identify any frontend-specific technical tasks that might need to be added as new stories or sub-tasks (e.g., "Implement responsive layout for product details page based on defined breakpoints," "Set up X state management slice for user profile," "Develop reusable Y component as per specification").
- Identify if any existing user stories require refinement of their acceptance criteria due to frontend architectural decisions (e.g., specifying interaction details, component usage, or performance considerations for UI elements).
- Collaborate with the user to define these additions or refinements.
- Prepare a concise summary detailing all proposed additions, updates, or modifications to epics and user stories related to the frontend. If no changes are identified, explicitly state this (e.g., "No direct impacts on existing epics/stories were identified from the frontend architecture").
### 14. Checklist Review and Finalization
- Once the `front-end-architecture` has been populated and reviewed with the user, and epic/story impacts have been summarized, use the `frontend-architecture-checklist`.
- Go through each item in the checklist to ensure the `front-end-architecture` is comprehensive and all sections are adequately addressed - for each checklist item you MUST consider if it is really complete or deficient.
- For each checklist section, confirm its status (e.g., \[x] Completed, \[ ] N/A, \[!] Needs Attention).
- If deficiencies or areas needing more detail are identified with a section:
- Discuss these with the user.
- Collaboratively make necessary updates or additions to the `front-end-architecture`.
- After addressing all points and ensuring the document is robust, present a summary of the checklist review to the user. This summary should highlight:
- Confirmation that all relevant sections of the checklist have been satisfied.
- Any items marked N/A and a brief reason.
- A brief note on any significant discussions or changes made as a result of the checklist review.
- The goal is to ensure the `front-end-architecture` is a complete and actionable document.
## Offer Advanced Self-Refinement & Elicitation Options
(This section is called when needed prior to this)
Present the user with the following list of 'Advanced Reflective, Elicitation & Brainstorming Actions'. Explain that these are optional steps to help ensure quality, explore alternatives, and deepen the understanding of the current section before finalizing it and moving on. The user can select an action by number, or choose to skip this and proceed to finalize the section.
"To ensure the quality of the current section: **[Specific Section Name]** and to ensure its robustness, explore alternatives, and consider all angles, I can perform any of the following actions. Please choose a number (8 to finalize and proceed):
**Advanced Reflective, Elicitation & Brainstorming Actions I Can Take:**
{Instruction for AI Agent: Display the title of each numbered item below. If the user asks what a specific option means, provide a brief explanation of the action you will take, drawing from detailed descriptions tailored for the context.}
1. **Critical Self-Review & User Goal Alignment**
2. **Generate & Evaluate Alternative Design Solutions**
3. **User Journey & Interaction Stress Test (Conceptual)**
4. **Deep Dive into Design Assumptions & Constraints**
5. **Usability & Accessibility Audit Review & Probing Questions**
6. **Collaborative Ideation & UI Feature Brainstorming**
7. **Elicit 'Unforeseen User Needs' & Future Interaction Questions**
8. **Finalize this Section and Proceed.**
After I perform the selected action, we can discuss the outcome and decide on any further revisions for this section."
REPEAT by Asking the user if they would like to perform another Reflective, Elicitation & Brainstorming Action UNIT the user indicates it is time to proceed ot the next section (or selects #8)

89
bmad-core/tasks/create-prd.md
View File

@@ -1,89 +0,0 @@
# PRD Generate Task
## Purpose
- Transform inputs into core product definition documents conforming to a PRD template
- Define clear MVP scope focused on essential functionality
- Provide foundation for Architect and Design Architect to help create technical artifacts which will in turn later draft further details for very junior engineers or simple dev ai agents.
## Instructions
### 1. Review Inputs
Review all provided inputs including project brief, research documents, prd template and user ideas to guide PRD generation.
### 2. Determine Interaction Mode
Confirm with the user their preferred interaction style:
- **Incremental:** Work through sections one at a time via chat messages as defined in the template.
- **YOLO Mode:** Draft the complete PRD making assumptions as necessary. Present full document at once, noting which sections required assumptions.
### 3. Execute Template
- Use the `prd-tmpl` template (or user-specified alternative template)
- Follow all embedded LLM instructions within the template
- Template contains section-specific guidance and examples
### 4. Template Processing Notes
- **Incremental Mode**: Present each section for review before proceeding
- **YOLO Mode**: Generate all sections, then review with user
Process all template elements according to `utils#template-format` conventions.
**CRITICAL: Never display or output template markup formatting, LLM instructions or examples - they MUST be used by you the agent only, AND NEVER shown to users in chat or document output**
**Content Presentation Guidelines:**
- Present only the final, clean content to users
- Replace template variables with actual project-specific content
- Process all conditional logic internally - show only relevant sections
- For Canvas mode: Update the document with clean, formatted content only
### 7. Prepare Handoffs
Based on PRD content, prepare appropriate next-step prompts:
**If UI Component Exists:**
1. Add Design Architect prompt in designated template section
2. Recommend: User engages Design Architect first for UI/UX Specification
3. Then proceed to Architect with enriched PRD
**If No UI Component:**
- Add Architect prompt in designated template section
- Recommend proceeding directly to Architect
### 8. Validate with Checklist
- Run the `pm-checklist` against completed PRD
- Document completion status for each checklist item
- Present summary by section, address any deficiencies
- Generate final checklist report with findings and resolutions
### 9. Final Presentation
**General Guidelines:**
- Present complete documents in clean, full format
- DO NOT truncate unchanged information
- Begin directly with content (no introductory text needed)
- Ensure all template sections are properly filled
- **NEVER show template markup, instructions, or processing directives to users**
## Key Resources
- **Default Template:** `templates#prd-tmpl`
- **Validation:** `checklists#pm-checklist`
- **User Preferences:** `data#technical-preferences`
- **Elicitation Protocol:** `tasks#advanced-elicitation`
## Important Notes
- This task is template-agnostic - users may specify custom templates
- All detailed instructions are embedded in templates, not this task file
- Focus on orchestration and workflow
- **Template markup is for AI processing only - users should never see template formatting indicators**

894
bmad-core/templates/architecture-tmpl.md
View File

@@ -1,263 +1,767 @@
# {Project Name} Architecture Document
# {{Project Name}} Architecture Document
[[LLM: If available, review any provided relevant documents to gather all relevant context before beginning. If at a minimum you cannot local `docs/prd.md` ask the user what docs will provide the basis for the architecture.]]
## Introduction
[[LLM: This section establishes the document's purpose and scope. Keep the content below but ensure project name is properly substituted.]]
This document outlines the overall project architecture for {{Project Name}}, including backend systems, shared services, and non-UI specific concerns. Its primary goal is to serve as the guiding architectural blueprint for AI-driven development, ensuring consistency and adherence to chosen patterns and technologies.
**Relationship to Frontend Architecture:**
If the project includes a significant user interface, a separate Frontend Architecture Document will detail the frontend-specific design and MUST be used in conjunction with this document. Core technology stack choices documented herein (see "Tech Stack") are definitive for the entire project, including any frontend components.
### Starter Template or Existing Project
[[LLM: Before proceeding further with architecture design, check if the project is based on a starter template or existing codebase:
1. Review the PRD and brainstorming brief for any mentions of:
- Starter templates (e.g., Create React App, Next.js, Vue CLI, Angular CLI, etc.)
- Existing projects or codebases being used as a foundation
- Boilerplate projects or scaffolding tools
- Previous projects to be cloned or adapted
2. If a starter template or existing project is mentioned:
- Ask the user to provide access via one of these methods:
- Link to the starter template documentation
- Upload/attach the project files (for small projects)
- Share a link to the project repository (GitHub, GitLab, etc.)
- Analyze the starter/existing project to understand:
- Pre-configured technology stack and versions
- Project structure and organization patterns
- Built-in scripts and tooling
- Existing architectural patterns and conventions
- Any limitations or constraints imposed by the starter
- Use this analysis to inform and align your architecture decisions
3. If no starter template is mentioned but this is a greenfield project:
- Suggest appropriate starter templates based on the tech stack preferences
- Explain the benefits (faster setup, best practices, community support)
- Let the user decide whether to use one
4. If the user confirms no starter template will be used:
- Proceed with architecture design from scratch
- Note that manual setup will be required for all tooling and configuration
Document the decision here before proceeding with the architecture design. In none, just say N/A]]
## High Level Architecture
[[LLM: Produce the following child sections, and then derscribe why you made the choices you did if any choices were taken that you made that were unique or deviated from what was given as initial context from the PRD or prior discussions, and immediately execute tasks#advanced-elicitation display]]
### Introduction / Preamble
{This document outlines the overall project architecture, including backend systems, shared services, and non-UI specific concerns. Its primary goal is to serve as the guiding architectural blueprint for AI-driven development, ensuring consistency and adherence to chosen patterns and technologies.
**Relationship to Frontend Architecture:**
If the project includes a significant user interface, a separate Frontend Architecture Document (typically named `front-end-architecture-tmpl.txt` or similar, and linked in the "Key Reference Documents" section) details the frontend-specific design and MUST be used in conjunction with this document. Core technology stack choices documented herein (see "Definitive Tech Stack Selections") are definitive for the entire project, including any frontend components.}
[[LLM: This section contains multiple subsections that establish the foundation of the architecture. Present all subsections together (Introduction, Technical Summary, High Level Overview, Project Diagram, and Architectural Patterns), then apply `tasks#advanced-elicitation` protocol to the complete High Level Architecture section. The user can choose to refine the entire section or specific subsections.]]
### Technical Summary
{ Provide a brief paragraph overview of the system's architecture, key components, technology choices, and architectural patterns used. Reference the goals from the PRD. }
[[LLM: Provide a brief paragraph (3-5 sentences) overview of:
- The system's overall architecture style
- Key components and their relationships
- Primary technology choices
- Core architectural patterns being used
- Reference back to the PRD goals and how this architecture supports them]]
### High Level Overview
[[LLM: Describe the main architectural style (e.g., Monolith, Microservices, Serverless, Event-Driven), reflecting the decision made in the PRD. Explain the repository structure (Monorepo/Polyrepo). Explain the primary user interaction or data flow at a conceptual level.]]
[[LLM: Based on the PRD's Technical Assumptions section, describe:
1. The main architectural style (e.g., Monolith, Microservices, Serverless, Event-Driven)
2. Repository structure decision from PRD (Monorepo/Polyrepo)
3. Service architecture decision from PRD
4. Primary user interaction flow or data flow at a conceptual level
5. Key architectural decisions and their rationale
After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### High Level Project Diagram
[[LLM: Produce a Mermaid High Level Diagram that best Describes the Overall PRD Backend Architecture]]
[[LLM: Create a Mermaid diagram that visualizes the high-level architecture. Consider:
- System boundaries
- Major components/services
- Data flow directions
- External integrations
- User entry points
Use appropriate Mermaid diagram type (graph TD, C4, sequence) based on what best represents the architecture
After presenting the diagram, apply `tasks#advanced-elicitation` protocol]]
### Architectural and Design Patterns
{ List the key high-level patterns chosen for the architecture. These foundational patterns should be established early as they guide component design, interactions, and technology choices. }
[[LLM: List the key high-level patterns that will guide the architecture. For each pattern:
- **Pattern 1:** {e.g., Serverless, Event-Driven, Microservices, CQRS} - _Rationale/Reference:_ {Briefly why, or link to a more detailed explanation if needed}
- **Pattern 2:** {e.g., Dependency Injection, Repository Pattern, Module Pattern} - _Rationale/Reference:_ {...}
- **Pattern N:** {...}
1. Present 2-3 viable options if multiple exist
2. Provide your recommendation with clear rationale
3. Get user confirmation before finalizing
4. These patterns should align with the PRD's technical assumptions and project goals
### Components
Common patterns to consider:
[[LLM: Describe the major logical components or services of the system and their responsibilities, reflecting the decided overall architecture (e.g., distinct microservices, modules within a monolith, packages within a monorepo) and the architectural patterns adopted. Explain how they collaborate. Produce a component diagram or diagrams as needed in mermaid as a child section. Immediately execute tasks#advanced-elicitation display]]
- Architectural style patterns (Serverless, Event-Driven, Microservices, CQRS, Hexagonal)
- Code organization patterns (Dependency Injection, Repository, Module, Factory)
- Data patterns (Event Sourcing, Saga, Database per Service)
- Communication patterns (REST, GraphQL, Message Queue, Pub/Sub)]]
- Component A: {Description of responsibility}
<<REPEAT: pattern>>
{Insert component diagram here if it helps - e.g., using Mermaid graph TD or C4 Model Container/Component Diagram}
- **{{pattern_name}}:** {{pattern_description}} - _Rationale:_ {{rationale}}
- Component N...: {Description of responsibility}
<</REPEAT>>
{ Insert component diagram here if it helps - e.g., using Mermaid graph TD or C4 Model Container/Component Diagram }
@{example: patterns}
- **Serverless Architecture:** Using AWS Lambda for compute - _Rationale:_ Aligns with PRD requirement for cost optimization and automatic scaling
- **Repository Pattern:** Abstract data access logic - _Rationale:_ Enables testing and future database migration flexibility
- **Event-Driven Communication:** Using SNS/SQS for service decoupling - _Rationale:_ Supports async processing and system resilience
@{/example}
[[LLM: After presenting the patterns, apply `tasks#advanced-elicitation` protocol]]
## Tech Stack
[[LLM: This is the DEFINITIVE technology selection section. Work with the user to make specific choices:
1. Review PRD technical assumptions and any preferences from `data#technical-preferences`
2. For each category, present 2-3 viable options with pros/cons
3. Make a clear recommendation based on project needs
4. Get explicit user approval for each selection
5. Document exact versions (avoid "latest" - pin specific versions)
6. This table is the single source of truth - all other docs must reference these choices
Key decisions to finalize - before displaying the table, ensure you are aware of or ask the user about - let the user know if they are not sure on any that you can also provide suggestions with rationale:
- Starter templates (if any)
- Languages and runtimes with exact versions
- Frameworks and libraries / packages
- Cloud provider and key services choices
- Database and storage solutions - if unclear suggest sql or nosql or other types depending on the project and depending on cloud provider offer a suggestion
- Development tools
Upon render of the table, ensure the user is aware of the importance of this sections choices, should also look for gaps or disagreements with anything, ask for any clarifications if something is unclear why its in the list, and also right away apply `tasks#advanced-elicitation` display - this statement and the options should be rendered and then prompt right all before allowing user input.]]
### Cloud Infrastructure
- **Provider:** {{cloud_provider}}
- **Key Services:** {{core_services_list}}
- **Deployment Regions:** {{regions}}
### Technology Stack Table
| Category | Technology | Version | Purpose | Rationale |
| :----------------- | :----------------- | :---------- | :---------- | :------------- |
| **Language** | {{language}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Runtime** | {{runtime}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Framework** | {{framework}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Database** | {{database}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Cache** | {{cache}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Message Queue** | {{queue}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **API Style** | {{api_style}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Authentication** | {{auth}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Testing** | {{test_framework}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Build Tool** | {{build_tool}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **IaC Tool** | {{iac_tool}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Monitoring** | {{monitoring}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Logging** | {{logging}} | {{version}} | {{purpose}} | {{why_chosen}} |
@{example: tech_stack_row}
| **Language** | TypeScript | 5.3.3 | Primary development language | Strong typing, excellent tooling, team expertise |
| **Runtime** | Node.js | 20.11.0 | JavaScript runtime | LTS version, stable performance, wide ecosystem |
| **Framework** | NestJS | 10.3.2 | Backend framework | Enterprise-ready, good DI, matches team patterns |
@{/example}
## Data Models
[[LLM: Define the core data models/entities:
1. Review PRD requirements and identify key business entities
2. For each model, explain its purpose and relationships
3. Include key attributes and data types
4. Show relationships between models
5. Discuss design decisions with user
Create a clear conceptual model before moving to database schema.
After presenting all data models, apply `tasks#advanced-elicitation` protocol]]
<<REPEAT: data_model>>
### {{model_name}}
**Purpose:** {{model_purpose}}
**Key Attributes:**
- {{attribute_1}}: {{type_1}} - {{description_1}}
- {{attribute_2}}: {{type_2}} - {{description_2}}
**Relationships:**
- {{relationship_1}}
- {{relationship_2}}
<</REPEAT>>
## Components
[[LLM: Based on the architectural patterns, tech stack, and data models from above:
1. Identify major logical components/services and their responsibilities
2. Consider the repository structure (monorepo/polyrepo) from PRD
3. Define clear boundaries and interfaces between components
4. For each component, specify:
- Primary responsibility
- Key interfaces/APIs exposed
- Dependencies on other components
- Technology specifics based on tech stack choices
5. Create component diagrams where helpful
6. After presenting all components, apply `tasks#advanced-elicitation` protocol]]
<<REPEAT: component>>
### {{component_name}}
**Responsibility:** {{component_description}}
**Key Interfaces:**
- {{interface_1}}
- {{interface_2}}
**Dependencies:** {{dependencies}}
**Technology Stack:** {{component_tech_details}}
<</REPEAT>>
### Component Diagrams
[[LLM: Create Mermaid diagrams to visualize component relationships. Options:
- C4 Container diagram for high-level view
- Component diagram for detailed internal structure
- Sequence diagrams for complex interactions
Choose the most appropriate for clarity
After presenting the diagrams, apply `tasks#advanced-elicitation` protocol]]
## External APIs
[[LLM: For each external service integration:
1. Identify APIs needed based on PRD requirements and component design
2. If documentation URLs are unknown, ask user for specifics
3. Document authentication methods and security considerations
4. List specific endpoints that will be used
5. Note any rate limits or usage constraints
If no external APIs are needed, state this explicitly and skip to next section.]]
^^CONDITION: has_external_apis^^
<<REPEAT: external_api>>
### {{api_name}} API
- **Purpose:** {{api_purpose}}
- **Documentation:** {{api_docs_url}}
- **Base URL(s):** {{api_base_url}}
- **Authentication:** {{auth_method}}
- **Rate Limits:** {{rate_limits}}
**Key Endpoints Used:**
<<REPEAT: endpoint>>
- `{{method}} {{endpoint_path}}` - {{endpoint_purpose}}
<</REPEAT>>
**Integration Notes:** {{integration_considerations}}
<</REPEAT>>
@{example: external_api}
### Stripe API
- **Purpose:** Payment processing and subscription management
- **Documentation:** https://stripe.com/docs/api
- **Base URL(s):** `https://api.stripe.com/v1`
- **Authentication:** Bearer token with secret key
- **Rate Limits:** 100 requests per second
**Key Endpoints Used:**
- `POST /customers` - Create customer profiles
- `POST /payment_intents` - Process payments
- `POST /subscriptions` - Manage subscriptions
@{/example}
^^/CONDITION: has_external_apis^^
[[LLM: After presenting external APIs (or noting their absence), apply `tasks#advanced-elicitation` protocol]]
## Core Workflows
[[LLM: Illustrate key system workflows using sequence diagrams:
1. Identify critical user journeys from PRD
2. Show component interactions including external APIs
3. Include error handling paths
4. Document async operations
5. Create both high-level and detailed diagrams as needed
Focus on workflows that clarify architecture decisions or complex interactions.
After presenting the workflow diagrams, apply `tasks#advanced-elicitation` protocol]]
## REST API Spec
[[LLM: If the project includes a REST API:
1. Create an OpenAPI 3.0 specification
2. Include all endpoints from epics/stories
3. Define request/response schemas based on data models
4. Document authentication requirements
5. Include example requests/responses
Use YAML format for better readability. If no REST API, skip this section.]]
^^CONDITION: has_rest_api^^
```yaml
openapi: 3.0.0
info:
title: { { api_title } }
version: { { api_version } }
description: { { api_description } }
servers:
- url: { { api_base_url } }
description: { { environment } }
# ... OpenAPI specification continues
```
^^/CONDITION: has_rest_api^^
[[LLM: After presenting the REST API spec (or skipping if not applicable), apply `tasks#advanced-elicitation` protocol]]
## Database Schema
[[LLM: Transform the conceptual data models into concrete database schemas:
1. Use the database type(s) selected in Tech Stack
2. Create schema definitions using appropriate notation
3. Include indexes, constraints, and relationships
4. Consider performance and scalability
5. For NoSQL, show document structures
Present schema in format appropriate to database type (SQL DDL, JSON schema, etc.)
After presenting the database schema, apply `tasks#advanced-elicitation` protocol]]
## Source Tree
[[LLM: Provide an ASCII or Mermaid diagram representing the project's proposed folder structure based on information we have aligned on to this point such as monorepo vs polyrepo vs monolith vs microservices. The following is a general example, but is very project and technology dependant. Immediately upon render of the section, execute tasks#advanced-elicitation display.]]
[[LLM: Create a project folder structure that reflects:
1. The chosen repository structure (monorepo/polyrepo)
2. The service architecture (monolith/microservices/serverless)
3. The selected tech stack and languages
4. Component organization from above
5. Best practices for the chosen frameworks
6. Clear separation of concerns
Adapt the structure based on project needs. For monorepos, show service separation. For serverless, show function organization. Include language-specific conventions.
After presenting the structure, apply `tasks#advanced-elicitation` protocol to refine based on user feedback.]]
```plaintext
{project-root}/
├── .github/ # CI/CD workflows (e.g., GitHub Actions)
{{project-root}}/
├── .github/ # CI/CD workflows
│ └── workflows/
│ └── main.yml
├── .vscode/ # VSCode settings (optional)
│ └── settings.json
├── build/ # Compiled output (if applicable, often git-ignored)
├── config/ # Static configuration files (if any)
├── docs/ # Project documentation (PRD, Arch, etc.)
│ ├── index.md
│ └── ... (other .md files)
├── infra/ # Infrastructure as Code (e.g., CDK, Terraform)
│ └── lib/
│ └── bin/
├── node_modules/ / venv / target/ # Project dependencies (git-ignored)
├── scripts/ # Utility scripts (build, deploy helpers, etc.)
├── build/ # Compiled output (git-ignored)
├── config/ # Configuration files
├── docs/ # Project documentation
│ ├── PRD.md
│ ├── architecture.md
│ └── ...
├── infra/ # Infrastructure as Code
│ └── {{iac-structure}}
├── {{dependencies-dir}}/ # Dependencies (git-ignored)
├── scripts/ # Utility scripts
├── src/ # Application source code
│ ├── backend/ # Backend-specific application code (if distinct frontend exists)
│ │ ├── core/ # Core business logic, domain models
│ │ ├── services/ # Business services, orchestrators
│ │ ├── adapters/ # Adapters to external systems (DB, APIs)
│ │ ├── controllers/ / routes/ # API endpoint handlers
│ │ └── main.ts / app.py # Backend application entry point
│ ├── frontend/ # Placeholder: See Frontend Architecture Doc for details if used
│ ├── shared/ / common/ # Code shared (e.g., types, utils, domain models if applicable)
│ │ └── types/
│ └── main.ts / index.ts / app.ts # Main application entry point (if not using backend/frontend split above)
├── stories/ # Generated story files for development (optional)
│ └── epic1/
├── test/ # Automated tests
│ ├── unit/ # Unit tests (mirroring src structure)
│ ├── integration/ # Integration tests
│ └── e2e/ # End-to-end tests
├── .env.example # Example environment variables
│ └── {{source-structure}}
├── tests/ # Test files
│ ├── unit/
│ ├── integration/
│ └── e2e/
├── .env.example # Environment variables template
├── .gitignore # Git ignore rules
├── package.json / requirements.txt / pom.xml # Project manifest and dependencies
├── tsconfig.json / pyproject.toml # Language-specific configuration (if applicable)
├── Dockerfile # Docker build instructions (if applicable)
└── README.md # Project overview and setup instructions
├── {{package-manifest}} # Dependencies manifest
├── {{config-files}} # Language/framework configs
└── README.md # Project documentation
```
## External APIs
@{example: monorepo-structure}
project-root/
├── packages/
│ ├── api/ # Backend API service
│ ├── web/ # Frontend application
│ ├── shared/ # Shared utilities/types
│ └── infrastructure/ # IaC definitions
├── scripts/ # Monorepo management scripts
└── package.json # Root package.json with workspaces
@{/example}
[[LLM: List the External API name proposed if needed - if unsure you can suggest or ask the user when it seems we will need to rely on some external services depending on the project requirements. List the URL to doc or API Spec (openapi / swagger url) - if you are unsure as user to provide after you explain when we need a given API or similar. For each API we need the following information]]
### {External API Name} API
- **Purpose:** {What service does this API provide?}
- **Base URL(s):** {e.g., `https://some-saas/api/v1/`}
- **Authentication/Authorization:** {Describe how access is controlled.}
- **Endpoints Used**
- Identify the endpoint - short statement of purpose to use it
## REST API Spec
[[LLM: Create OpenAPI Spec (Swagger) proposed if proposing a rest api]]
## Data Models
[[LLM: List major data models, discussing with the user why you have listed the specific data models]]
## Database Schema
[[LLM: Create a database schema model proposed to meet the project requirements. For each schema, include the purpose of each schema model]]
## Core Workflow
{ Illustrate key or complex workflows using mermaid sequence diagrams. Can have high level tying the full project together, and also smaller epic level sequence diagrams. }
## Tech Stack
[[LLM: This section outlines the definitive technology choices for the project. These selections should be made after a thorough understanding of the project's requirements, components, data models, and core workflows. The Architect Agent should guide the user through these decisions, ensuring each choice is justified and recorded accurately in the table below.]]
[[LLM: This table is the **single source of truth** for all technology selections. Other architecture documents (e.g., Frontend Architecture) must refer to these choices and elaborate on their specific application rather than re-defining them.]]
[[LLM: Key decisions to discuss and finalize here, which will then be expanded upon and formally documented in the detailed stack table below, include considerations such as:
- Preferred Starter Template Frontend: { Url to template or starter, if used }
- Preferred Starter Template Backend: { Url to template or starter, if used }
- Primary Language(s) & Version(s): {e.g., TypeScript 5.x, Python 3.11 - Specify exact versions, e.g., `5.2.3`}
- Primary Runtime(s) & Version(s): {e.g., Node.js 22.x - Specify exact versions, e.g., `22.0.1`}
Must be definitive selections; do not list open-ended choices (e.g., for web scraping, pick one tool, not two). Specify exact versions (e.g., `18.2.0`). If 'Latest' is used, it implies the latest stable version _at the time of this document's last update_, and the specific version (e.g., `xyz-library@2.3.4`) should be recorded. Pinning versions is strongly preferred to avoid unexpected breaking changes for the AI agent.]]
- Cloud Provider(s): {e.g., AWS, Azure, GCP, On-premise}
- Core Services Used: {List key managed services - e.g., Lambda, S3, Kubernetes Engine, RDS, Kafka}
| Category | Technology | Version | Purpose |
| :------- | :--------- | :------ | :------ |
[[LLM: After presenting the source tree structure, apply `tasks#advanced-elicitation` protocol]]
## Infrastructure and Deployment
- Infrastructure as Code (IaC): {Tool used - e.g., AWS CDK, Terraform...} - Location: {Link to IaC code repo/directory}
- Deployment Strategy: {e.g., CI/CD pipeline with automated promotions, Blue/Green, Canary} - Tools: {e.g., Jenkins, GitHub Actions, GitLab CI}
- Environments: {List environments - e.g., Development, Staging, Production}
- Environment Promotion: {Describe steps, e.g., `dev` -\> `staging` (manual approval / automated tests pass) -\> `production` (automated after tests pass and optional manual approval)}
- Rollback Strategy: {e.g., Automated rollback on health check failure post-deployment, Manual trigger via CI/CD job, IaC state rollback. Specify primary mechanism.}
[[LLM: Define the deployment architecture and practices:
1. Use IaC tool selected in Tech Stack
2. Choose deployment strategy appropriate for the architecture
3. Define environments and promotion flow
4. Establish rollback procedures
5. Consider security, monitoring, and cost optimization
Get user input on deployment preferences and CI/CD tool choices.]]
### Infrastructure as Code
- **Tool:** {{iac_tool}} {{version}}
- **Location:** `{{iac_directory}}`
- **Approach:** {{iac_approach}}
### Deployment Strategy
- **Strategy:** {{deployment_strategy}}
- **CI/CD Platform:** {{cicd_platform}}
- **Pipeline Configuration:** `{{pipeline_config_location}}`
### Environments
<<REPEAT: environment>>
- **{{env_name}}:** {{env_purpose}} - {{env_details}}
<</REPEAT>>
### Environment Promotion Flow
```
{{promotion_flow_diagram}}
```
### Rollback Strategy
- **Primary Method:** {{rollback_method}}
- **Trigger Conditions:** {{rollback_triggers}}
- **Recovery Time Objective:** {{rto}}
[[LLM: After presenting the infrastructure and deployment section, apply `tasks#advanced-elicitation` protocol]]
## Error Handling Strategy
- **General Approach:** {e.g., Use exceptions as primary mechanism, return error codes/tuples for specific modules, clearly defined custom error types hierarchy.}
- **Logging:**
- Library/Method: {e.g., `console.log/error` (Node.js), Python `logging` module with `structlog`, dedicated logging library like `Pino` or `Serilog`. Specify the chosen library.}
- Format: {e.g., JSON, plain text with timestamp and severity. JSON is preferred for structured logging.}
- Levels: {e.g., DEBUG, INFO, WARN, ERROR, CRITICAL. Specify standard usage for each.}
- Context: {What contextual information must be included? e.g., Correlation ID, User ID (if applicable and safe), Service Name, Operation Name, Key Parameters (sanitized).}
- **Specific Handling Patterns:**
- External API Calls: {Define retry mechanisms (e.g., exponential backoff, max retries - specify library if one is mandated like `Polly` or `tenacity`), circuit breaker pattern usage (e.g., using `resilience4j` or equivalent - specify if and how), timeout configurations (connect and read timeouts). How are API errors (4xx, 5xx) translated or propagated?}
- Internal Errors / Business Logic Exceptions: {How to convert internal errors to user-facing errors if applicable (e.g., generic error messages with a unique ID for support, specific error codes). Are there defined business exception classes?}
- Transaction Management: {Approach to ensure data consistency in case of errors during multi-step operations, e.g., database transactions (specify isolation levels if non-default), Saga pattern for distributed transactions (specify orchestrator/choreography and compensation logic).}
[[LLM: Define comprehensive error handling approach:
1. Choose appropriate patterns for the language/framework from Tech Stack
2. Define logging standards and tools
3. Establish error categories and handling rules
4. Consider observability and debugging needs
5. Ensure security (no sensitive data in logs)
This section guides both AI and human developers in consistent error handling.]]
### General Approach
- **Error Model:** {{error_model}}
- **Exception Hierarchy:** {{exception_structure}}
- **Error Propagation:** {{propagation_rules}}
### Logging Standards
- **Library:** {{logging_library}} {{version}}
- **Format:** {{log_format}}
- **Levels:** {{log_levels_definition}}
- **Required Context:**
- Correlation ID: {{correlation_id_format}}
- Service Context: {{service_context}}
- User Context: {{user_context_rules}}
### Error Handling Patterns
#### External API Errors
- **Retry Policy:** {{retry_strategy}}
- **Circuit Breaker:** {{circuit_breaker_config}}
- **Timeout Configuration:** {{timeout_settings}}
- **Error Translation:** {{error_mapping_rules}}
#### Business Logic Errors
- **Custom Exceptions:** {{business_exception_types}}
- **User-Facing Errors:** {{user_error_format}}
- **Error Codes:** {{error_code_system}}
#### Data Consistency
- **Transaction Strategy:** {{transaction_approach}}
- **Compensation Logic:** {{compensation_patterns}}
- **Idempotency:** {{idempotency_approach}}
[[LLM: After presenting the error handling strategy, apply `tasks#advanced-elicitation` protocol]]
## Coding Standards
[[LLM: These standards are mandatory for all code generation by AI agents and human developers. Deviations are not permitted unless explicitly approved and documented as an exception in this section or a linked addendum. Ensure you let the user know they should really review this and also make sections to it as needed during development once this is sharded out to the coding-standards file as this will always be used by the dev agent to ensure it follows standards. Also keep this section as short and lean as possible to not bloat the context with stuff the agent will probably know anyways. The following are possible sections, it all depends on the project and what the user things should be included - use your best judgement to keep it lean but clear to keep a dumb dev agent on the rails. This applies to the child sections also, do not add them if not needed, or strive to keep them succinct.]]
[[LLM: These standards are MANDATORY for AI agents. Work with user to define ONLY the critical rules needed to prevent bad code. Explain that:
- **Primary Runtime(s):** {e.g., Node.js 22.x, Python Runtime for Lambda - refer to Definitive Tech Stack}
- **Style Guide & Linter:** {e.g., ESLint with Airbnb config + Prettier; Black, Flake8, MyPy; Go fmt, golint. Specify chosen tools and link to configuration files (e.g., `.eslintrc.js`, `pyproject.toml`). Linter rules are mandatory and must not be disabled without cause.}
- **Naming Conventions:**
- Variables: `{e.g., camelCase (JavaScript/TypeScript/Java), snake_case (Python/Ruby)}`
- Functions/Methods: `{e.g., camelCase (JavaScript/TypeScript/Java), snake_case (Python/Ruby)}`
- Classes/Types/Interfaces: `{e.g., PascalCase}`
- Constants: `{e.g., UPPER_SNAKE_CASE}`
- Files: `{e.g., kebab-case.ts (TypeScript), snake_case.py (Python), PascalCase.java (Java). Be specific per language.}`
- Modules/Packages: `{e.g., camelCase or snake_case. Be specific per language.}`
- **File Structure:** Adhere to the layout defined in the "Project Structure" section and the Frontend Architecture Document if applicable.
- **Unit Test File Organization:** {e.g., `*.test.ts`/`*.spec.ts` co-located with source files; `test_*.py` in a parallel `tests/` directory. Specify chosen convention.}
- **Asynchronous Operations:** {e.g., Always use `async`/`await` in TypeScript/JavaScript/Python for promise-based operations; Goroutines/Channels in Go with clear patterns for error propagation and completion; Java `CompletableFuture` or Project Reactor/RxJava if used.}
- **Type Safety:** {e.g., Leverage TypeScript strict mode (all flags enabled); Python type hints (enforced by MyPy); Go static typing; Java generics and avoidance of raw types. All new code must be strictly typed.}
- _Type Definitions:_ {Location, e.g., `src/common/types.ts`, shared packages, or co-located. Policy on using `any` or equivalent (strongly discouraged, requires justification).}
- **Comments & Documentation:**
- Code Comments: {Expectations for code comments: Explain _why_, not _what_, for complex logic. Avoid redundant comments. Use standard formats like JSDoc, TSDoc, Python docstrings (Google/NumPy style), GoDoc, JavaDoc.}
- READMEs: {Each module/package/service should have a README explaining its purpose, setup, and usage if not trivial.}
- **Dependency Management:** {Tool used - e.g., npm/yarn, pip/poetry, Go modules, Maven/Gradle. Policy on adding new dependencies (e.g., approval process, check for existing alternatives, security vulnerability scans). Specify versioning strategy (e.g., prefer pinned versions, use tilde `~` for patches, caret `^` for minor updates - be specific).}
1. This section directly controls AI developer behavior
2. Keep it minimal - assume AI knows general best practices
3. Focus on project-specific conventions and gotchas
4. Overly detailed standards bloat context and slow development
5. Standards will be extracted to separate file for dev agent use
### Detailed Language & Framework Conventions
For each standard, get explicit user confirmation it's necessary.]]
[[LLM: For each primary language and framework selected in the "Definitive Tech Stack Selections", the following specific conventions **must** be adhered to. If a chosen technology is not listed below, it implies adherence to its standard, widely accepted best practices and the general guidelines in this document.]]
### Core Standards
#### `{Language/Framework 1 Name, e.g., TypeScript/Node.js}` Specifics
- **Languages & Runtimes:** {{languages_and_versions}}
- **Style & Linting:** {{linter_config}}
- **Test Organization:** {{test_file_convention}}
- **Immutability:** `{e.g., "Always prefer immutable data structures. Use `Readonly\<T\>`, `ReadonlyArray\<T\>`, `as const` for object/array literals. Avoid direct mutation of objects/arrays passed as props or state. Consider libraries like Immer for complex state updates."}`
- **Functional vs. OOP:** `{e.g., "Favor functional programming constructs (map, filter, reduce, pure functions) for data transformation and business logic where practical. Use classes for entities, services with clear state/responsibilities, or when framework conventions (e.g., NestJS) demand."}`
- **Error Handling Specifics:** `{e.g., "Always use `Error`objects or extensions thereof for`throw`. Ensure `Promise`rejections are always`Error`objects. Use custom error classes inheriting from a base`AppError` for domain-specific errors."}`
- **Null/Undefined Handling:** `{e.g., "Strict null checks (`strictNullChecks`) must be enabled. Avoid `\!` non-null assertion operator; prefer explicit checks, optional chaining (`?.`), or nullish coalescing (`??`). Define clear strategies for optional function parameters and return types."}`
- **Module System:** `{e.g., "Use ESModules (`import`/`export`) exclusively. Avoid CommonJS (`require`/`module.exports`) in new code."}`
- **Logging Specifics:** `{e.g., "Use the chosen structured logging library. Log messages must include a correlation ID. Do not log sensitive PII. Use appropriate log levels."}`
- **Framework Idioms (e.g., for NestJS/Express):** `{e.g., "NestJS: Always use decorators for defining modules, controllers, services, DTOs. Adhere strictly to the defined module structure and dependency injection patterns. Express: Define middleware patterns, routing structure."}`
- **Key Library Usage Conventions:** `{e.g., "When using Axios, create a single configured instance. For date/time, use {date-fns/Luxon/Day.js} and avoid native `Date` object for manipulations."}`
- **Code Generation Anti-Patterns to Avoid:** `{e.g., "Avoid overly nested conditional logic (max 2-3 levels). Avoid single-letter variable names (except for trivial loop counters like `i`, `j`, `k`). Do not write code that bypasses framework security features (e.g., ORM query builders)."}`
### Naming Conventions
#### `{Language/Framework 2 Name, e.g., Python}` Specifics:
[[LLM: Only include if deviating from language defaults]]
- **Immutability:** `{e.g., "Use tuples for immutable sequences. For classes, consider `@dataclass(frozen=True)`. Be mindful of mutable default arguments."}`
- **Functional vs. OOP:** `{e.g., "Employ classes for representing entities and services. Use functions for stateless operations. List comprehensions/generator expressions are preferred over `map/filter` for readability."}`
- **Error Handling Specifics:** `{e.g., "Always raise specific, custom exceptions inheriting from a base `AppException`. Use `try-except-else-finally`blocks appropriately. Avoid broad`except Exception:` clauses without re-raising or specific handling."}`
- **Resource Management:** `{e.g., "Always use `with` statements for resources like files or DB connections to ensure they are properly closed."}`
- **Type Hinting:** `{e.g., "All new functions and methods must have full type hints. Run MyPy in CI. Strive for `disallow_untyped_defs = True`."}`
- **Logging Specifics:** `{e.g., "Use the `logging`module configured for structured output (e.g., with`python-json-logger`). Include correlation IDs."}`
- **Framework Idioms (e.g., for Django/Flask/FastAPI):** `{e.g., "Django: Follow fat models, thin views pattern. Use ORM conventions. FastAPI: Utilize Pydantic for request/response models and dependency injection for services."}`
- **Key Library Usage Conventions:** `{e.g., "For HTTP requests, use `httpx`or`requests`with explicit timeout settings. For data manipulation, prefer`pandas` where appropriate but be mindful of performance."}`
| Element | Convention | Example |
| :-------- | :------------------- | :---------------- |
| Variables | {{var_convention}} | {{var_example}} |
| Functions | {{func_convention}} | {{func_example}} |
| Classes | {{class_convention}} | {{class_example}} |
| Files | {{file_convention}} | {{file_example}} |
#### `{Add more Language/Framework sections as needed...}`
### Critical Rules
- **{Consider other things that the trained LLM Dev Agent could potentially be random about specific to the chosen language technologies and platforms that it should be reminded of here}**
[[LLM: List ONLY rules that AI might violate or project-specific requirements. Examples:
- "Never use console.log in production code - use logger"
- "All API responses must use ApiResponse wrapper type"
- "Database queries must use repository pattern, never direct ORM"
Avoid obvious rules like "use SOLID principles" or "write clean code"]]
<<REPEAT: critical_rule>>
- **{{rule_name}}:** {{rule_description}}
<</REPEAT>>
### Language-Specific Guidelines
[[LLM: Add ONLY if critical for preventing AI mistakes. Most teams don't need this section.]]
^^CONDITION: has_language_specifics^^
#### {{language_name}} Specifics
<<REPEAT: language_rule>>
- **{{rule_topic}}:** {{rule_detail}}
<</REPEAT>>
^^/CONDITION: has_language_specifics^^
[[LLM: After presenting the coding standards, apply `tasks#advanced-elicitation` protocol]]
## Test Strategy and Standards
[[LLM: Work with the user to determine the test strategy. Unit test framework, test organization, Test coverage desired, Build then test or TDD, integration testing approach, integration testing with local or remote resources, any mocking for integration tests and then what? for example if using dynamo, will we use in memory ddb, docker ddb, remote test db instance etc... Consider this for all proposed technologies and what makes sense to test locally or remote. Use any info that follows as needed. This section is NOT going to be read directly by the dev agent as it can get long, the minimum basics the agent needs to know will be listed in coding standards such as what the unit or integration test library is and any specific standard of style the dev needs to know. If the qa agent is used, that agent will be familiar and review this section.]]
[[LLM: Work with user to define comprehensive test strategy:
- **Tools:** {Reiterate primary testing frameworks and libraries from Tech Stack, e.g., Jest, Playwright, PyTest, JUnit, Testcontainers.}
- **Unit Tests:**
- **Scope:** {Test individual functions, methods, classes, or small modules in isolation. Focus on business logic, algorithms, and transformation rules.}
- **Location:** {e.g., `*.test.ts`/`*.spec.ts` co-located with source files; `test_*.py` in a parallel `tests/` directory, following language conventions.}
- **Mocking/Stubbing:** {Specify chosen mocking library (e.g., Jest mocks, `unittest.mock` in Python, Mockito for Java). Mock all external dependencies (network calls, file system, databases, time).}
- **AI Agent Responsibility:** {AI Agent must generate unit tests covering all public methods, significant logic paths, edge cases, and error conditions for any new or modified code.}
- **Integration Tests:**
- **Scope:** {Test the interaction between several components or services within the application boundary. E.g., API endpoint to service layer to database (using a test database or in-memory version).}
- **Location:** {e.g., `/tests/integration` or `/src/integration-test` (Java).}
- **Environment:** {Specify how dependencies are handled (e.g., Testcontainers for databases/external services, in-memory databases, dedicated test environment).}
- **AI Agent Responsibility:** {AI Agent may be tasked with generating integration tests for key service interactions or API endpoints based on specifications.}
- **End-to-End (E2E) Tests:**
- **Scope:** {Validate complete user flows or critical paths through the system from the user's perspective (e.g., UI interaction, API call sequence).}
- **Tools:** {Reiterate E2E testing tools from Tech Stack (e.g., Playwright, Cypress, Selenium).}
- **AI Agent Responsibility:** {AI Agent may be tasked with generating E2E test stubs or scripts based on user stories or BDD scenarios. Focus on critical happy paths and key error scenarios.}
- **Test Coverage:**
- **Target:** {Specify target code coverage if any (e.g., 80% line/branch coverage for unit tests). This is a guideline; quality of tests is paramount over raw coverage numbers.}
- **Measurement:** {Tool used for coverage reports (e.g., Istanbul/nyc, Coverage.py, JaCoCo).}
- **Mocking/Stubbing Strategy (General):** {Beyond specific test types, outline general principles. e.g., "Prefer fakes or test doubles over extensive mocking where it improves test clarity and maintainability. Strive for tests that are fast, reliable, and isolated."}
- **Test Data Management:** {How is test data created, managed, and isolated? E.g., factories, fixtures, setup/teardown scripts, dedicated test data generation tools.}
1. Use test frameworks from Tech Stack
2. Decide on TDD vs test-after approach
3. Define test organization and naming
4. Establish coverage goals
5. Determine integration test infrastructure
6. Plan for test data and external dependencies
Note: Basic info goes in Coding Standards for dev agent. This detailed section is for QA agent and team reference. Apply `tasks#advanced-elicitation` after initial draft.]]
### Testing Philosophy
- **Approach:** {{test_approach}}
- **Coverage Goals:** {{coverage_targets}}
- **Test Pyramid:** {{test_distribution}}
### Test Types and Organization
#### Unit Tests
- **Framework:** {{unit_test_framework}} {{version}}
- **File Convention:** {{unit_test_naming}}
- **Location:** {{unit_test_location}}
- **Mocking Library:** {{mocking_library}}
- **Coverage Requirement:** {{unit_coverage}}
**AI Agent Requirements:**
- Generate tests for all public methods
- Cover edge cases and error conditions
- Follow AAA pattern (Arrange, Act, Assert)
- Mock all external dependencies
#### Integration Tests
- **Scope:** {{integration_scope}}
- **Location:** {{integration_test_location}}
- **Test Infrastructure:**
<<REPEAT: test_dependency>>
- **{{dependency_name}}:** {{test_approach}} ({{test_tool}})
<</REPEAT>>
@{example: test_dependencies}
- **Database:** In-memory H2 for unit tests, Testcontainers PostgreSQL for integration
- **Message Queue:** Embedded Kafka for tests
- **External APIs:** WireMock for stubbing
@{/example}
#### End-to-End Tests
- **Framework:** {{e2e_framework}} {{version}}
- **Scope:** {{e2e_scope}}
- **Environment:** {{e2e_environment}}
- **Test Data:** {{e2e_data_strategy}}
### Test Data Management
- **Strategy:** {{test_data_approach}}
- **Fixtures:** {{fixture_location}}
- **Factories:** {{factory_pattern}}
- **Cleanup:** {{cleanup_strategy}}
### Continuous Testing
- **CI Integration:** {{ci_test_stages}}
- **Performance Tests:** {{perf_test_approach}}
- **Security Tests:** {{security_test_approach}}
[[LLM: After presenting the test strategy section, apply `tasks#advanced-elicitation` protocol]]
## Security
[[LLM: Outline key security considerations relevant to the codebase. These are mandatory and must be actively addressed by the AI agent during development.]]
[[LLM: Define MANDATORY security requirements for AI and human developers:
- **Input Sanitization/Validation:** {Specify library/method for ALL external inputs (API requests, user-provided data, file uploads). E.g., 'Use class-validator with NestJS DTOs for all API inputs; all validation rules must be defined in DTOs.' For other languages, 'Use {validation_library} for all external inputs; define schemas and constraints.' Validation must occur at the boundary before processing.}
- **Output Encoding:** {Specify where and how output encoding should be performed to prevent XSS and other injection attacks. E.g., 'All dynamic data rendered in HTML templates must be contextually auto-escaped by the template engine (specify engine and confirm default behavior). If generating HTML/XML/JSON manually, use approved encoding libraries like {encoder_library_name}.'}
- **Secrets Management:** {Reference `docs/environment-vars.md` regarding storage for different environments. In code, access secrets _only_ through a designated configuration module/service. Never hardcode secrets, include them in source control, or log them. Use specific tools for local development if applicable (e.g., Doppler, .env files NOT committed).}
- **Dependency Security:** {Policy on checking for vulnerable dependencies. E.g., 'Run automated vulnerability scans (e.g., `npm audit`, `pip-audit`, Snyk, Dependabot alerts) as part of CI. Update vulnerable dependencies promptly based on severity.' Policy on adding new dependencies (vetting process).}
- **Authentication/Authorization Checks:** {Where and how should these be enforced? E.g., 'All API endpoints (except explicitly public ones) must enforce authentication using the central auth module/middleware. Authorization (permission/role checks) must be performed at the service layer or entry point for protected resources.' Define patterns for implementing these checks.}
- **Principle of Least Privilege (Implementation):** {e.g., 'Database connection users must have only the necessary permissions (SELECT, INSERT, UPDATE, DELETE) for the specific tables/schemas they access. IAM roles for cloud services must be narrowly scoped to the required actions and resources.'}
- **API Security (General):** {e.g., 'Enforce HTTPS. Implement rate limiting and throttling (specify tool/method). Use standard HTTP security headers (CSP, HSTS, X-Frame-Options, etc. - specify which ones and their configuration). Follow REST/GraphQL security best practices.'}
- **Error Handling & Information Disclosure:** {Ensure error messages do not leak sensitive information (stack traces, internal paths, detailed SQL errors) to the end-user. Log detailed errors server-side, provide generic messages or error IDs to the client.}
- **Regular Security Audits/Testing:** {Mention if planned, e.g., penetration testing, static/dynamic analysis tool usage in CI (SAST/DAST).}
- **{Other relevant practices, e.g., File upload security, Session management security, Data encryption at rest and in transit beyond HTTPS if specific requirements exist.}**
1. Focus on implementation-specific rules
2. Reference security tools from Tech Stack
3. Define clear patterns for common scenarios
4. These rules directly impact code generation
5. Work with user to ensure completeness without redundancy]]
### Input Validation
- **Validation Library:** {{validation_library}}
- **Validation Location:** {{where_to_validate}}
- **Required Rules:**
- All external inputs MUST be validated
- Validation at API boundary before processing
- Whitelist approach preferred over blacklist
### Authentication & Authorization
- **Auth Method:** {{auth_implementation}}
- **Session Management:** {{session_approach}}
- **Required Patterns:**
- {{auth_pattern_1}}
- {{auth_pattern_2}}
### Secrets Management
- **Development:** {{dev_secrets_approach}}
- **Production:** {{prod_secrets_service}}
- **Code Requirements:**
- NEVER hardcode secrets
- Access via configuration service only
- No secrets in logs or error messages
### API Security
- **Rate Limiting:** {{rate_limit_implementation}}
- **CORS Policy:** {{cors_configuration}}
- **Security Headers:** {{required_headers}}
- **HTTPS Enforcement:** {{https_approach}}
### Data Protection
- **Encryption at Rest:** {{encryption_at_rest}}
- **Encryption in Transit:** {{encryption_in_transit}}
- **PII Handling:** {{pii_rules}}
- **Logging Restrictions:** {{what_not_to_log}}
### Dependency Security
- **Scanning Tool:** {{dependency_scanner}}
- **Update Policy:** {{update_frequency}}
- **Approval Process:** {{new_dep_process}}
### Security Testing
- **SAST Tool:** {{static_analysis}}
- **DAST Tool:** {{dynamic_analysis}}
- **Penetration Testing:** {{pentest_schedule}}
[[LLM: After presenting the security section, apply `tasks#advanced-elicitation` protocol]]
## Change Log
| Change | Date | Version | Description | Author |
| ------ | ---- | ------- | ----------- | ------ |
[[LLM: Track document versions and changes]]
--- Below, Prompt for Design Architect (If Project has UI) To Produce Front End Architecture ----
| Date | Version | Description | Author |
| :------- | :------ | :---------------------------- | :--------- |
| {{date}} | 1.0.0 | Initial architecture document | {{author}} |
---
## Checklist Results Report
[[LLM: Before running the checklist, offer to output the full architecture document. Once user confirms, execute the `architect-checklist` and populate results here.]]
---
## Next Steps
[[LLM: After completing the architecture:
1. If project has UI components:
- Recommend engaging Design Architect agent
- Use "Frontend Architecture Mode"
- Provide this document as input
2. For all projects:
- Review with Product Owner
- Begin story implementation with Dev agent
- Set up infrastructure with DevOps agent
3. Include specific prompts for next agents if needed]]
^^CONDITION: has_ui^^
### Design Architect Prompt
[[LLM: Create a brief prompt to hand off to Design Architect for Frontend Architecture creation. Include:
- Reference to this architecture document
- Key UI requirements from PRD
- Any frontend-specific decisions made here
- Request for detailed frontend architecture]]
^^/CONDITION: has_ui^^
### Developer Handoff
[[LLM: Create a brief prompt for developers starting implementation. Include:
- Reference to this architecture and coding standards
- First epic/story to implement
- Key technical decisions to follow]]

564
bmad-core/templates/front-end-architecture-tmpl.md
View File

@@ -1,429 +1,175 @@
# {Project Name} Frontend Architecture Document
# {{Project Name}} Frontend Architecture Document
## Table of Contents
[[LLM: Review provided documents including PRD, UX-UI Specification, and main Architecture Document. Focus on extracting technical implementation details needed for AI frontend tools and developer agents. Ask the user for any of these documents if you are unable to locate and were not provided.]]
{ Update this if sections and subsections are added or removed }
## Template and Framework Selection
- [Introduction](#introduction)
- [Overall Frontend Philosophy & Patterns](#overall-frontend-philosophy--patterns)
- [Detailed Frontend Directory Structure](#detailed-frontend-directory-structure)
- [Component Breakdown & Implementation Details](#component-breakdown--implementation-details)
- [Component Naming & Organization](#component-naming--organization)
- [Template for Component Specification](#template-for-component-specification)
- [State Management In-Depth](#state-management-in-depth)
- [Store Structure / Slices](#store-structure--slices)
- [Key Selectors](#key-selectors)
- [Key Actions / Reducers / Thunks](#key-actions--reducers--thunks)
- [API Interaction Layer](#api-interaction-layer)
- [Client/Service Structure](#clientservice-structure)
- [Error Handling & Retries (Frontend)](#error-handling--retries-frontend)
- [Routing Strategy](#routing-strategy)
- [Route Definitions](#route-definitions)
- [Route Guards / Protection](#route-guards--protection)
- [Build, Bundling, and Deployment](#build-bundling-and-deployment)
- [Build Process & Scripts](#build-process--scripts)
- [Key Bundling Optimizations](#key-bundling-optimizations)
- [Deployment to CDN/Hosting](#deployment-to-cdnhosting)
- [Frontend Testing Strategy](#frontend-testing-strategy)
- [Component Testing](#component-testing)
- [UI Integration/Flow Testing](#ui-integrationflow-testing)
- [End-to-End UI Testing Tools & Scope](#end-to-end-ui-testing-tools--scope)
- [Accessibility (AX) Implementation Details](#accessibility-ax-implementation-details)
- [Performance Considerations](#performance-considerations)
- [Internationalization (i18n) and Localization (l10n) Strategy](#internationalization-i18n-and-localization-l10n-strategy)
- [Feature Flag Management](#feature-flag-management)
- [Frontend Security Considerations](#frontend-security-considerations)
- [Browser Support and Progressive Enhancement](#browser-support-and-progressive-enhancement)
- [Change Log](#change-log)
[[LLM: Before proceeding with frontend architecture design, check if the project is using a frontend starter template or existing codebase:
## Introduction
1. Review the PRD, main architecture document, and brainstorming brief for mentions of:
{ This document details the technical architecture specifically for the frontend of {Project Name}. It complements the main {Project Name} Architecture Document and the UI/UX Specification. This document details the frontend architecture and **builds upon the foundational decisions** (e.g., overall tech stack, CI/CD, primary testing tools) defined in the main {Project Name} Architecture Document (`docs/architecture.md` or linked equivalent). **Frontend-specific elaborations or deviations from general patterns must be explicitly noted here.** The goal is to provide a clear blueprint for frontend development, ensuring consistency, maintainability, and alignment with the overall system design and user experience goals. }
- Frontend starter templates (e.g., Create React App, Next.js, Vite, Vue CLI, Angular CLI, etc.)
- UI kit or component library starters
- Existing frontend projects being used as a foundation
- Admin dashboard templates or other specialized starters
- Design system implementations
- **Link to Main Architecture Document (REQUIRED):** {e.g., `docs/architecture.md`}
- **Link to UI/UX Specification (REQUIRED if exists):** {e.g., `docs/front-end-spec.md`}
- **Link to Primary Design Files (Figma, Sketch, etc.) (REQUIRED if exists):** {From UI/UX Spec}
- **Link to Deployed Storybook / Component Showcase (if applicable):** {URL}
2. If a frontend starter template or existing project is mentioned:
## Overall Frontend Philosophy & Patterns
- Ask the user to provide access via one of these methods:
- Link to the starter template documentation
- Upload/attach the project files (for small projects)
- Share a link to the project repository
- Analyze the starter/existing project to understand:
- Pre-installed dependencies and versions
- Folder structure and file organization
- Built-in components and utilities
- Styling approach (CSS modules, styled-components, Tailwind, etc.)
- State management setup (if any)
- Routing configuration
- Testing setup and patterns
- Build and development scripts
- Use this analysis to ensure your frontend architecture aligns with the starter's patterns
{ Describe the core architectural decisions and patterns chosen for the frontend. This should align with the "Definitive Tech Stack Selections" in the main architecture document and consider implications from the overall system architecture (e.g., monorepo vs. polyrepo, backend service structure). }
3. If no frontend starter is mentioned but this is a new UI, ensure we know what the ui language and framework is:
- **Framework & Core Libraries:** {e.g., React 18.x with Next.js 13.x, Angular 16.x, Vue 3.x with Nuxt.js}. **These are derived from the 'Definitive Tech Stack Selections' in the main Architecture Document.** This section elaborates on *how* these choices are applied specifically to the frontend.
- **Component Architecture:** {e.g., Atomic Design principles, Presentational vs. Container components, use of specific component libraries like Material UI, Tailwind CSS for styling approach. Specify chosen approach and any key libraries.}
- **State Management Strategy:** {e.g., Redux Toolkit, Zustand, Vuex, NgRx. Briefly describe the overall approach – global store, feature stores, context API usage. **Referenced from main Architecture Document and detailed further in "State Management In-Depth" section.**}
- **Data Flow:** {e.g., Unidirectional data flow (Flux/Redux pattern), React Query/SWR for server state. Describe how data is fetched, cached, passed to components, and updated.}
- **Styling Approach:** **{Chosen Styling Solution, e.g., Tailwind CSS / CSS Modules / Styled Components}**. Configuration File(s): {e.g., `tailwind.config.js`, `postcss.config.js`}. Key conventions: {e.g., "Utility-first approach for Tailwind. Custom components defined in `src/styles/components.css`. Theme extensions in `tailwind.config.js` under `theme.extend`. For CSS Modules, files are co-located with components, e.g., `MyComponent.module.css`.}
- **Key Design Patterns Used:** {e.g., Provider pattern, Hooks, Higher-Order Components, Service patterns for API calls, Container/Presentational. These patterns are to be consistently applied. Deviations require justification and documentation.}
- Based on the framework choice, suggest appropriate starters:
- React: Create React App, Next.js, Vite + React
- Vue: Vue CLI, Nuxt.js, Vite + Vue
- Angular: Angular CLI
- Or suggest popular UI templates if applicable
- Explain benefits specific to frontend development
## Detailed Frontend Directory Structure
4. If the user confirms no starter template will be used:
- Note that all tooling, bundling, and configuration will need manual setup
- Proceed with frontend architecture from scratch
{ Provide an ASCII diagram representing the frontend application\'s specific folder structure (e.g., within `src/` or `app/` or a dedicated `frontend/` root directory if part of a monorepo). This should elaborate on the frontend part of the main project structure outlined in the architecture document. Highlight conventions for organizing components, pages/views, services, state, styles, assets, etc. For each key directory, provide a one-sentence mandatory description of its purpose.}
Document the starter template decision and any constraints it imposes before proceeding.]]
### EXAMPLE - Not Prescriptive (for a React/Next.js app)
## Frontend Tech Stack
```plaintext
src/
├── app/ # Next.js App Router: Pages/Layouts/Routes. MUST contain route segments, layouts, and page components.
│ ├── (features)/ # Feature-based routing groups. MUST group related routes for a specific feature.
│ │ └── dashboard/
│ │ ├── layout.tsx # Layout specific to the dashboard feature routes.
│ │ └── page.tsx # Entry page component for a dashboard route.
│ ├── api/ # API Routes (if using Next.js backend features). MUST contain backend handlers for client-side calls.
│ ├── globals.css # Global styles. MUST contain base styles, CSS variable definitions, Tailwind base/components/utilities.
│ └── layout.tsx # Root layout for the entire application.
├── components/ # Shared/Reusable UI Components.
│ ├── ui/ # Base UI elements (Button, Input, Card). MUST contain only generic, reusable, presentational UI elements, often mapped from a design system. MUST NOT contain business logic.
│ │ ├── Button.tsx
│ │ └── ...
│ ├── layout/ # Layout components (Header, Footer, Sidebar). MUST contain components structuring page layouts, not specific page content.
│ │ ├── Header.tsx
│ │ └── ...
│ └── (feature-specific)/ # Components specific to a feature but potentially reusable within it. This is an alternative to co-locating within features/ directory.
│ └── user-profile/
│ └── ProfileCard.tsx
├── features/ # Feature-specific logic, hooks, non-global state, services, and components solely used by that feature.
│ └── auth/
│ ├── components/ # Components used exclusively by the auth feature. MUST NOT be imported by other features.
│ ├── hooks/ # Custom React Hooks specific to the 'auth' feature. Hooks reusable across features belong in `src/hooks/`.
│ ├── services/ # Feature-specific API interactions or orchestrations for the 'auth' feature.
│ └── store.ts # Feature-specific state slice (e.g., Redux slice) if not part of a global store or if local state is complex.
├── hooks/ # Global/sharable custom React Hooks. MUST be generic and usable by multiple features/components.
│ └── useAuth.ts
├── lib/ / utils/ # Utility functions, helpers, constants. MUST contain pure functions and constants, no side effects or framework-specific code unless clearly named (e.g., `react-helpers.ts`).
│ └── utils.ts
├── services/ # Global API service clients or SDK configurations. MUST define base API client instances and core data fetching/mutation services.
│ └── apiClient.ts
├── store/ # Global state management setup (e.g., Redux store, Zustand store).
│ ├── index.ts # Main store configuration and export.
│ ├── rootReducer.ts # Root reducer if using Redux.
│ └── (slices)/ # Directory for global state slices (if not co-located in features).
├── styles/ # Global styles, theme configurations (if not using `globals.css` or similar, or for specific styling systems like SCSS partials).
└── types/ # Global TypeScript type definitions/interfaces. MUST contain types shared across multiple features/modules.
└── index.ts
[[LLM: Extract from main architecture's Technology Stack Table. This section MUST remain synchronized with the main architecture document. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### Technology Stack Table
| Category | Technology | Version | Purpose | Rationale |
| :-------------------- | :------------------- | :---------- | :---------- | :------------- |
| **Framework** | {{framework}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **UI Library** | {{ui_library}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **State Management** | {{state_management}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Routing** | {{routing_library}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Build Tool** | {{build_tool}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Styling** | {{styling_solution}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Testing** | {{test_framework}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Component Library** | {{component_lib}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Form Handling** | {{form_library}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Animation** | {{animation_lib}} | {{version}} | {{purpose}} | {{why_chosen}} |
| **Dev Tools** | {{dev_tools}} | {{version}} | {{purpose}} | {{why_chosen}} |
[[LLM: Fill in appropriate technology choices based on the selected framework and project requirements.]]
## Project Structure
[[LLM: Define exact directory structure for AI tools based on the chosen framework. Be specific about where each type of file goes. Generate a structure that follows the framework's best practices and conventions. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
## Component Standards
[[LLM: Define exact patterns for component creation based on the chosen framework. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### Component Template
[[LLM: Generate a minimal but complete component template following the framework's best practices. Include TypeScript types, proper imports, and basic structure.]]
### Naming Conventions
[[LLM: Provide naming conventions specific to the chosen framework for components, files, services, state management, and other architectural elements.]]
## State Management
[[LLM: Define state management patterns based on the chosen framework. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### Store Structure
[[LLM: Generate the state management directory structure appropriate for the chosen framework and selected state management solution.]]
### State Management Template
[[LLM: Provide a basic state management template/example following the framework's recommended patterns. Include TypeScript types and common operations like setting, updating, and clearing state.]]
## API Integration
[[LLM: Define API service patterns based on the chosen framework. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### Service Template
[[LLM: Provide an API service template that follows the framework's conventions. Include proper TypeScript types, error handling, and async patterns.]]
### API Client Configuration
[[LLM: Show how to configure the HTTP client for the chosen framework, including authentication interceptors/middleware and error handling.]]
## Routing
[[LLM: Define routing structure and patterns based on the chosen framework. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### Route Configuration
[[LLM: Provide routing configuration appropriate for the chosen framework. Include protected route patterns, lazy loading where applicable, and authentication guards/middleware.]]
## Styling Guidelines
[[LLM: Define styling approach based on the chosen framework. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### Styling Approach
[[LLM: Describe the styling methodology appropriate for the chosen framework (CSS Modules, Styled Components, Tailwind, etc.) and provide basic patterns.]]
### Global Theme Variables
[[LLM: Provide a CSS custom properties (CSS variables) theme system that works across all frameworks. Include colors, spacing, typography, shadows, and dark mode support.]]
## Testing Requirements
[[LLM: Define minimal testing requirements based on the chosen framework. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
### Component Test Template
[[LLM: Provide a basic component test template using the framework's recommended testing library. Include examples of rendering tests, user interaction tests, and mocking.]]
### Testing Best Practices
1. **Unit Tests**: Test individual components in isolation
2. **Integration Tests**: Test component interactions
3. **E2E Tests**: Test critical user flows (using Cypress/Playwright)
4. **Coverage Goals**: Aim for 80% code coverage
5. **Test Structure**: Arrange-Act-Assert pattern
6. **Mock External Dependencies**: API calls, routing, state management
## Environment Configuration
[[LLM: List required environment variables based on the chosen framework. Show the appropriate format and naming conventions for the framework. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
## AI Frontend Tool Prompt
[[LLM: Generate a detailed prompt for AI frontend tools (v0, Cursor, Claude, etc.) customized for the chosen framework. Include framework version, tech stack, patterns, conventions, and key requirements from the UX-UI specification.]]
### Copy this prompt for AI tools
```text
{{ai_tool_prompt}}
```
### Notes on Frontend Structure:
## Frontend Developer Standards
{ Explain any specific conventions or rationale behind the structure. e.g., "Components are co-located with their feature if not globally reusable to improve modularity." AI Agent MUST adhere to this defined structure strictly. New files MUST be placed in the appropriate directory based on these descriptions. }
### Critical Coding Rules
## Component Breakdown & Implementation Details
[[LLM: List essential rules that prevent common AI mistakes, including both universal rules and framework-specific ones. After presenting this section, apply `tasks#advanced-elicitation` protocol]]
{ This section outlines the conventions and templates for defining UI components. Detailed specification for most feature-specific components will emerge as user stories are implemented. The AI agent MUST follow the "Template for Component Specification" below whenever a new component is identified for development. }
### Quick Reference
### Component Naming & Organization
[[LLM: Create a framework-specific cheat sheet with:
- **Component Naming Convention:** **{e.g., PascalCase for files and component names: `UserProfileCard.tsx`}**. All component files MUST follow this convention.
- **Organization:** {e.g., "Globally reusable components in `src/components/ui/` or `src/components/layout/`. Feature-specific components co-located within their feature directory, e.g., `src/features/feature-name/components/`. Refer to Detailed Frontend Directory Structure.}
### Template for Component Specification
{ For each significant UI component identified from the UI/UX Specification and design files (Figma), the following details MUST be provided. Repeat this subsection for each component. The level of detail MUST be sufficient for an AI agent or developer to implement it with minimal ambiguity. }
#### Component: `{ComponentName}` (e.g., `UserProfileCard`, `ProductDetailsView`)
- **Purpose:** {Briefly describe what this component does and its role in the UI. MUST be clear and concise.}
- **Source File(s):** {e.g., `src/components/user-profile/UserProfileCard.tsx`. MUST be the exact path.}
- **Visual Reference:** {Link to specific Figma frame/component, or Storybook page. REQUIRED.}
- **Props (Properties):**
{ List each prop the component accepts. For each prop, all columns in the table MUST be filled. }
| Prop Name | Type | Required? | Default Value | Description |
| :-------------- | :---------------------------------------- | :-------- | :------------ | :--------------------------------------------------------------------------------------------------------- |
| `userId` | `string` | Yes | N/A | The ID of the user to display. MUST be a valid UUID. |
| `avatarUrl` | `string \| null` | No | `null` | URL for the user\'s avatar image. MUST be a valid HTTPS URL if provided. |
| `onEdit` | `() => void` | No | N/A | Callback function when an edit action is triggered. |
| `variant` | `\'compact\' \| \'full\'` | No | `\'full\'` | Controls the display mode of the card. |
| `{anotherProp}` | `{Specific primitive, imported type, or inline interface/type definition}` | {Yes/No} | {If any} | {MUST clearly state the prop\'s purpose and any constraints, e.g., \'Must be a positive integer.\'} |
- **Internal State (if any):**
{ Describe any significant internal state the component manages. Only list state that is *not* derived from props or global state. If state is complex, consider if it should be managed by a custom hook or global state solution instead. }
| State Variable | Type | Initial Value | Description |
| :-------------- | :-------- | :------------ | :----------------------------------------------------------------------------- |
| `isLoading` | `boolean` | `false` | Tracks if data for the component is loading. |
| `{anotherState}`| `{type}` | `{value}` | {Description of state variable and its purpose.} |
- **Key UI Elements / Structure:**
{ Provide a pseudo-HTML or JSX-like structure representing the component\'s DOM. Include key conditional rendering logic if applicable. **This structure dictates the primary output for the AI agent.** }
```html
<div> <!-- Main card container with specific class e.g., styles.cardFull or styles.cardCompact based on variant prop -->
<img src="{avatarUrl || defaultAvatar}" alt="User Avatar" class="{styles.avatar}" />
<h2>{userName}</h2>
<p class="{variant === 'full' ? styles.emailFull : styles.emailCompact}">{userEmail}</p>
{variant === 'full' && onEdit && <button onClick={onEdit} class="{styles.editButton}">Edit</button>}
</div>
```
- **Events Handled / Emitted:**
- **Handles:** {e.g., `onClick` on the edit button (triggers `onEdit` prop).}
- **Emits:** {If the component emits custom events/callbacks not covered by props, describe them with their exact signature. e.g., `onFollow: (payload: { userId: string; followed: boolean }) => void`}
- **Actions Triggered (Side Effects):**
- **State Management:** {e.g., "Dispatches `userSlice.actions.setUserName(newName)` from `src/store/slices/userSlice.ts`. Action payload MUST match the defined action creator." OR "Calls `updateUserProfileOptimistic(newData)` from a local `useReducer` hook."}
- **API Calls:** {Specify which service/function from the "API Interaction Layer" is called. e.g., "Calls `userService.fetchUser(userId)` from `src/services/userService.ts` on mount. Request payload: `{ userId }`. Success response populates internal state `userData`. Error response dispatches `uiSlice.actions.showErrorToast({ message: 'Failed to load user details' })`.}
- **Styling Notes:**
- {MUST reference specific Design System component names (e.g., "Uses `<Button variant='primary'>` from UI library") OR specify Tailwind CSS classes / CSS module class names to be applied (e.g., "Container uses `p-4 bg-white rounded-lg shadow-md`. Title uses `text-xl font-semibold`.") OR specify SCSS custom component classes to be applied (e.g., "Container uses `@apply p-4 bg-white rounded-lg shadow-md`. Title uses `@apply text-xl font-semibold`."). Any dynamic styling logic based on props or state MUST be described. If Tailwind CSS is used, list primary utility classes or `@apply` directives for custom component classes. AI Agent should prioritize direct utility class usage for simple cases and propose reusable component classes/React components for complex styling patterns.}
- **Accessibility Notes:**
- {MUST list specific ARIA attributes and their values (e.g., `aria-label="User profile card"`, `role="article"`), required keyboard navigation behavior (e.g., "Tab navigates to avatar, name, email, then edit button. Edit button is focusable and activated by Enter/Space."), and any focus management requirements (e.g., "If this component opens a modal, focus MUST be trapped inside. On modal close, focus returns to the trigger element.").}
---
_Repeat the above template for each significant component._
---
## State Management In-Depth
{ This section expands on the State Management strategy. **Refer to the main Architecture Document for the definitive choice of state management solution.** }
- **Chosen Solution:** {e.g., Redux Toolkit, Zustand, Vuex, NgRx - As defined in main arch doc.}
- **Decision Guide for State Location:**
- **Global State (e.g., Redux/Zustand):** Data shared across many unrelated components; data persisting across routes; complex state logic managed via reducers/thunks. **MUST be used for session data, user preferences, application-wide notifications.**
- **React Context API:** State primarily passed down a specific component subtree (e.g., theme, form context). Simpler state, fewer updates compared to global state. **MUST be used for localized state not suitable for prop drilling but not needed globally.**
- **Local Component State (`useState`, `useReducer`):** UI-specific state, not needed outside the component or its direct children (e.g., form input values, dropdown open/close status). **MUST be the default choice unless criteria for Context or Global State are met.**
### Store Structure / Slices
{ Describe the conventions for organizing the global state (e.g., "Each major feature requiring global state will have its own Redux slice located in `src/features/[featureName]/store.ts`"). }
- **Core Slice Example (e.g., `sessionSlice` in `src/store/slices/sessionSlice.ts`):**
- **Purpose:** {Manages user session, authentication status, and basic user profile info accessible globally.}
- **State Shape (Interface/Type):**
```typescript
interface SessionState {
currentUser: { id: string; name: string; email: string; roles: string[]; } | null;
isAuthenticated: boolean;
token: string | null;
status: "idle" | "loading" | "succeeded" | "failed";
error: string | null;
}
```
- **Key Reducers/Actions (within `createSlice`):** {Briefly list main synchronous actions, e.g., `setCurrentUser`, `clearSession`, `setAuthStatus`, `setAuthError`.}
- **Async Thunks (if any):** {List key async thunks, e.g., `loginUserThunk`, `fetchUserProfileThunk`.}
- **Selectors (memoized with `createSelector`):** {List key selectors, e.g., `selectCurrentUser`, `selectIsAuthenticated`.}
- **Feature Slice Template (e.g., `{featureName}Slice` in `src/features/{featureName}/store.ts`):**
- **Purpose:** {To be filled out when a new feature requires its own state slice.}
- **State Shape (Interface/Type):** {To be defined by the feature.}
- **Key Reducers/Actions (within `createSlice`):** {To be defined by the feature.}
- **Async Thunks (if any, defined using `createAsyncThunk`):** {To be defined by the feature.}
- **Selectors (memoized with `createSelector`):** {To be defined by the feature.}
- **Export:** {All actions and selectors MUST be exported.}
### Key Selectors
{ List important selectors for any core, upfront slices. For emergent feature slices, selectors will be defined with the slice. **ALL selectors deriving data or combining multiple state pieces MUST use `createSelector` from Reselect (or equivalent for other state libraries) for memoization.** }
- **`selectCurrentUser` (from `sessionSlice`):** {Returns the `currentUser` object.}
- **`selectIsAuthenticated` (from `sessionSlice`):** {Returns `isAuthenticated` boolean.}
- **`selectAuthToken` (from `sessionSlice`):** {Returns the `token` from `sessionSlice`.}
### Key Actions / Reducers / Thunks
{ Detail more complex actions for core, upfront slices, especially asynchronous thunks or sagas. Each thunk MUST clearly define its purpose, parameters, API calls made (referencing the API Interaction Layer), and how it updates the state on pending, fulfilled, and rejected states. }
- **Core Action/Thunk Example: `authenticateUser(credentials: AuthCredentials)` (in `sessionSlice.ts`):**
- **Purpose:** {Handles user login by calling the auth API and updating the `sessionSlice`.}
- **Parameters:** `credentials: { email: string; password: string }`
- **Dispatch Flow (using Redux Toolkit `createAsyncThunk`):**
1. On `pending`: Dispatches `sessionSlice.actions.setAuthStatus('loading')`.
2. Calls `authService.login(credentials)` (from `src/services/authService.ts`).
3. On `fulfilled` (success): Dispatches `sessionSlice.actions.setCurrentUser(response.data.user)`, `sessionSlice.actions.setToken(response.data.token)`, `sessionSlice.actions.setAuthStatus('succeeded')`.
4. On `rejected` (error): Dispatches `sessionSlice.actions.setAuthError(error.message)`, `sessionSlice.actions.setAuthStatus('failed')`.
- **Feature Action/Thunk Template: `{featureActionName}` (in `{featureName}Slice.ts`):**
- **Purpose:** {To be filled out for feature-specific async operations.}
- **Parameters:** {Define specific parameters with types.}
- **Dispatch Flow (using `createAsyncThunk`):** {To be defined by the feature, following similar patterns for pending, fulfilled, rejected states, including API calls and state updates.}
## API Interaction Layer
{ Describe how the frontend communicates with the backend APIs defined in the main Architecture Document. }
### Client/Service Structure
- **HTTP Client Setup:** {e.g., Axios instance in `src/services/apiClient.ts`. **MUST** include: Base URL (from environment variable `NEXT_PUBLIC_API_URL` or equivalent), default headers (e.g., `Content-Type: 'application/json'`), interceptors for automatic auth token injection (from state management, e.g., `sessionSlice.token`) and standardized error handling/normalization (see below).}
- **Service Definitions (Example):**
- **`userService.ts` (in `src/services/userService.ts`):**
- **Purpose:** {Handles all API interactions related to users.}
- **Functions:** Each service function MUST have explicit parameter types, a return type (e.g., `Promise<User>`), JSDoc/TSDoc explaining purpose, params, return value, and any specific error handling. It MUST call the configured HTTP client (`apiClient`) with correct endpoint, method, and payload.
- `fetchUser(userId: string): Promise<User>`
- `updateUserProfile(userId: string, data: UserProfileUpdateDto): Promise<User>`
- **`productService.ts` (in `src/services/productService.ts`):**
- **Purpose:** {...}
- **Functions:** {...}
### Error Handling & Retries (Frontend)
- **Global Error Handling:** {How are API errors caught globally? (e.g., Via Axios response interceptor in `apiClient.ts`). How are they presented/logged? (e.g., Dispatches `uiSlice.actions.showGlobalErrorBanner({ message: error.message })`, logs detailed error to console/monitoring service). Is there a global error state? (e.g., `uiSlice.error`).}
- **Specific Error Handling:** {Components MAY handle specific API errors locally for more contextual feedback (e.g., displaying an inline message on a form field: "Invalid email address"). This MUST be documented in the component's specification if it deviates from global handling.}
- **Retry Logic:** {Is client-side retry logic implemented (e.g., using `axios-retry` with `apiClient`)? If so, specify configuration: max retries (e.g., 3), retry conditions (e.g., network errors, 5xx server errors), retry delay (e.g., exponential backoff). **MUST apply only to idempotent requests (GET, PUT, DELETE).**}
## Routing Strategy
{ Detail how navigation and routing are handled in the frontend application. }
- **Routing Library:** {e.g., React Router, Next.js App Router, Vue Router, Angular Router. As per main Architecture Document.}
### Route Definitions
{ List the main routes of the application and the primary component/page rendered for each. }
| Path Pattern | Component/Page (`src/app/...` or `src/pages/...`) | Protection | Notes |
| :--------------------- | :-------------------------------------------------- | :------------------------------ | :---------------------------------------------------- |
| `/` | `app/page.tsx` or `pages/HomePage.tsx` | `Public` | |
| `/login` | `app/login/page.tsx` or `pages/LoginPage.tsx` | `Public` (redirect if auth) | Redirects to `/dashboard` if already authenticated. |
| `/dashboard` | `app/dashboard/page.tsx` or `pages/DashboardPage.tsx` | `Authenticated` | |
| `/products` | `app/products/page.tsx` | `Public` | |
| `/products/:productId` | `app/products/[productId]/page.tsx` | `Public` | Parameter: `productId` (string) |
| `/settings/profile` | `app/settings/profile/page.tsx` | `Authenticated`, `Role:[USER]` | Example of role-based protection. |
| `{anotherRoute}` | `{ComponentPath}` | `{Public/Authenticated/Role:[ROLE_NAME]}` | {Notes, parameter names and types} |
### Route Guards / Protection
- **Authentication Guard:** {Describe how routes are protected based on authentication status. **Specify the exact HOC, hook, layout, or middleware mechanism and its location** (e.g., `src/guards/AuthGuard.tsx`, or Next.js middleware in `middleware.ts`). Logic MUST use authentication state from the `sessionSlice` (or equivalent). Unauthenticated users attempting to access protected routes MUST be redirected to `/login` (or specified login path).}
- **Authorization Guard (if applicable):** {Describe how routes might be protected based on user roles or permissions. **Specify the exact mechanism**, similar to Auth Guard. Unauthorized users (authenticated but lacking permissions) MUST be shown a "Forbidden" page or redirected to a safe page.}
## Build, Bundling, and Deployment
{ Details specific to the frontend build and deployment process, complementing the "Infrastructure and Deployment Overview" in the main architecture document. }
### Build Process & Scripts
- **Key Build Scripts (from `package.json`):** {e.g., `"build": "next build"`. What do they do? Point to `package.json` scripts. `"dev": "next dev"`, `"start": "next start"`.}. **AI Agent MUST NOT generate code that hardcodes environment-specific values. All such values MUST be accessed via the defined environment configuration mechanism.** Specify the exact files and access method.
- **Environment Configuration Management:** {How are `process.env.NEXT_PUBLIC_API_URL` (or equivalent like `import.meta.env.VITE_API_URL`) managed for different environments (dev, staging, prod)? (e.g., `.env`, `.env.development`, `.env.production` files for Next.js/Vite; build-time injection via CI variables). Specify the exact files and access method.}
### Key Bundling Optimizations
- **Code Splitting:** {How is it implemented/ensured? (e.g., "Next.js/Vite handles route-based code splitting automatically. For component-level code splitting, dynamic imports `React.lazy(() => import('./MyComponent'))` or `import('./heavy-module')` MUST be used for non-critical large components/libraries.")}
- **Tree Shaking:** {How is it implemented/ensured? (e.g., "Ensured by modern build tools like Webpack/Rollup (used by Next.js/Vite) when using ES Modules. Avoid side-effectful imports in shared libraries.")}
- **Lazy Loading (Components, Images, etc.):** {Strategy for lazy loading. (e.g., "Components: `React.lazy` with `Suspense`. Images: Use framework-specific Image component like `next/image` which handles lazy loading by default, or `loading='lazy'` attribute for standard `<img>` tags.")}
- **Minification & Compression:** {Handled by build tools (e.g., Webpack/Terser, Vite/esbuild)? Specify if any specific configuration is needed. Compression (e.g., Gzip, Brotli) is typically handled by the hosting platform/CDN.}
### Deployment to CDN/Hosting
- **Target Platform:** {e.g., Vercel, Netlify, AWS S3/CloudFront, Azure Static Web Apps. As per main Architecture Document.}
- **Deployment Trigger:** {e.g., Git push to `main` branch via GitHub Actions (referencing main CI/CD pipeline).}
- **Asset Caching Strategy:** {How are static assets cached? (e.g., "Immutable assets (JS/CSS bundles with content hashes) have `Cache-Control: public, max-age=31536000, immutable`. HTML files have `Cache-Control: no-cache` or short max-age (e.g., `public, max-age=0, must-revalidate`) to ensure users get fresh entry points. Configured via {hosting platform settings / `next.config.js` headers / CDN rules}.}
## Frontend Testing Strategy
{ This section elaborates on the "Testing Strategy" from the main architecture document, focusing on frontend-specific aspects. **Refer to the main Architecture Document for definitive choices of testing tools.** }
- **Link to Main Overall Testing Strategy:** {Reference the main `docs/architecture.md#overall-testing-strategy` or equivalent.}
### Component Testing
- **Scope:** {Testing individual UI components in isolation (similar to unit tests for components).}
- **Tools:** {e.g., React Testing Library with Jest, Vitest, Vue Test Utils, Angular Testing Utilities. As per main Arch Doc.}
- **Focus:** {Rendering with various props, user interactions (clicks, input changes using `fireEvent` or `userEvent`), event emission, basic internal state changes. **Snapshot testing MUST be used sparingly and with clear justification (e.g., for very stable, purely presentational components with complex DOM structure); prefer explicit assertions.**}
- **Location:** {e.g., `*.test.tsx` or `*.spec.tsx` co-located alongside components, or in a `__tests__` subdirectory.}
### Feature/Flow Testing (UI Integration)
- **Scope:** {Testing how multiple components interact to fulfill a small user flow or feature within a page, potentially mocking API calls or global state management. e.g., testing a complete form submission within a feature, including validation and interaction with a mocked service layer.}
- **Tools:** {Same as component testing (e.g., React Testing Library with Jest/Vitest), but with more complex setups involving mock providers for routing, state, API calls.}
- **Focus:** {Data flow between components, conditional rendering based on interactions, navigation within a feature, integration with mocked services/state.}
### End-to-End UI Testing Tools & Scope
- **Tools:** {Reiterate from main Testing Strategy, e.g., Playwright, Cypress, Selenium.}
- **Scope (Frontend Focus):** {Define 3-5 key user journeys that MUST be covered by E2E UI tests from a UI perspective, e.g., "User registration and login flow", "Adding an item to cart and proceeding to the checkout page summary", "Submitting a complex multi-step form and verifying success UI state and data persistence (via API mocks or a test backend)."}
- **Test Data Management for UI:** {How is consistent test data seeded or mocked for UI E2E tests? (e.g., API mocking layer like MSW, backend seeding scripts, dedicated test accounts).}
## Accessibility (AX) Implementation Details
{ Based on the AX requirements in the UI/UX Specification, detail how these will be technically implemented. }
- **Semantic HTML:** {Emphasis on using correct HTML5 elements. **AI Agent MUST prioritize semantic elements (e.g., `<nav>`, `<button>`, `<article>`) over generic `<div>`/`<span>` with ARIA roles where a native element with the correct semantics exists.**}
- **ARIA Implementation:** {Specify common custom components and their required ARIA patterns (e.g., "Custom select dropdown MUST follow ARIA Combobox pattern including `aria-expanded`, `aria-controls`, `role='combobox'`, etc. Custom Tabs MUST follow ARIA Tabbed Interface pattern."). Link to ARIA Authoring Practices Guide (APG) for reference.}
- **Keyboard Navigation:** {Ensuring all interactive elements are focusable and operable via keyboard. Focus order MUST be logical. Custom components MUST implement keyboard interaction patterns as per ARIA APG (e.g., arrow keys for radio groups/sliders).**}
- **Focus Management:** {How is focus managed in modals, dynamic content changes, route transitions? (e.g., "Modals MUST trap focus. On modal open, focus moves to the first focusable element or the modal container. On close, focus returns to the trigger element. Route changes SHOULD move focus to the main content area or H1 of the new page.")}
- **Testing Tools for AX:** {e.g., Axe DevTools browser extension, Lighthouse accessibility audit. **Automated Axe scans (e.g., using `jest-axe` for component tests, or Playwright/Cypress Axe integration for E2E tests) MUST be integrated into the CI pipeline and fail the build on new violations of WCAG AA (or specified level).** Manual testing procedures: {List key manual checks, e.g., keyboard-only navigation for all interactive elements, screen reader testing (e.g., NVDA/JAWS/VoiceOver) for critical user flows.}}
## Performance Considerations
{ Highlight frontend-specific performance optimization strategies. }
- **Image Optimization:** {Formats (e.g., WebP), responsive images (`<picture>`, `srcset`), lazy loading.}
- Implementation Mandate: {e.g., "All images MUST use `<Image>` component from Next.js (or equivalent framework-specific optimizer). SVGs for icons. WebP format preferred where supported."}
- **Code Splitting & Lazy Loading (reiterate from Build section if needed):** {How it impacts perceived performance.}
- Implementation Mandate: {e.g., "Next.js handles route-based code splitting automatically. Dynamic imports `import()` MUST be used for component-level lazy loading."}
- **Minimizing Re-renders:** {Techniques like `React.memo`, `shouldComponentUpdate`, optimized selectors.}
- Implementation Mandate: {e.g., "`React.memo` MUST be used for components that render frequently with same props. Selectors for global state MUST be memoized (e.g., with Reselect). Avoid passing new object/array literals or inline functions as props directly in render methods where it can cause unnecessary re-renders."}
- **Debouncing/Throttling:** {For event handlers like search input or window resize.}
- Implementation Mandate: {e.g., "Use a utility like `lodash.debounce` or `lodash.throttle` for specified event handlers. Define debounce/throttle wait times."}
- **Virtualization:** {For long lists or large data sets (e.g., React Virtualized, TanStack Virtual).}
- Implementation Mandate: {e.g., "MUST be used for any list rendering more than {N, e.g., 100} items if performance degradation is observed."}
- **Caching Strategies (Client-Side):** {Use of browser cache, service workers for PWA capabilities (if applicable).}
- Implementation Mandate: {e.g., "Configure service worker (if PWA) to cache application shell and key static assets. Leverage HTTP caching headers for other assets as defined in Deployment section."}
- **Performance Monitoring Tools:** {e.g., Lighthouse, WebPageTest, browser DevTools performance tab. Specify which ones are primary and any automated checks in CI.}
## Internationalization (i18n) and Localization (l10n) Strategy
{This section defines the strategy for supporting multiple languages and regional differences if applicable. If not applicable, state "Internationalization is not a requirement for this project at this time."}
- **Requirement Level:** {e.g., Not Required, Required for specific languages [list them], Fully internationalized for future expansion.}
- **Chosen i18n Library/Framework:** {e.g., `react-i18next`, `vue-i18n`, `ngx-translate`, framework-native solution like Next.js i18n routing. Specify the exact library/mechanism.}
- **Translation File Structure & Format:** {e.g., JSON files per language per feature (`src/features/{featureName}/locales/{lang}.json`), or global files (`public/locales/{lang}.json`). Define the exact path and format (e.g., flat JSON, nested JSON).}
- **Translation Key Naming Convention:** {e.g., `featureName.componentName.elementText`, `common.submitButton`. MUST be a clear, consistent, and documented pattern.}
- **Process for Adding New Translatable Strings:** {e.g., "AI Agent MUST add new keys to the default language file (e.g., `en.json`) and use the i18n library's functions/components (e.g., `<Trans>` component, `t()` function) to render text. Keys MUST NOT be constructed dynamically at runtime in a way that prevents static analysis."}
- **Handling Pluralization:** {Specify method/syntax, e.g., using ICU message format via the chosen library (e.g., `t('key', { count: N })`).}
- **Date, Time, and Number Formatting:** {Specify if the i18n library handles this, or if another library (e.g., `date-fns-tz` with locale support, `Intl` API directly) and specific formats/styles should be used for each locale.}
- **Default Language:** {e.g., `en-US`}
- **Language Switching Mechanism (if applicable):** {How is the language changed by the user and persisted? e.g., "Via a language selector component that updates a global state/cookie and potentially alters the URL route."}
## Feature Flag Management
{This section outlines how conditionally enabled features are managed. If not applicable, state "Feature flags are not a primary architectural concern for this project at this time."}
- **Requirement Level:** {e.g., Not Required, Used for specific rollouts, Core part of development workflow.}
- **Chosen Feature Flag System/Library:** {e.g., LaunchDarkly, Unleash, Flagsmith, custom solution using environment variables or a configuration service. Specify the exact tool/method.}
- **Accessing Flags in Code:** {e.g., "Via a custom hook `useFeatureFlag('flag-name'): boolean` or a service `featureFlagService.isOn('flag-name')`. Specify the exact interface, location, and initialization of the service/provider."}
- **Flag Naming Convention:** {e.g., `[SCOPE]_[FEATURE_NAME]_[TARGET_GROUP_OR_TYPE]`, e.g., `CHECKOUT_NEW_PAYMENT_GATEWAY_ROLLOUT`, `USER_PROFILE_BETA_AVATAR_UPLOAD`. MUST be documented and consistently applied.}
- **Code Structure for Flagged Features:** {e.g., "Use conditional rendering (`{isFeatureEnabled && <NewComponent />}`). For larger features, conditionally import components (`React.lazy` with flag check) or routes. Avoid complex branching logic deep within shared components; prefer to flag at higher levels."}
- **Strategy for Code Cleanup (Post-Flag Retirement):** {e.g., "Once a flag is fully rolled out (100% users) and deemed permanent, or fully removed, all conditional logic, old code paths, and the flag itself MUST be removed from the codebase within {N, e.g., 2} sprints. This is a mandatory tech debt item."}
- **Testing Flagged Features:** {How are different flag variations tested? e.g., "QA team uses a debug panel to toggle flags. Automated E2E tests run with specific flag configurations."}
## Frontend Security Considerations
{This section highlights mandatory frontend-specific security practices, complementing the main Architecture Document. AI Agent MUST adhere to these guidelines.}
- **Cross-Site Scripting (XSS) Prevention:**
- Framework Reliance: {e.g., "React's JSX auto-escaping MUST be relied upon for rendering dynamic content. Vue's `v-html` MUST be avoided unless content is explicitly sanitized."}
- Explicit Sanitization: {If direct DOM manipulation is unavoidable (strongly discouraged), use {specific sanitization library/function like DOMPurify}. Specify its configuration.}
- Content Security Policy (CSP): {Is a CSP implemented? How? e.g., "CSP is enforced via HTTP headers set by the backend/CDN as defined in the main Architecture doc. Frontend MAY need to ensure nonce usage for inline scripts if `unsafe-inline` is not allowed." Link to CSP definition if available.}
- **Cross-Site Request Forgery (CSRF) Protection (if applicable for session-based auth):**
- Mechanism: {e.g., "Backend uses synchronizer token pattern. Frontend ensures tokens are included in state-changing requests if not handled automatically by HTTP client or forms." Refer to main Architecture Document for backend details.}
- **Secure Token Storage & Handling (for client-side tokens like JWTs):**
- Storage Mechanism: {**MUST specify exact mechanism**: e.g., In-memory via state management (e.g., Redux/Zustand store, cleared on tab close), `HttpOnly` cookies (if backend sets them and frontend doesn't need to read them), `sessionStorage`. **`localStorage` is STRONGLY DISCOURAGED for token storage.**}
- Token Refresh: {Describe client-side involvement, e.g., "Interceptor in `apiClient.ts` handles 401 errors to trigger token refresh endpoint."}
- **Third-Party Script Security:**
- Policy: {e.g., "All third-party scripts (analytics, ads, widgets) MUST be vetted for necessity and security. Load scripts asynchronously (`async/defer`)."}
- Subresource Integrity (SRI): {e.g., "SRI hashes MUST be used for all external scripts and stylesheets loaded from CDNs where the resource is stable."}
- **Client-Side Data Validation:**
- Purpose: {e.g., "Client-side validation is for UX improvement (immediate feedback) ONLY. **All critical data validation MUST occur server-side** (as defined in the main Architecture Document)."}
- Implementation: {e.g., "Use {form_library_name like Formik/React Hook Form} for form validation. Rules should mirror server-side validation where appropriate."}
- **Preventing Clickjacking:**
- Mechanism: {e.g., "Primary defense is `X-Frame-Options` or `frame-ancestors` CSP directive, set by backend/CDN. Frontend code should not rely on frame-busting scripts."}
- **API Key Exposure (for client-side consumed services):**
- Restriction: {e.g., "API keys for services like Google Maps (client-side JS SDK) MUST be restricted (e.g., HTTP referrer, IP address, API restrictions) via the service provider's console."}
- Backend Proxy: {e.g., "For keys requiring more secrecy or involving sensitive operations, a backend proxy endpoint MUST be created; frontend calls the proxy, not the third-party service directly."}
- **Secure Communication (HTTPS):**
- Mandate: {e.g., "All communication with backend APIs MUST use HTTPS. Mixed content (HTTP assets on HTTPS page) is forbidden."}
- **Dependency Vulnerabilities:**
- Process: {e.g., "Run `npm audit --audit-level=high` (or equivalent) in CI. High/critical vulnerabilities MUST be addressed before deployment. Monitor Dependabot/Snyk alerts."}
## Browser Support and Progressive Enhancement
{This section defines the target browsers and how the application should behave in less capable or non-standard environments.}
- **Target Browsers:** {e.g., "Latest 2 stable versions of Chrome, Firefox, Safari, Edge. Specific versions can be listed if required by project constraints. Internet Explorer (any version) is NOT supported." MUST be explicit.}
- **Polyfill Strategy:**
- Mechanism: {e.g., "Use `core-js@3` imported at the application entry point. Babel `preset-env` is configured with the above browser targets to include necessary polyfills."}
- Specific Polyfills (if any beyond `core-js`): {List any other polyfills required for specific features, e.g., `smoothscroll-polyfill`.}
- **JavaScript Requirement & Progressive Enhancement:**
- Baseline: {e.g., "Core application functionality REQUIRES JavaScript enabled in the browser." OR "Key content (e.g., articles, product information) and primary navigation MUST be accessible and readable without JavaScript. Interactive features and enhancements are layered on top with JavaScript (Progressive Enhancement approach)." Specify the chosen approach.}
- No-JS Experience (if Progressive Enhancement): {Describe what works without JS. e.g., "Users can view pages and navigate. Forms may not submit or will use standard HTML submission."}
- **CSS Compatibility & Fallbacks:**
- Tooling: {e.g., "Use Autoprefixer (via PostCSS) configured with the target browser list to add vendor prefixes."}
- Feature Usage: {e.g., "Avoid CSS features not supported by >90% of target browsers unless a graceful degradation or fallback is explicitly defined and tested (e.g., using `@supports` queries)."}
- **Accessibility Fallbacks:** {Consider how features behave if certain ARIA versions or advanced accessibility features are not supported by older assistive technologies within the support matrix.}
## Change Log
| Change | Date | Version | Description | Author |
| ------ | ---- | ------- | ----------- | ------ |
- Common commands (dev server, build, test)
- Key import patterns
- File naming conventions
- Project-specific patterns and utilities]]