# io8 Code Master Agent - Customized for This Project

## Project-Specific Instructions

```
filename: .sureai/.io8codermaster_agent_yellow_calculator_app_yellow_calculator_app_20251004_113258.md
```
# io8codermaster Agent Instructions: Yellow Calculator App

## Project Context
The goal is to develop a "yellow calculator app" building upon a cloned base project, likely an Angular Clarity boilerplate. The project will involve implementing core calculator functionalities, applying a distinct "yellow" visual theme, and ensuring proper deployment. The existing directory structure implies a full-stack approach with dedicated `frontend/` and `backend/` directories, and Docker-based deployment.

## io8codermaster Analysis Instructions (Project-Specific)
As io8codermaster, guide the downstream agents to:
1.  **Functional Analysis:**
    *   Detail all required arithmetic operations (e.g., addition, subtraction, multiplication, division, clear, equals).
    *   Specify any advanced functions (e.g., percentage, square root, memory functions) if implicitly or explicitly requested.
    *   Define input handling (numeric, decimal, operator) and display logic.
    *   Outline error handling for invalid operations (e.g., division by zero).
2.  **Non-Functional Analysis (UI/UX & Performance):**
    *   Clearly define the "yellow" theme: specific shades, accent colors, contrast, and overall aesthetic for buttons, display, and background.
    *   Specify responsiveness requirements for various screen sizes (mobile, tablet, desktop).
    *   Address accessibility considerations for color contrast and keyboard navigation.
    *   Evaluate performance for rapid calculations and UI fluidity.
3.  **Technical Integration Analysis:**
    *   Determine how the calculator application will integrate with or extend the existing `cloned base project/` (Angular Clarity boilerplate). Will it be a new module, a separate app within `frontend/`, or a combination?
    *   Assess the need for a `backend/` component for calculator logic. For an MVP, client-side logic is sufficient, but consider future expansion (e.g., calculation history, user profiles).
    *   Evaluate the appropriate use of Clarity UI components versus custom components for the calculator interface.

## Breakdown Methodology for "Yellow Calculator App"
The breakdown will follow an iterative, feature-driven approach:
1.  **Core Calculator Logic:** Isolate and develop the fundamental mathematical operations and state management.
2.  **User Interface (UI) Development:** Focus on creating the visual elements (buttons, display) and layout.
3.  **"Yellow" Theming:** Implement the specified yellow color scheme across the entire UI, ensuring consistency and visual appeal.
4.  **Responsiveness & Accessibility:** Adapt the UI to various screen sizes and ensure basic accessibility standards are met.
5.  **Error Handling:** Implement robust mechanisms to prevent and handle invalid user inputs or operations.
6.  **Integration & Deployment:** Package the application for deployment using Docker and integrate with the overall project structure.

## Planning Approach Tailored to Project Requirements
The planning will be agile, with an emphasis on rapid prototyping and iterative refinement:
1.  **MVP Definition:** Prioritize core arithmetic functions and a basic "yellow" UI for the initial deliverable.
2.  **Modular Development:** Encourage the creation of distinct Angular components for calculator buttons, display, and logic, facilitating independent development and testing.
3.  **Theming Strategy:** Plan for a clear SCSS/CSS variable strategy to manage the "yellow" theme, allowing for easy adjustments.
4.  **Phased Deployment:** Plan for a local Docker Compose setup first, then potentially staging/production.
5.  **Documentation Focus:** Ensure `analysis_document.md`, `requirements_document.md`, `architecture_document.md`, and `project_plan.md` are continuously updated with project specifics.

## Specific Analysis Questions and Considerations
*   What are the exact hexadecimal color codes or design system guidelines for the "yellow" theme?
*   Should the calculator support keyboard input for numbers and operations?
*   Are there any specific fonts or iconography requirements for the buttons or display?
*   How will the app handle large numbers or floating-point precision issues?
*   What is the target browser and device compatibility matrix?
*   Is there a need for a calculation history, and if so, where should it be stored (local storage, backend database)?

## Customized io8codermaster Workflow for "Yellow Calculator App"
1.  **io8analyst (Focus: Functional & Visual Requirements):**
    *   *Task:* Define precise functional requirements for calculator operations.
    *   *Task:* Define detailed "yellow" theme guidelines (colors, contrast, overall look).
    *   *Output:* Updated `requirements_document.md` and `analysis_document.md` with calculator-specific details.
2.  **io8architect (Focus: Frontend Structure & Theming Strategy):**
    *   *Task:* Design the Angular component hierarchy for the calculator.
    *   *Task:* Propose the SCSS structure and variable usage for the "yellow" theme.
    *   *Task:* Determine if a backend is truly necessary for the initial scope.
    *   *Output:* Updated `architecture_document.md` and `tech_stack_document.md` outlining frontend design.
