> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scriptonia.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Dev

> FrontendDev produces frontend specs, components, pages, and LLM prompts for UI code.

## Purpose and Responsibilities

* Generate **frontend** specs (e.g. `react_nextjs.md`, `components.md`, `pages.md`, `state_management.md`), **Kotlin/Swift** UI specs for mobile, and **prompts** (e.g. `generate_frontend.txt`, `generate_ios.txt`, `generate_android.txt`).
* Align with **ProductManager** (requirements) and **BackendDev** (API contracts).
* Coordinate with **ToolManager** for tooling and export.

***

## Input/Output

### Input (from `generateFileContentWithAgent`)

* `file`, `requirements`, `config`, `filePath`, `workflowContext`, `existingDeliverables` — Same pattern as Product Manager.

### Output

* **Markdown** or **prompt** (`file.type`) string. For prompts, the content is used later to generate code; for markdown, it describes structure, components, and implementation notes.

***

## Prompt Engineering

* **Agent system:**\
  `"You are a Frontend Developer agent. You create UI components, pages, and frontend code. Coordinate with ProductManager for requirements and BackendDev for API contracts."`
* **Full prompt** in `generateFileContentWithAgent`:`workflow context,`requirements`, `file`/`filePath`, `config.techStack`, `relatedFiles\`, and instructions for unique, path-specific content.
* **Model:** `callOpenRouter(..., 'GROK', { temperature: 0.8 })`.

***

## File Assignment

`getAgentForFile` assigns to **FrontendDev** when the path contains:

* `frontend`, `components`, or `pages`

***

## Examples

* **frontend/react\_nextjs.md**, **frontend/components.md**, **frontend/state\_management.md** (Web App)
* **frontend/nextjs.md**, **frontend/pages.md**, **frontend/components.md** (Website)
* **frontend/prompts/generate\_frontend.txt**, **frontend/prompts/generate\_static\_site.txt**
* **android/kotlin\_ui.md**, **android/fragments.md**, **android/navigation.md**, **android/prompts/generate\_android.txt**
* **ios/swiftui.md**, **ios/storyboards.md**, **ios/navigation.md**, **ios/permissions.md**, **ios/prompts/generate\_ios.txt**

***

## Customization Options

* **Agent system:** Edit the FrontendDev entry in `agentSystemPrompts` in `lib/platform-templates.ts`.
* **Assignment:** Extend `getAgentForFile` (e.g. `themes`, `styles`) to FrontendDev.
* **Platforms:** Add new `frontend/` or `ios/`/`android/` files in the platform `folderStructure` and ensure they match `getAgentForFile` rules.

***

Below is the **same content**, **same wording**, **no additions, no deletions, no rephrasing**, formatted cleanly for **Notion**.\
You can paste this directly into a Notion page.

***

# Frontend Dev

**FrontendDev** produces frontend specs, components, pages, and LLM prompts for UI code.

***

## Purpose and Responsibilities

* Generate **frontend** specs (e.g. `react_nextjs.md`, `components.md`, `pages.md`, `state_management.md`), **Kotlin/Swift** UI specs for mobile, and **prompts** (e.g. `generate_frontend.txt`, `generate_ios.txt`, `generate_android.txt`).
* Align with **ProductManager** (requirements) and **BackendDev** (API contracts).
* Coordinate with **ToolManager** for tooling and export.

***

## Input/Output

### Input (from `generateFileContentWithAgent`)

* `file`, `requirements`, `config`, `filePath`, `workflowContext`, `existingDeliverables` — Same pattern as Product Manager.

### Output

* **Markdown** or **prompt** (`file.type`) string. For prompts, the content is used later to generate code; for markdown, it describes structure, components, and implementation notes.

***

## Prompt Engineering

* **Agent system:**\
  `"You are a Frontend Developer agent. You create UI components, pages, and frontend code. Coordinate with ProductManager for requirements and BackendDev for API contracts."`
* **Full prompt** in `generateFileContentWithAgent`:`workflow context,`requirements`, `file`/`filePath`, `config.techStack`, `relatedFiles\`, and instructions for unique, path-specific content.
* **Model:** `callOpenRouter(..., 'GROK', { temperature: 0.8 })`.

***

## File Assignment

`getAgentForFile` assigns to **FrontendDev** when the path contains:

* `frontend`, `components`, or `pages`

***

## Examples

* **frontend/react\_nextjs.md**, **frontend/components.md**, **frontend/state\_management.md** (Web App)
* **frontend/nextjs.md**, **frontend/pages.md**, **frontend/components.md** (Website)
* **frontend/prompts/generate\_frontend.txt**, **frontend/prompts/generate\_static\_site.txt**
* **android/kotlin\_ui.md**, **android/fragments.md**, **android/navigation.md**, **android/prompts/generate\_android.txt**
* **ios/swiftui.md**, **ios/storyboards.md**, **ios/navigation.md**, **ios/permissions.md**, **ios/prompts/generate\_ios.txt**

***

## Customization Options

* **Agent system:** Edit the FrontendDev entry in `agentSystemPrompts` in `lib/platform-templates.ts`.
* **Assignment:** Extend `getAgentForFile` (e.g. `themes`, `styles`) to FrontendDev.
* **Platforms:** Add new `frontend/` or `ios/`/`android/` files in the platform `folderStructure` and ensure they match `getAgentForFile` rules.

***