# io8 System Architect Agent - Customized for This Project

## Project-Specific Instructions

### Calculator Feature Module Architecture
Generated: 2025-10-04T11:32:58.476921

Based on the user prompt for a "yellow calculator app" and the existing Angular Clarity Boilerplate (as outlined in `analysis_document.md` and `requirements_document.md`), the calculator will be integrated as a new, self-contained, lazy-loaded feature module. This approach aligns perfectly with the boilerplate's `FR-002: Modular Architecture` and `User Story 2: Add a New Feature`, ensuring scalability and maintainability.

#### System Overview (Calculator)
The "yellow calculator app" will function as a client-side web calculator, allowing users to perform basic arithmetic operations. It will be a distinct feature accessible via its own route within the main application shell provided by the boilerplate, leveraging the existing responsive layout and Clarity Design System for its UI.

#### Architecture Pattern
The calculator will implement a **Lazy-Loaded Feature Module** pattern. This means:
- A dedicated `CalculatorModule` will encapsulate all calculator-specific components, routing, and potential services.
- This module will be loaded asynchronously when its route is activated, optimizing initial application load times (NFR-001).
- It will be self-contained, importing `SharedModule` for common UI elements if needed, but avoiding direct dependencies on `CoreModule` services unless absolutely necessary (adhering to `Business Rules` from `analysis_document.md`).

#### Component Design (Calculator)
- **`CalculatorModule`**: The root module for the calculator feature, configured for lazy loading. It will declare and export its components and define its feature-specific routes.
- **`CalculatorComponent`**: The main container component for the calculator. It will manage the overall state and logic of the calculator (e.g., current input, result, operations queue). It will host the display and keypad components.
- **`CalculatorDisplayComponent`**: A presentational component responsible for displaying the current input, results, and potentially operation history. It will receive data from the `CalculatorComponent`.
- **`CalculatorKeypadComponent`**: A container component that arranges all the calculator buttons (numbers, operators, clear, equals). It will emit events when buttons are pressed, which the `CalculatorComponent` will listen to.
- **`CalculatorButtonComponent`**: A reusable presentational component for individual calculator buttons. It will display the button's value/symbol and emit click events.

#### Data Architecture (Calculator)
- **Client-Side State Management**: The calculator's state (e.g., current value, previous value, selected operator, display output) will be managed entirely on the client side within the `CalculatorComponent` or a dedicated service provided within the `CalculatorModule`. This state will be transient and not persisted.
- **No Database Interaction**: As a purely client-side calculator, no database integration is required.

#### API Design (Calculator)
- **No API Interaction**: The "yellow calculator app" will not require any backend API interaction. All computational logic will reside within the frontend application.

#### Security Architecture (Calculator)
- The calculator feature will inherit the security posture of the base Angular Clarity Boilerplate. As it's a client-side application with no data persistence or API calls, no specific additional security measures are required beyond standard web application best practices (e.g., input validation if complex parsing were involved, which is not the case for a basic calculator).

#### Scalability Considerations (Calculator)
- **Modular Isolation**: Encapsulating the calculator logic within its own feature module ensures that it can be developed, tested, and maintained independently without affecting other parts of the application. This contributes to the overall scalability and maintainability of the boilerplate as per `NFR-003` and `NFR-004`.
- **Component Reusability**: Designing distinct `CalculatorButtonComponent` and `CalculatorDisplayComponent` promotes reusability and simplifies future modifications.
- **Performance**: Lazy loading the `CalculatorModule` (FR-002, NFR-001) ensures that its code is only loaded when needed, maintaining optimal application performance.

### Calculator Feature Specific Technologies
Generated: 2025-10-04T11:32:58.476921

The "yellow calculator app" will primarily leverage the existing technology stack of the Angular Clarity Boilerplate, with specific attention to styling for the "yellow" theme.

#### Frontend Technologies
-   **Framework:** Angular (as per base project, `analysis_document.md`)
-   **Styling:** SCSS, utilizing and extending the VMware Clarity Design System (FR-003, `requirements_document.md`). Custom SCSS variables will be used to achieve the "yellow" aesthetic, overriding Clarity defaults or applying specific color values to calculator components.
-   **State Management:** Local component state within `CalculatorComponent` and potentially a simple Angular service for arithmetic logic (if complex enough to warrant separation), leveraging RxJS for observable patterns if necessary.

#### Backend Technologies
-   **N/A**: The calculator is designed as a purely client-side application and does not require a backend.

#### Database Technologies
-   **N/A**: No persistent data storage is required for this client-side calculator.

#### Infrastructure
-   **N/A**: The calculator feature will be deployed as part of the existing Angular application's build and hosting infrastructure.

#### Development Tools
-   **Version Control:** Git (as per base project)
-   **Testing:** Angular testing utilities (Karma/Jasmine, Protractor/Cypress) will be used for unit and integration testing of the calculator components and logic.
-   **CI/CD:** The calculator feature will integrate into the existing CI/CD pipeline for the Angular boilerplate.

## Base Agent Prompt Reference

This agent is based on the standard io8architect agent with project-specific customizations above.
Refer to the base io8architect agent prompt for general principles and workflow instructions.