3.  **io8pm (Focus: Project Plan & Milestones):**
    *   *Task:* Create a detailed project plan with milestones for UI, logic, theming, and deployment.
    *   *Task:* Prioritize features for MVP (core functions, basic yellow UI).
    *   *Output:* Updated `prd_document.md` and `project_plan.md`.
4.  **io8sm (Focus: Task Breakdown & Sprint Planning):**
    *   *Task:* Break down UI and logic development into actionable sprint tasks.
    *   *Output:* Updated `tasks_list.md` and `sprint_plan.md`.
5.  **io8developer (Focus: Implementation):**
    *   *Task:* Develop Angular components for calculator UI and logic.
    *   *Task:* Implement "yellow" theming using SCSS, adhering to design guidelines.
    *   *Task:* Ensure responsiveness and basic accessibility.
    *   *Task:* Unit and integration testing.
6.  **io8devops (Focus: Deployment):**
    *   *Task:* Configure `Dockerfile.frontend` for the calculator app.
    *   *Task:* Update `docker-compose.yml` and `nginx.conf` for local deployment.
    *   *Output:* Ready-to-deploy containerized application.
```
```json
{
  "breakdown": "\n## Project Breakdown: Yellow Calculator App - 2025-10-04 11:32:58\n\n### Project Goal\nTo develop a fully functional \"yellow calculator app\" leveraging the cloned Angular Clarity boilerplate project. The app will provide core arithmetic operations with a distinctive yellow-themed user interface, packaged for containerized deployment.\n\n### Key Features & Requirements\n*   **Core Functionality:**\n    *   Addition, Subtraction, Multiplication, Division.\n    *   Clear (C) and Equals (=) operations.\n    *   Numeric input (0-9) and decimal point.\n    *   Display for input and results.\n*   **User Interface (UI) & User Experience (UX):**\n    *   Predominantly \"yellow\" color scheme for all interactive elements (buttons, display background) and overall app theme.\n    *   Responsive design: The layout must adapt gracefully to different screen sizes (mobile, tablet, desktop).\n    *   Intuitive button layout and clear readability of numbers and operators.\n    *   Visual feedback for button presses.\n*   **Error Handling:**\n    *   Graceful handling of division by zero.\n    *   Prevention or notification of invalid input sequences (e.g., multiple operators without numbers).\n*   **Technical Stack (Leveraging Base Project & Io8 Structure):**\n    *   **Frontend:** Angular (building upon the existing Clarity boilerplate), SCSS for styling.\n    *   **Backend:** Initially, operations will be client-side. A backend might be considered for future extensions (e.g., scientific functions, history persistence).\n    *   **Deployment:** Docker for containerization, Docker Compose for orchestration, Nginx for serving the frontend (as indicated by the expanded directory structure).\n\n### Project Milestones\n1.  **Phase 1: Analysis & Architectural Design (io8analyst, io8architect)**\n    *   **M1.1:** Detailed functional and non-functional requirements documentation (including specific yellow branding guidelines).\n    *   **M1.2:** Comprehensive architectural design for frontend components, state management, and styling strategy.\n    *   **M1.3:** Confirmation of backend scope for MVP (likely purely frontend).\n\n2.  **Phase 2: Core Frontend Development (io8developer)**\n    *   **M2.1:** Setup of dedicated `frontend/` environment or integration within `cloned base project/src/app`.\n    *   **M2.2:** Implementation of calculator UI components (buttons, display) with initial "yellow" theming.\n    *   **M2.3:** Development and unit testing of core arithmetic logic.\n    *   **M2.4:** Basic responsiveness implemented.\n\n3.  **Phase 3: Refinement & Advanced Features (io8developer)**\n    *   **M3.1:** Full application of the "yellow" theme, ensuring consistency and visual appeal.\n    *   **M3.2:** Enhanced responsiveness across target devices.\n    *   **M3.3:** Robust error handling implementation.\n    *   **M3.4:** User experience refinements.\n\n4.  **Phase 4: Deployment & Finalization (io8devops)**\n    *   **M4.1:** Configuration of `Dockerfile.frontend` and `nginx.conf`.\n    *   **M4.2:** Setup and testing of local deployment via `docker-compose.yml`.\n    *   **M4.3:** Comprehensive end-to-end testing and bug fixing.\n    *   **M4.4:** Project documentation updated.\n\n### Constraints & Assumptions\n*   **Base Project Adherence:** Modifications must integrate cleanly with or extend the provided Angular Clarity boilerplate.\n*   **Documentation:** All agent outputs must adhere to the `.sureai/` append-only principle and existing file structures.\n*   **Yellow Theme:** The color scheme is a primary, non-negotiable visual requirement.\n*   **Timeline:** Agile, iterative development with a focus on delivering a functional MVP quickly.\n*   **No Overwriting:** Existing content in predefined documents within `.sureai/` will not be overwritten, only appended.",
  "plan": "\n## Implementation Plan: Yellow Calculator App - 2025-10-04 11:32:58\n\n### Project Phases & Estimated Timeline\n\n**Phase 1: Discovery & Design (Weeks 1-2)**\n*   **io8analyst:**\n    *   **Task:** Conduct detailed requirements gathering for all calculator functionalities (basic, any advanced), including edge cases.\n    *   **Task:** Define the precise "yellow" branding guidelines (color codes, contrast, font considerations for display/buttons).\n    *   **Output:** `requirements_document.md`, `analysis_document.md` (updated with calculator specifics).\n*   **io8architect:**\n    *   **Task:** Design the Angular component architecture for the calculator UI and logic (e.g., `CalculatorComponent`, `ButtonComponent`, `DisplayComponent`).\n    *   **Task:** Propose SCSS structure for managing the "yellow" theme, integrating with Clarity's theming capabilities or overriding where necessary.\n    *   **Task:** Confirm the technical stack for frontend (Angular) and determine if a `backend/` is needed for MVP (likely not for basic operations).\n    *   **Output:** `architecture_document.md`, `tech_stack_document.md` (updated with calculator design).\n*   **io8pm:**\n    *   **Task:** Review requirements and architectural designs, create high-level project plan and PRD.\n    *   **Output:** `prd_document.md`, `project_plan.md` (updated with calculator project scope).\n\n**Phase 2: Core Development & Theming (Weeks 3-5)**\n*   **io8sm:**\n    *   **Task:** Break down architectural design into actionable tasks, create initial backlog, and plan Sprint 1 (Focus: Basic UI & Logic).\n    *   **Output:** `tasks_list.md`, `sprint_plan.md`.\n*   **io8developer:**\n    *   **Task:** Set up a new Angular module/component structure within `frontend/` or `cloned base project/src/app` for the calculator.\n    *   **Task:** Implement the core calculator UI (buttons, display) using Angular components.\n    *   **Task:** Develop the client-side calculator logic (add, subtract, multiply, divide, clear, equals).\n    *   **Task:** Apply the initial "yellow" theme to buttons and display, ensuring visual consistency.\n    *   **Task:** Implement basic error handling (e.g., division by zero).\n    *   **Task:** Conduct unit tests for calculator logic and UI components.\n*   **io8codermaster:** Oversee code quality, adherence to design, and consistent application of the "yellow" theme.\n\n**Phase 3: Refinement & Deployment Preparation (Week 6)**\n*   **io8sm:**\n    *   **Task:** Plan Sprint 2 (Focus: Responsiveness, Advanced Theming, Deployment).\n    *   **Output:** `sprint_plan.md` (updated).\n*   **io8developer:**\n    *   **Task:** Enhance responsiveness of the calculator UI across various screen sizes (using Flexbox/Grid).\n    *   **Task:** Refine "yellow" theming, ensuring accessibility and cross-browser consistency.\n    *   **Task:** Implement any additional UI/UX features (e.g., keyboard support).\n    *   **Task:** Conduct integration testing.\n*   **io8devops:**\n    *   **Task:** Create/update `Dockerfile.frontend` for the Angular calculator application.\n    *   **Task:** Integrate the frontend service into `docker-compose.yml`.\n    *   **Task:** Configure `nginx.conf` for serving the frontend application.\n    *   **Output:** Containerization setup for the calculator app.\n\n**Phase 4: Testing & Finalization (Week 7)**\n*   **io8developer:**\n    *   **Task:** Perform comprehensive end-to-end testing.\n    *   **Task:** Address all identified bugs and UI glitches.\n*   **io8devops:**\n    *   **Task:** Test local deployment using Docker Compose.\n    *   **Task:** Document deployment steps.\n*   **io8codermaster:** Final review of the application against all requirements, ensuring the "yellow calculator app" is complete and deployed.\n\n### Resources\n*   **Personnel:** io8analyst, io8architect, io8pm, io8sm, io8developer, io8devops agents.\n*   **Tools:** Angular CLI, Clarity UI framework, SCSS compiler, Node.js, VSCode, Git, Docker, Docker Compose.\n*   **Documentation:** All `.sureai/` documents, including `analysis_document.md`, `requirements_document.md`, `architecture_document.md`, `project_plan.md`.\n\n### Dependencies\n*   Completion of `io8project_builder` and `io8directory_structure` agents.\n*   Clear definition of "yellow" color palette and design guidelines.\n*   Approved architectural design for frontend components.\n\n### Key Actions for io8codermaster\n*   Ensure strict adherence to the defined \"yellow\" theme and UI/UX specifications.\n*   Validate the technical implementation, especially Angular best practices and state management for the calculator logic.\n*   Facilitate clear communication and handovers between development (io8developer) and operations (io8devops) for containerization and deployment.\n*   Monitor progress against milestones and address any blockers promptly.\n*   Confirm that all documentation within `.sureai/` is updated and accurate as the project progresses."
}
```

## Base Agent Prompt Reference

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