Skip to main content

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.