Skip to content

🖥️ Frontend Developer Agent Specification

🎯 Purpose

The Frontend Developer Agent is responsible for autonomously implementing the presentation layer of generated applications — transforming design specifications, UX flows, and service contracts into complete, deployable, and traceable frontend interfaces.

It acts as the entry-point visual engineer, producing modular, accessible, and observable user interfaces (UIs) that are tightly integrated with backend APIs, aligned to design systems, and trace-tagged for observability.

This agent enables ConnectSoft’s vision of full-stack, AI-driven SaaS creation by delivering the human-facing layer of every application, from portals and dashboards to embedded widgets and multi-tenant SPAs.

🧭 Position in the Platform Execution Flow

The Frontend Developer Agent operates within the Software Engineering Execution Layer, collaborating with design, backend, and orchestration agents.

flowchart LR
    Vision[🧭 Vision & UX Agents]
    Design[🎨 UI/UX Designer Agent]
    API[📡 API Contract Generator]
    AppArch[🏗️ Application Architect Agent]
    Orchestrator[⚙️ Orchestration Layer]
    Frontend[🖥️ Frontend Developer Agent]
    Backend[🧱 Backend Developer Agent]
    Commit[📥 Code Committer Agent]
    QA[🔍 QA/Test Generator Agent]

    Vision --> Design
    Design --> Frontend
    API --> Frontend
    AppArch --> Frontend
    Orchestrator --> Frontend
    Frontend --> Commit
    Frontend --> QA
    Backend --> Commit
Hold "Alt" / "Option" to enable pan & zoom

🧩 Deployment Context

The agent generates user interfaces for:

  • 🌐 Customer Portals
  • 🖥️ Admin Dashboards
  • 📱 Mobile-Friendly SPAs
  • ⚙️ Embedded Widgets (e.g., onboarding flows, config panels)
  • 🧩 Edition-Specific UIs (B2B, B2C, internal tools)

Each output is fully integrated with:

  • API bindings (gRPC/REST)
  • Auth mechanisms (OpenID Connect, cookie/token flows)
  • Feature flags and edition gates
  • UI observability tags (OpenTelemetry spans)
  • Internationalization and accessibility scaffolds

📦 Supported UI Frameworks (Phase 1)

Stack Use Case
Blazor (WASM + Server) Admin panels, SaaS portals (default .NET frontend)
Angular SPAs, dashboards, enterprise apps
Tailwind + HTML + JS Static sites, custom UI, embedded forms
React (planned) External SDKs, integrations, widget-based flows

All are generated in a Clean Architecture-aligned layout, separating:

  • Presentation Layer (UI)
  • Application Port Interfaces
  • Domain Events
  • API Client Gateways

🔐 Scope Boundaries

The agent does not:

  • Define visual layout strategy (done by UI Designer Agent)
  • Design UX flows (UX Designer Agent)
  • Implement backend logic (Backend Developer Agent)
  • Manage deployment (handled by DevOps agents)

It focuses purely on rendering, binding, validating, and packaging the frontend delivery artifacts.

🧠 Summary

Role Detail
🎯 Goal Convert frontend blueprints into live, integrated UIs
🧱 Input Sources UI specs, API contracts, orchestrator triggers
🧪 Downstream Outputs Pages, components, services, tests, telemetry
🤝 Key Collaborators UI/UX Designer, Application Architect, Backend Developer, Committer Agent
📦 Result A testable, deployable, observable frontend app per environment and edition

🎯 Responsibilities

The Frontend Developer Agent is responsible for translating visual and behavioral specifications into complete frontend applications. It implements UI logic, binds views to API gateways, and ensures outputs are compliant with design, architectural, and observability standards.

The agent is expected to:

  • 📄 Render reusable components and full page templates
  • 🔌 Bind service calls and state to UI elements
  • 🔐 Enforce access control, token handling, and feature toggles
  • 🧪 Generate testable, observable, localized outputs
  • 📦 Package outputs into versioned, commit-ready frontend deliverables

🧱 Core Responsibilities

Category Description
🖥️ UI Component Generation Produces functional, accessible, and reusable components (e.g., inputs, tables, modals, cards) from ui-spec.yaml, layout-config.md, or design JSON.
📄 Page & View Assembly Composes pages from UI fragments using pre-defined shell layouts (navigation, sidebar, content slots, etc.).
🔌 API Client Integration Binds auto-generated API clients (OpenAPI or gRPC) to view logic and user interaction flows.
🔐 Authentication Integration Injects access control, route guards, token refresh handling, and role-based rendering.
🌍 Routing & Navigation Generates structured route maps, lazy-loaded view modules, and authenticated route wrappers.
🧪 Frontend Testing Artifacts Emits unit and E2E test stubs (e.g., Playwright, Cypress, MSTest for Blazor) with coverage targets.
🧾 State Management Implements app-scoped state layers (Blazor: cascading values, Angular: service-based state, etc.) for input forms, auth flows, and shared config.
🌐 Theming & CSS Tokens Applies consistent visual identity via Tailwind classes, design tokens, or scoped CSS modules.
🧩 Plugin/Extension Injection Supports pluggable widgets/components for edition-specific customization (multi-tenant aware).
📡 Telemetry Hook Injection Emits OpenTelemetry spans for ui.rendered, click.submit, form.error, and custom spans tied to user flows.

🔄 Temporal Responsibilities by Phase

Phase Responsibility
🟢 Project Bootstrap Create app.module.ts, Program.cs, main layout, router, and core folder structure.
✏️ Component Rendering Translate layout and widget specs into .razor, .ts, .vue, or .html components.
📡 Service Binding Use API client stubs to bind form actions, list refresh, search, etc.
🔐 Access Control Injection Insert auth guards and AuthorizedView wrappers based on roles and editions.
🧪 Pre-QA Output Emit tests, run validation hooks, and commit to Git via Code Committer Agent.

🧠 Secondary Responsibilities

  • 🔁 Generate multi-edition variants of views (e.g., BillingView_EU, BillingView_B2C)
  • 📃 Create trace-labeled metadata files for every page/component (component.metadata.json)
  • 🔧 Support framework switching or fallback rendering based on orchestrator config
  • 📘 Reference component usage in frontend-architecture.md and inject into frontend manifest

📦 Example Output Responsibility

/frontend/
  ├── pages/
  │   └── DashboardPage.razor
  ├── components/
  │   └── ChartCard.razor
  ├── api/
  │   └── dashboardService.ts
  ├── layout/
  │   └── MainShell.razor
  ├── styles/
  │   └── tokens.module.css
  ├── telemetry/
  │   └── traceEvents.ts
  └── __tests__/
      └── DashboardPage.test.ts

✅ Summary

Responsibility Area Deliverables
UI Layer Pages, Components, Layouts
Integration Layer API-bound logic, state handlers
Auth Layer Token, user session, route guards
Telemetry Layer OTEL spans + UI trace
Output Layer Structured folders, Git commits, testable code

The Frontend Developer Agent ensures that every user-facing part of the ConnectSoft platform is declarative, testable, secure, and production-ready.

📥 Inputs

The Frontend Developer Agent consumes a structured set of traceable inputs that guide:

  • What to render
  • Which design system to follow
  • How to bind frontend elements to backend services
  • Which framework, layout structure, and access rules to apply

Inputs are gathered from the UI Designer Agent, UX Designer Agent, Application Architect, and the Orchestration Layer.

📋 Required Input Files & Artifacts

Input Provided By Description
ui-spec.yaml UI Designer Agent Declarative structure of UI widgets, component types, input/output bindings
layout-definition.md UI Designer Agent Describes layout slots, shell types, header/footer/sidebar strategy
user-flows.json UX Designer Agent End-to-end paths that users take across pages, tied to component responsibilities
frontend-framework.yaml Application Architect Agent Declares the framework to use (Blazor, Angular, etc.) and edition-specific UI requirements
api-client-lib.ts/.csproj API Generator Agent Auto-generated SDKs or client wrappers for backend endpoints
component-bindings.yaml Orchestration Layer Maps frontend widgets to service calls and data contracts (e.g., Dashboard → /api/summary)
feature-flags.json Platform Orchestrator Toggles for edition/tenant-based UI rendering
auth-context.json Security Architect Agent Roles, route guards, user info binding, token handling strategy
i18n-strings.json UI Designer Agent (optional) Key-value pairs for text rendering and language toggling
tracing-context.yaml Observability Agent Span templates and tracing event bindings (e.g., on click, render, error)

🧪 Optional Inputs

Input Use Case
test-matrix.yaml Required if automated frontend test scaffolding is needed
custom-theme.tokens.json Optional override for Tailwind or design tokens
ui-injection-config.yaml Inject or override widget behavior at runtime (tenant portals, dynamic flows)
fallback-routes.yaml Used for feature toggling or progressive rendering

🧠 Semantic Kernel Context Injection

The agent also receives runtime context via planner or coordinator call:

{
  "trace_id": "trace-ui-789",
  "execution_id": "exec-ui-789",
  "component": "Dashboard",
  "framework": "blazor",
  "render_mode": "webassembly",
  "auth_guard": "user, admin",
  "edition": "b2b",
  "language": "en"
}

This context is merged into prompt execution and guides skill resolution.

📎 Traceability Tags Applied to Inputs

All inputs must include or be mapped to:

  • trace_id
  • blueprint_id
  • execution_id
  • agent_origin: frontend-developer-agent

This ensures every rendered component and generated file is trace-bound and reproducible.

📦 Example Input Folder

/inputs/frontend/
  ├── ui-spec.yaml
  ├── layout-definition.md
  ├── component-bindings.yaml
  ├── api-client-lib.ts
  ├── frontend-framework.yaml
  ├── i18n-strings.json
  └── tracing-context.yaml

✅ Summary

The Frontend Developer Agent consumes:

  • 🧩 UI structure, layout, and component specs
  • 🔌 Typed API bindings and service maps
  • 🔐 Auth, role, and edition overlays
  • 🧪 Testing and observability trace templates
  • 🧠 Semantic Kernel context for reasoning scope

These inputs enable it to generate coherent, valid, traceable frontend codebases across any framework and edition.

📤 Outputs

The Frontend Developer Agent produces a complete, testable, and trace-labeled frontend application or modular UI package. These outputs are structured, compliant with Clean Architecture, and ready to be committed by the Code Committer Agent and validated by testing agents.

Outputs include code, metadata, telemetry hooks, and test coverage for:

  • Pages
  • UI Components
  • Layouts
  • State and services
  • Auth and routing
  • Localization and accessibility
  • Tests and tracing

📁 Output Structure (Folder-Oriented)

/frontend/
  ├── components/
  │   ├── Button.razor
  │   ├── Alert.vue
  ├── pages/
  │   ├── Dashboard.razor
  │   └── Login.razor
  ├── layout/
  │   └── ShellLayout.razor
  ├── api/
  │   └── dashboardService.ts
  ├── services/
  │   └── authService.ts
  ├── state/
  │   └── userStore.ts
  ├── telemetry/
  │   └── traceEvents.ts
  ├── i18n/
  │   └── en.json
  ├── __tests__/
  │   └── Dashboard.test.ts
  ├── styles/
  │   └── theme.tokens.css
  └── metadata/
      └── DashboardPage.metadata.json

📦 Output Artifacts

Category Description
🧩 UI Components Reusable widgets such as buttons, modals, cards, tabs
📄 Pages Full views rendered in response to navigation events or layout slots
🧱 Layouts Shells, sidebars, responsive grids
🔌 API Integration Bound service wrappers and calls to backend-generated API clients
🧠 State Management Local/shared state store modules or Blazor cascading state
🔐 Access Guards Authenticated/unauthenticated routes, role restrictions
🌍 Routing Module Lazy-loaded route map, dynamic layout loading, fallback handling
🧪 Tests Component tests (Jest/MSTest), E2E specs (Cypress/Playwright)
📡 Telemetry Hooks Span emission on load, click, form submission, failure
📘 Metadata JSON documents describing rendered outputs, file-level trace IDs, and schema references
🌐 Localization Default en.json and optionally others if i18n-strings.json is present

🔗 GitOps-Compatible Commit

All outputs are Git-staged, trace-labeled, and ready for commit by the Code Committer Agent, using:

trace_id: trace-ui-789
execution_id: exec-ui-789
component: Dashboard
framework: blazor
origin: frontend-developer-agent

This ensures traceability across all layers and supports observability pipelines.

📊 Telemetry Output Example

trace("ui.rendered", {
  component: "DashboardPage",
  trace_id: "trace-ui-789",
  region: "westeurope",
  user_role: "admin"
});

🧪 Test Output Example

describe('DashboardPage', () => {
  it('renders key metrics block', () => {
    render(<DashboardPage />);
    expect(screen.getByText(/Active Users/)).toBeVisible();
  });
});

📜 Metadata Output Example

{
  "component": "DashboardPage",
  "route": "/dashboard",
  "auth_required": true,
  "roles": ["user", "admin"],
  "trace_id": "trace-ui-789",
  "generated_by": "frontend-developer-agent"
}

✅ Summary

The Frontend Developer Agent produces:

  • ✅ Complete frontend applications in a structured, testable, and traceable format
  • 🧠 Componentized output aligned to Clean Architecture
  • 📡 Telemetry-aware views ready for observability ingestion
  • 🔐 Secure, edition-aware pages for multi-tenant deployments
  • 📦 Commit-ready assets with metadata and trace labels

These outputs serve as the visual surface layer of every SaaS solution produced by ConnectSoft.

📚 Knowledge Base

The Frontend Developer Agent is equipped with an evolving multi-framework knowledge base of:

  • UI framework conventions (e.g., Angular modules, Blazor routing, Tailwind spacing)
  • Design system tokens, layout patterns, and interaction primitives
  • State management and telemetry scaffolding
  • Accessibility, responsiveness, and localization best practices
  • Clean Architecture port/adapters alignment for frontend layers

This knowledge base enables the agent to autonomously translate abstract UI specs into idiomatic, traceable codebases.

🧠 Core Knowledge Categories

1️⃣ UI Framework Blueprints

Framework Includes
Blazor (.NET 8) Razor syntax, @code blocks, partials, route registration, cascading auth
Angular (v16+) Component, module, and service generation with route guards and lazy modules
Tailwind + HTML/JS Static layout rendering with semantic markup, minimal interactivity
(Planned) React JSX rendering, hooks, client router, context-based state

2️⃣ Component Grammar & Naming

  • PascalCase for component names (ChartCard, DashboardPage)
  • Flat folder hierarchy unless layout-dependent (layout/MainShell, pages/Profile)
  • Standard slots:
    • header, sidebar, content, footer

3️⃣ State Management Patterns

Framework Pattern
Blazor Cascading values, injected scoped services
Angular Service-based shared state with RxJS or signals
React (future) Context and reducer wrappers per module

4️⃣ Auth & Access Control Conventions

  • Route guards ([Authorize], canActivate)
  • Conditional rendering (AuthorizedView, ngIf role)
  • Token acquisition and refresh flow via injected AuthService
  • Claims-based feature toggle injection

5️⃣ Tailwind / Design System Mapping

Token Mapped Rule
padding-md p-4
text-body text-base leading-relaxed
btn-primary bg-blue-600 text-white rounded-lg hover:bg-blue-700
grid-2col grid grid-cols-2 gap-4

Supports:

  • Dark/light mode variants
  • Responsive breakpoints (sm:, md:, lg:)
  • Prefab layout macros (shell, card, dialog, drawer)

6️⃣ Interaction Patterns

Use Case Pattern
Form submission API-bound handler with spinner, toast, and error fallback
Dashboard tiles Componentized data widgets (ChartCard, MetricBlock)
Tabbed layout TabGroup with conditional rendering and hash routing
Page rendering OTEL span (ui.rendered) and user role context included

7️⃣ Localization, Accessibility, and Responsiveness

  • Follows WCAG 2.1 AA contrast and focus rules
  • Uses aria-* roles where required
  • Binds i18n-strings.json via framework-native methods:
    • @inject IStringLocalizer<> (Blazor)
    • ngx-translate (Angular)
  • Responsive-first rendering using Tailwind breakpoints or CSS media queries

8️⃣ Clean Architecture UI Mapping

flowchart TD
    UI[UI Layer: Blazor Page]
    Port[Application Port Interface]
    Service[API Client Wrapper]
    Domain[Domain Result DTO]

    UI --> Port
    Port --> Service
    Service --> Domain
Hold "Alt" / "Option" to enable pan & zoom

The agent separates view logic from interaction ports, using consistent patterns like:

  • IUserProfileServicePort
  • IBillingDashboardViewModel

🧩 Knowledge Base Location (Internal)

Type Path
Templates /blueprints/frontend/templates/
Tokens /design-system/tokens.json
Auth Strategies /security/frontend-access.yaml
Layouts /ui/layout-macros/*.html/.razor/.ts
Skill Snippets Semantic Kernel skills in frontend-skills package

✅ Summary

The Frontend Developer Agent leverages a rich, versioned knowledge base of:

  • 🧠 UI grammar, layout patterns, and state models
  • 🎨 Tailwind, design tokens, and accessibility scaffolds
  • 🔐 Auth guards and OpenID/OAuth2 flows
  • 🧩 Clean Architecture port/adapter mappings
  • 🧪 Test-aware, telemetry-rich UI rendering strategies

This allows the agent to consistently generate high-quality, idiomatic frontend applications across tech stacks.

🔄 Process Flow

The Frontend Developer Agent transforms structured design, API, and orchestration inputs into fully rendered, bound, and validated frontend applications.

Its process is deterministic, traceable, and aligned with Clean Architecture principles, proceeding through a sequence of input gathering → reasoning → rendering → validation → output emission.

🧭 Execution Flow Diagram

flowchart TD
    A[Receive Input Bundle]
    B[Load Design Spec & Layout]
    C[Resolve Framework & Edition Scope]
    D[Select Templates & Tokens]
    E[Render Components + Pages]
    F[Bind API Services & Auth Context]
    G[Inject Routing, Tracing, i18n]
    H[Generate Tests + Metadata]
    I[Run Lint/Validation Hooks]
    J[Emit Output Files + Commit Staging]

    A --> B --> C --> D --> E --> F --> G --> H --> I --> J
Hold "Alt" / "Option" to enable pan & zoom

🪜 Step-by-Step Flow Description

1️⃣ Input Resolution

  • Load:
    • ui-spec.yaml, layout-definition.md
    • api-client-lib.ts, component-bindings.yaml
    • frontend-framework.yaml, auth-context.json
  • Extract:
    • trace_id, execution_id, component, edition, language

2️⃣ Framework Selection & Strategy Loading

  • Choose rendering engine:
    • Blazor → Razor syntax + CascadingAuth + Program.cs injection
    • Angular → app.module.ts, services, route guards
    • HTML/JS → static views + Tailwind tokens
  • Load applicable:
    • Layout shell
    • CSS/tailwind tokens
    • Language files
    • Access guards

3️⃣ UI Component & Page Rendering

  • Render all reusable widgets first:
    • Buttons, cards, inputs, alerts
  • Compose application pages using layout slots
  • Generate semantic HTML structure, event bindings, accessibility roles

4️⃣ API + Auth Binding

  • Inject API service wrappers:
    • dashboardService.getSummary(), authService.login()
  • Wire form handlers to actions
  • Apply role guards, AuthorizedView, canActivate, or ngIf

5️⃣ Routing, Theming, Telemetry Injection

  • Build route tree
  • Add span injection for:
    • ui.rendered, click.button, submit.form, auth.failed
  • Apply:
    • Design tokens
    • Responsive classes
    • i18n bindings from i18n-strings.json

6️⃣ Test and Metadata Generation

  • Generate:
    • Component unit tests (Jest, MSTest)
    • E2E test scaffolds (Cypress, Playwright)
  • Produce metadata:
    • DashboardPage.metadata.json
    • component-manifest.json (for Orchestrator)

7️⃣ Validation & Lint Phase

  • Run:
    • Syntax and accessibility lints
    • Binding completeness checks
    • Auth and API reference resolution

8️⃣ Emit Output Files

  • Write structured outputs under /frontend/{component}/
  • Attach trace metadata
  • Stage for commit:
    • Code Committer Agent triggers PR creation
    • Testing Agents optionally activated

🧠 Execution Flags (Orchestration-Aware)

Flag Effect
render_mode: static Skip dynamic binding, use static HTML
framework: blazor Use Razor components and .csproj scaffolding
auth_required: true Inject guards and role wrappers
edition: multi-tenant Generate per-edition variants using feature flags

🔁 Execution is Re-Entrant and Trace-Safe

  • Uses trace_id and execution_id in all generated files and logs
  • Can be restarted with no side effects
  • Partial generation supported (per page/component)

✅ Summary

The Frontend Developer Agent’s process flow ensures:

  • 🎨 Designs are accurately rendered using idiomatic syntax
  • 🔐 Security and access rules are respected
  • 🧩 Outputs are testable, observable, and edition-aware
  • 🧠 Clean Architecture alignment is preserved
  • 🧾 All artifacts are fully traceable and Git-committable

This makes the frontend delivery process reproducible, automated, and production-ready across frameworks.

🎯 Skills and Kernel Functions

The Frontend Developer Agent leverages a collection of Semantic Kernel skills to modularize its behavior into predictable, reusable, prompt-bound functions. These skills allow the agent to:

  • Reason about UI structure and layout
  • Bind components to APIs and state
  • Apply framework- and edition-specific rendering conventions
  • Trace and tag outputs consistently
  • Validate and lint generated outputs before commit

Skills can be reused across multiple rendering cycles and are orchestrated based on input metadata, rendering mode, or downstream dependency requirements.

🧩 Core Skill Set

Skill Name Description
ComponentRendererSkill Converts ui-spec.yaml fragments into rendered UI components for Blazor, Angular, or HTML/JS
PageAssemblerSkill Composes components into full-page layouts based on slots from layout-definition.md
ApiBindingSkill Binds components to API service wrappers and resolves async loading states
AuthGuardInjectionSkill Injects role-based access wrappers, login flow guards, and protected routes
RoutingGeneratorSkill Generates route declarations, lazy-loaded modules, and default/fallback routes
StateHandlerSkill Adds stateful service wrappers or local state blocks using framework conventions
TailwindApplierSkill Applies classes using token-to-Tailwind mapping with spacing, sizing, and theme logic
TelemetrySpanSkill Injects OpenTelemetry spans (ui.rendered, click.*, error.form) into rendered code
TestScaffoldSkill Generates test stubs for each page/component using Playwright/Cypress or MSTest/Jest
MetadataWriterSkill Emits .metadata.json files with component/page trace info and schema linkage
I18nBindingSkill Replaces static text with localized keys and inserts string dictionary lookups

🧠 AI Reasoning Sub-Skills (LLM-Enhanced)

Sub-Skill Purpose
ComponentSlotResolver Determines where a widget should be placed in the layout (e.g., sidebar vs. header)
InteractionFlowComposer Derives button → action → API → state update flows using user-flows.json
FormValidatorSynthesizer Generates inline form validation logic based on field spec and context (e.g., email, required, maxLength)
FallbackUIModeAdvisor Suggests static rendering mode if full binding fails or API incomplete
RoleGuardDeriver Computes access rules per component/page based on auth-context.json and edition info

🧱 Skill Execution Plan Example (Blazor Dashboard)

plan:
  - ComponentRendererSkill:
      component: MetricCard
  - PageAssemblerSkill:
      page: DashboardPage
  - ApiBindingSkill:
      source: dashboardService.getSummary
  - AuthGuardInjectionSkill:
      roles: ["user", "admin"]
  - RoutingGeneratorSkill
  - TailwindApplierSkill
  - TestScaffoldSkill
  - MetadataWriterSkill

📦 Skill Source & Format

  • Format: Each skill is a Semantic Kernel plugin (.skprompt.txt) with a YAML function manifest
  • Location:
/skills/frontend-developer-agent/
  ├── ComponentRenderer/
  ├── ApiBinding/
  ├── TestScaffold/
  └── TelemetrySpan/

All skills support dynamic prompt injection using contextual values such as trace_id, component_name, language, and framework.

📡 Skills Are Trace-Aware

Each skill pass appends or propagates:

trace_id: trace-ui-789
execution_id: exec-ui-789
agent_origin: frontend-developer-agent
component: DashboardPage
framework: blazor

🧠 Summary

The Frontend Developer Agent is driven by a modular set of skills that allow it to:

  • 🎨 Render idiomatic UI components with layout and style logic
  • 🔌 Bind to real APIs with telemetry and role security
  • 🌍 Generate localized, accessible, and observable UIs
  • 🧪 Emit tests and metadata in line with platform-wide conventions
  • 🔁 Allow orchestrated, context-driven execution per framework and edition

This skill framework enables the agent to be framework-adaptive, traceable, and fully composable.

🧰 Technology Stack and Tooling

The Frontend Developer Agent uses a multi-framework, production-grade technology stack to support:

  • Cross-framework UI generation (Blazor, Angular, HTML/JS)
  • Clean Architecture adherence (port-adapter separation)
  • Traceability and observability
  • Full CI/CD compatibility for commit-ready outputs

🧱 Core Platforms and Languages

Layer Technology Purpose
🧠 Agent Host .NET 8 + Semantic Kernel Runs the agent’s planner and execution loop
📜 Prompt Runtime Azure OpenAI (GPT-4 Turbo) Used via Semantic Kernel to reason and generate code
📄 UI Frameworks Blazor (WASM/Server), Angular, Tailwind + HTML/JS Used based on input configuration
💬 Language Support TypeScript, HTML, CSS, Razor, C# Component and service generation
📦 Packaging Vite (JS), MSBuild (.NET), Angular CLI Used for local build validation before commit
🔧 Testing MSTest, Playwright, Cypress, Jest Used to generate and validate test artifacts

🌐 Framework-Specific Tooling

Blazor (WASM + Server)

  • Razor syntax (.razor)
  • Program.cs for root startup logic
  • @inject, AuthorizedView, cascading state
  • Uses Microsoft.Extensions.DependencyInjection for services
  • Telemetry via ActivitySource

Angular

  • Angular CLI (v16+) scaffolding
  • app.module.ts, router.module.ts
  • Typed services, role guards, interceptors
  • RxJS for state and API stream binding
  • Supports signals (v17+) when enabled

HTML + Tailwind + Native JS

  • Rendered with clean, static markup
  • Class tokens mapped from /tokens/tailwind.tokens.json
  • Vanilla JS behavior for basic interactivity
  • Used for embedded widgets, onboarding screens, landing pages

🔐 Identity, Auth, and Security Libraries

Feature Stack
OpenID Connect integration Microsoft.AspNetCore.Components.WebAssembly.Authentication or @azure/msal-browser
Role-based access AuthorizedView, canActivate, or ngIf user.hasRole(...)
Token acquisition IAccessTokenProvider (Blazor), Angular interceptors, or Fetch/Storage pattern
Claims/edition injection Bound using auth-context.json

📡 Observability Tooling

Layer Tool
OpenTelemetry spans Emitted using ActivitySource (Blazor) or trace() wrapper (JS/TS)
UI events click, form.submit, render.page
Output metadata .metadata.json per component/page with trace_id, component, and roles
Logging ILogger<> for Blazor, or console.trace + JSON payload in JS/TS apps

🧪 Testing Stack

Type Tool
Component/unit tests MSTest (Blazor), Jest (Angular/JS)
E2E tests Playwright, Cypress (headless)
Snapshot and regression support Markdown-based snapshot + golden file comparison (planned)

🧬 Trace Metadata in Generated Artifacts

Every generated output includes:

trace_id: trace-ui-789
execution_id: exec-ui-789
agent_origin: frontend-developer-agent
framework: blazor
component: DashboardPage
generated_on: 2025-05-09T15:41Z

📦 Project Templates

Framework-specific starter structures are pulled from the ConnectSoft.Templates.Frontend package family:

Template Framework
csft-blazor-spa Full .NET Blazor frontend
csft-angular-dashboard Angular + Material admin UI
csft-static-tailwind Static HTML + Tailwind starter shell

These templates are trace-aware, OpenTelemetry-integrated, and CI/CD-compatible by design.

🧠 Summary

The Frontend Developer Agent uses:

  • ✅ .NET + Semantic Kernel for execution
  • 🎨 Blazor, Angular, Tailwind, and HTML for rendering
  • 📡 OpenTelemetry and metadata traces for observability
  • 🔐 Auth-aware rendering with role and edition support
  • 🧪 Playwright, MSTest, and Cypress for test coverage

This tooling enables the agent to generate modular, secure, and observable frontend systems, aligned with ConnectSoft’s software factory vision.

📌 System Prompt

The System Prompt is the foundational instruction injected at agent initialization. It defines the agent’s core identity, enforcement scope, behavioral tone, and architectural alignment — ensuring the agent operates consistently, securely, and in traceable coordination with other agents.

🧠 System Prompt (Canonical Version)

You are the Frontend Developer Agent for the ConnectSoft AI Software Factory.

Your responsibility is to render, bind, and package fully functional frontend applications from structured UI specifications, layout definitions, and API bindings. You operate within a Clean Architecture-aligned framework and must ensure separation between presentation, application port, and adapter layers.

You must:

- Render components and pages using the specified UI framework (e.g., Blazor, Angular, HTML/JS).
- Apply slot-based layouts and design tokens as defined in `layout-definition.md` and `ui-spec.yaml`.
- Integrate backend APIs through port interfaces and adapter wrappers — do not call services directly from the UI.
- Inject role-based access control, route guards, and conditional views as defined in `auth-context.json`.
- Enforce multi-edition UI behavior using `feature_flags` and `edition` context.
- Localize all static strings if `i18n.enabled` is true.
- Emit OpenTelemetry-compatible spans for all key UI events: `ui.rendered`, `click.*`, `form.submit`, `auth.*`.
- Validate output for syntax correctness, traceability (`trace_id`, `execution_id`, `agent_origin`), and test coverage.

You must NEVER emit output without trace metadata, test scaffolding (unless explicitly disabled), or observability hooks. All outputs should be production-grade, commit-ready, and aligned with Clean Architecture.

If any ambiguity exists in layout, bindings, or roles, you should emit an `InterventionRequest` and wait for human review.

You act as a full-stack visual engineer — precise, compliant, trace-aware, and orchestrator-driven.

Use structured, semantic, idiomatic code in the target framework and respect edition-specific rules when generating per-tenant UI variants.

Your outputs will be consumed by:
- Code Committer Agent (for Git staging and PR creation)
- Test Generator Agent (for UI testing)
- Observability Agent (for telemetry analysis)

Use a professional tone. Produce auditable metadata and emit all outputs to `/frontend/{component}/`.

Ensure everything is linked to the active `trace_id` and `execution_id`.

You are not a designer. You are the implementer of approved specifications and architecture.

🧠 Prompt Characteristics

Aspect Behavior
🎯 Enforcement Scope Architecture, auth, edition logic
🗂️ Output Discipline Clean folder structure, metadata output
🔐 Security Sensitivity Enforces auth guards, role injection
📡 Observability-First Spans injected in all rendered outputs
🧪 Test-Required Tests emitted unless disabled explicitly
🧾 Metadata Embedded All files must include trace metadata
🤝 Orchestration-Compliant Follows execution plan and input prompt

📘 When and Where It's Used

  • Injected by the Orchestration Layer when the agent is instantiated
  • Reinforced before running Semantic Kernel skills (component rendering, layout composition, telemetry injection)
  • Informs LLM-based reasoning skills (e.g., form binding, role guard placement, fallback UI inference)

✅ Summary

The System Prompt defines the behavioral contract for the Frontend Developer Agent:

  • 🔁 Ensures consistent rendering logic across editions and frameworks
  • 🧠 Sets expectations for architecture and traceability
  • 📦 Enforces output structure, validation, and downstream integration
  • 🧾 Aligns the agent with Clean Architecture, test-first, and observability-driven design

It is the governing principle that transforms inputs into reliable, production-grade, and factory-compliant UI deliverables.

📥 Input Prompt Template

The Input Prompt Template defines the agent’s activation context, including:

  • What to render (component, page, layout)
  • Which framework to use
  • Edition-specific and role-based customization
  • Connected services and state
  • Feature flags and trace information

It is structured as a YAML or JSON object passed from the Orchestration Layer or triggering coordinator.

📋 YAML Prompt Template (Example)

trace_id: trace-ui-789
execution_id: exec-ui-789
component: DashboardPage
framework: blazor
render_mode: webassembly
language: en
environment: staging
edition: B2B
auth_required: true

layout:
  type: shell
  slots:
    header: HeaderBar
    sidebar: SidebarMenu
    content: [ChartCard, SummaryTable]
    footer: FooterNotice

api_bindings:
  getSummary: dashboardService.getSummary
  getUsers: userService.getAll

roles:
  - user
  - admin

feature_flags:
  showInsightsTab: true
  useReactiveCharts: false

i18n:
  enabled: true
  keys_file: i18n-strings.json

test_generation: true
telemetry:
  span_on_render: true
  emit_click_events: true

✅ Required Fields

Field Description
trace_id Globally unique trace tag for audit and event correlation
execution_id Tied to orchestrator execution flow
component The component or page being rendered
framework blazor, angular, or html
layout.slots Slot-based layout map — header, content, etc.
api_bindings Data-source/service mappings for interactive elements

🧪 Optional Fields (Enhancers)

Field Effect
feature_flags Allows per-edition conditional rendering logic
language Determines string key injection for i18n
test_generation Enables auto-creation of unit + E2E test files
telemetry.span_on_render Triggers OTEL span injection at view level
roles Used to inject access control wrappers (AuthorizedView, ngIf)

🧠 Prompt Token Injection

All prompts are processed using templated token expansion. Example:

Render the component {{component}} using {{framework}}.
Apply layout with header: {{layout.slots.header}}, sidebar: {{layout.slots.sidebar}}.
Include API binding for getSummary: {{api_bindings.getSummary}}.
Use edition {{edition}}, auth required: {{auth_required}}.

These templates are stored in frontend-skills/prompts/ and used across kernel functions.

📘 JSON Equivalent Prompt (API-Compatible)

{
  "trace_id": "trace-ui-789",
  "execution_id": "exec-ui-789",
  "component": "LoginPage",
  "framework": "angular",
  "edition": "internal",
  "auth_required": true,
  "api_bindings": {
    "login": "authService.login"
  },
  "layout": {
    "type": "fullscreen",
    "slots": {
      "content": ["LoginForm"]
    }
  },
  "telemetry": {
    "span_on_render": true
  }
}

🧾 Prompt Validation

Before execution begins, the Orchestrator ensures:

  • component, framework, and trace_id are present
  • api_bindings match available SDK/service methods
  • layout.slots are mapped to defined UI fragments or defaults
  • Optional fields have fallback defaults (e.g., language: en, render_mode: static)

Invalid or missing prompt fields result in PromptValidationFailed.

✅ Summary

The Input Prompt Template provides:

  • 🧠 Declarative UI rendering instructions
  • 🔌 API + layout wiring context
  • 🔐 Security, edition, and telemetry metadata
  • 📦 A reproducible, trace-bound input contract for frontend delivery

It ensures repeatable, orchestrated UI generation across any project, edition, or component.

📦 Output Expectations

The Frontend Developer Agent emits production-grade frontend source code that is:

  • Structured and testable
  • Trace-labeled for observability
  • Compliant with Clean Architecture
  • Compatible with GitOps and CI/CD pipelines

Outputs vary by framework but follow a consistent folder and metadata schema.

📁 Folder Structure

/frontend/
  ├── components/            # Reusable UI widgets
  ├── pages/                 # Application views
  ├── layout/                # Layout shell wrappers
  ├── api/                   # API client wrappers
  ├── state/                 # Shared state handlers
  ├── services/              # Auth, config, telemetry services
  ├── routing/               # App route declarations
  ├── i18n/                  # Localization string sets
  ├── telemetry/             # OTEL integration files
  ├── __tests__/             # Unit and E2E test files
  ├── styles/                # Tokens, Tailwind, scoped CSS
  └── metadata/              # Component/page descriptors

📄 File Output Types

Type Example File Purpose
🧩 Component ChartCard.razor / CardComponent.tsx Reusable widget implementing UI block
📄 Page DashboardPage.razor / dashboard.page.ts Full view layout with bound slots
🔌 API Binding dashboardService.ts Connects to backend API client
📚 Layout ShellLayout.razor Header/sidebar/content shell
🌍 Routing AppRouter.razor, app.routes.ts Defines app routes and guards
🧠 State useUserStore.ts, UserSession.cs Reactive/shared view state
🔐 Auth AuthService.ts, LoginGuard.cs Authenticated route and token handling
🧪 Tests DashboardPage.test.ts, LoginForm.e2e.ts Test artifacts for QA and regression
📡 Telemetry traceEvents.ts, ui-span.ts Emits OpenTelemetry spans
📘 Metadata DashboardPage.metadata.json Defines route, roles, component properties
🌐 i18n en.json, fr.json Key-value pair translations

📜 Sample Metadata File

{
  "component": "DashboardPage",
  "path": "/dashboard",
  "roles": ["admin", "user"],
  "layout": "ShellLayout",
  "generated_by": "frontend-developer-agent",
  "trace_id": "trace-ui-789",
  "edition": "B2B"
}

Used by the Orchestration Layer, DevOps Agent, and Testing Agent.

📊 Telemetry Example (Angular or JS)

trace("ui.rendered", {
  component: "DashboardPage",
  trace_id: "trace-ui-789",
  user_role: "admin",
  region: "westeurope"
});

🧪 Test Artifact Example (Jest or MSTest)

describe('DashboardPage', () => {
  it('should render summary cards', () => {
    render(<DashboardPage />);
    expect(screen.getByText(/Active Users/)).toBeInTheDocument();
  });
});

🧬 GitOps-Compliant Output Requirements

All output folders include:

  • trace_id, execution_id embedded in file comments or metadata
  • Framework-specific project.json, .csproj, or package.json for build tooling
  • Optional README.md with edition-specific usage or bootstrapping instructions

Output is committed via the Code Committer Agent as a Git branch and merged via PR workflows.

🎯 Output Is Edition-Aware

If edition: B2B, the agent may emit:

/frontend/
  ├── pages/
  │   ├── DashboardPage_B2B.razor
  │   └── DashboardPage_B2C.razor

Feature flags or edition overlays influence conditional output logic.

✅ Summary

The Frontend Developer Agent produces:

  • 🎨 Component-based UI source code
  • 🔌 Service-bound logic and routing scaffolds
  • 🔐 Role-based auth and edition overlays
  • 🧪 Validatable, testable test files
  • 📡 Telemetry and metadata for observability and coordination

These outputs ensure a fully automated, traceable, deployable frontend that fits seamlessly into the AI Software Factory lifecycle.

📌 Memory (short-term and long-term)

Memory allows the Frontend Developer Agent to maintain context, traceability, and semantic consistency during UI generation — especially when rendering:

  • Multi-part pages or dynamic components
  • Role-specific and edition-specific UI variants
  • Outputs tied to a prior blueprint or agent sequence
  • Repeated layouts, patterns, or traceable span structures

🧠 Short-Term Memory (Context Window)

Used within a single rendering session, this memory is injected into the Semantic Kernel planner to:

  • Load trace_id, execution_id, component, and agent_origin
  • Preserve layout-definition.md, ui-spec.yaml, auth-context.json
  • Track active feature_flags, edition, and routing metadata
  • Bind to current API client (api-bindings.json)
  • Map known roles, route paths, and page-level state bindings

Example Injection (Semantic Kernel):

{
  "trace_id": "trace-ui-782",
  "component": "DashboardPage",
  "edition": "b2b",
  "framework": "blazor",
  "slots": ["header", "content", "footer"],
  "auth_roles": ["user", "admin"],
  "api_bindings": {
    "getSummary": "dashboardService.getSummary"
  },
  "layout": "ShellLayout"
}

This short-term context is used to guide skill execution, such as ComponentRendererSkill, RoutingGeneratorSkill, and TelemetrySpanSkill.

📚 Long-Term Memory (Traceable Vector Memory)

Used across execution runs and orchestrated projects, this memory supports:

  • Recognition of past rendering patterns or known layout strategies
  • Detection of previously used telemetry span schemas
  • Continuity of trace lineage between blueprint → PR → UI → tests
  • Reuse of translation keys, test selectors, or error-handling wrappers
  • Edition-specific UI overlays and localization preferences

Stored via:

  • 🔹 Vector DB for reusable examples (e.g., “How was UserForm rendered for internal edition?”)
  • 🔹 Metadata logs for file emission history (trace-index.yaml)
  • 🔹 Memory-backed skill prompts for refinement in regenerations

📦 Examples of Memory Use

Scenario Memory Used
Re-rendering ProfilePage after blueprint update Reuses component order, span tags, and routing logic
Rendering a form with existing localization Injects prior translation keys from i18n-mapping.vector
Matching layout strategy for sibling pages Loads preferred slot distributions from trace memory
Generating test stubs for reused UI Recalls prior selector structure and asserts

🧠 Memory Lifecycle Management

Type Scope Retention Triggered By
Short-Term Current execution_id Discarded post-run Orchestration trigger
Long-Term Cross-project Immutable log or retrievable vector index Trace commit or metadata capture

The execution_id ensures traceability between memory and code commits.

🔐 Governance & Traceability

  • All long-term memory records include:

  • trace_id, component, agent_origin, framework, and timestamp

  • Memory writes are append-only, versioned, and inspectable
  • Sensitive tokens (e.g., secrets) are never stored

📘 Skill Behaviors Enhanced by Memory

Skill Memory Use
TailwindApplierSkill Inherits token mappings from similar components
RoutingGeneratorSkill Aligns with prior route naming and fallback paths
I18nBindingSkill Uses previously mapped keys for new UIs
TelemetrySpanSkill Reuses consistent span naming (e.g., user.created, ui.rendered) across pages

✅ Summary

The Frontend Developer Agent uses:

  • 🧠 Short-term memory to load prompt context, API bindings, and trace metadata
  • 📚 Long-term vector memory to enforce consistency, traceability, and design reuse
  • 🧩 Agent-specific memory snapshots to enable downstream reproducibility and human audit

This ensures smart, contextually aligned UI rendering, with full continuity across projects, editions, and executions.

🧱 Port/Adapter Mapping (Clean Architecture Alignment)

ConnectSoft enforces Clean Architecture across all layers, including frontend. The Frontend Developer Agent must ensure:

  • UI logic remains framework-bound and presentation-only
  • Domain logic is delegated through interface ports
  • Infrastructure communication (e.g., API calls) is routed through adapters

This pattern ensures frontend systems are modular, testable, extensible, and framework-portable.

🧩 Clean Architecture Frontend Layers

flowchart TD
    UI[🎨 UI Layer (Component/Page)]
    Port[🧩 Application Port Interface]
    Adapter[🔌 API Adapter / Service Wrapper]
    Domain[🏗️ Domain DTOs / Models]

    UI --> Port
    Port --> Adapter
    Adapter --> Domain
Hold "Alt" / "Option" to enable pan & zoom

🧩 Mapping in Practice

Example: Displaying Dashboard Summary

DashboardPage.razor → IDashboardServicePort → DashboardApiAdapter → /api/dashboard/summary
Layer Implementation
UI DashboardPage.razor
Port IDashboardServicePort.cs (interface in shared library)
Adapter DashboardApiAdapter.ts or DashboardService.cs
Domain DashboardSummaryDTO

This mapping ensures the UI component doesn't call the API directly — it delegates to a port interface which is later fulfilled by an adapter.

📂 Folder Structure Alignment

/frontend/
  ├── pages/
  │   └── DashboardPage.razor
  ├── ports/
  │   └── IDashboardServicePort.cs
  ├── adapters/
  │   └── DashboardApiAdapter.cs
  ├── api/
  │   └── dashboardClient.ts  # Auto-generated

Generated adapters conform to port contracts and wrap dashboardClient.ts.

🔌 Adapter Injection (by Framework)

Framework Pattern
Blazor @inject IDashboardServicePort DashboardService
Angular Provided via useClass: DashboardApiAdapter using DI
HTML/JS Exposed via factory or imported module pattern (const summary = port.getSummary())

🎯 Advantages of Port Mapping

  • ✅ Improves testability by mocking ports
  • ✅ Enables multiple implementations (e.g., StubAdapter, LiveAdapter)
  • ✅ Supports local-first apps and progressive enhancement
  • ✅ Compliant with DDD and Clean Architecture without leaking transport logic into the UI

🧠 Agent Behavior Summary (Port Binding)

  1. Resolve required UI → API flow from component-bindings.yaml
  2. Generate IPort interface per page/component scope
  3. Generate Adapter wrapping API client
  4. Inject adapter into UI using DI pattern
  5. Bind user action → port method

🧾 Example Generated Port

public interface IDashboardServicePort
{
    Task<DashboardSummaryDTO> GetSummaryAsync();
}

Corresponding Adapter

public class DashboardApiAdapter : IDashboardServicePort
{
    private readonly IDashboardApiClient _client;
    public DashboardApiAdapter(IDashboardApiClient client) => _client = client;

    public async Task<DashboardSummaryDTO> GetSummaryAsync()
        => await _client.GetSummaryAsync();
}

✅ Summary

The Frontend Developer Agent ensures:

  • 📐 Clear separation of concerns between UI and service logic
  • 🧩 Port-based delegation using application interfaces
  • 🔌 Adapter-based integration with generated API clients
  • 🧪 Testability via interface mocking and adapter swapping
  • 🧠 Consistency across Blazor, Angular, and other frameworks

This makes ConnectSoft frontend layers modular, framework-safe, and compliant with enterprise architecture standards.

🔀 Cross-Cutting Concerns

The Frontend Developer Agent must embed critical non-functional aspects such as:

  • ♿ Accessibility (A11Y)
  • 🌍 Internationalization (i18n)
  • 📱 Responsiveness
  • 🛡️ Security
  • 🔧 Customizability (e.g., edition overlays, feature flags)

These concerns are non-optional and apply to every component, page, and UI artifact produced.

♿ Accessibility (A11Y)

✅ Enforced Patterns

Area Implementation
Focus Order Use tabindex and natural DOM flow
Landmarks role="main", role="navigation", role="banner"
Form Labels <label for=...> or aria-labelledby
Contrast Ratios Tailwind tokens mapped to AA-compliant values
Keyboard Support Keypress events for all interactive elements
Visual Cues Use :focus-visible, skip links, and error outlines

🧠 Agent Validation Skill

  • AccessibilityLintSkill checks rendered HTML for aria-* coverage, label pairing, and proper semantic tags.

🌍 Internationalization (i18n)

✅ i18n Support Model

Mechanism Framework
Blazor @inject IStringLocalizer<DashboardPage> with .resx
Angular ngx-translate or built-in Angular i18n pipes
HTML/JS Token replacement from i18n-strings.json via i18n.get(key) helper

🧩 Prompt-Driven Binding Example

i18n:
  enabled: true
  keys_file: i18n-strings.json

Yields:

<h1>{{ 'dashboard.title' | translate }}</h1>

The agent wraps all static text nodes with framework-specific localization methods.

📱 Responsiveness

✅ Implementation via Tailwind + Layout Strategy

  • Mobile-first layout defaults
  • Grids use sm:, md:, lg:, and xl: Tailwind breakpoints
  • Sidebar collapsible on max-width <= 768px
  • Cards, modals, and containers use w-full max-w-lg mx-auto for fluid layout

🧠 Layout-Aware Prompt Guidance

The agent uses layout structure to decide:

  • grid-cols-1 on mobile
  • grid-cols-2 or gap-x-4 on larger screens
  • Responsive behavior for components with toggles, menus, tables, etc.

🧩 Edition/Feature Flags

When feature flags or editions are defined in the prompt:

feature_flags:
  enableCharts: false
  showUserTab: true
edition: B2B

The agent injects conditionals:

@if (FeatureFlags.ShowUserTab) {
  <UserTab />
}

Or in Angular:

<app-user-tab *ngIf="featureFlags.showUserTab"></app-user-tab>

🛡️ Security Hooks (Frontend)

  • Role-based conditional rendering:
    • Blazor: AuthorizedView Roles="admin"
    • Angular: *ngIf="user.hasRole('admin')"
  • XSS protection:
    • Avoids direct innerHTML bindings unless sanitized
  • Route guards:
    • Defined in AppRouter using role/claims from auth-context.json

🔧 Other Cross-Cutting Hooks

Concern Technique
Loading Indicators Built-in isLoading observables or cascading IsBusy flag
Form Validation required, pattern, minLength bindings + live feedback
Error Boundaries Try/catch, fallback render slots (<ErrorBox />)
Theming Tailwind tokens scoped by class (.theme-dark, .theme-light)

✅ Summary

The Frontend Developer Agent ensures all UIs are:

  • ♿ Accessible by default (WCAG AA compliant)
  • 🌍 Localizable and multilingual-ready
  • 📱 Mobile-friendly and responsive
  • 🔐 Security-aware and role-bound
  • 🧩 Edition-aware and feature-toggle driven

These cross-cutting qualities are automatically injected and validated, forming the baseline quality guarantee for every UI artifact emitted.

✅ Validation Process

Before the Frontend Developer Agent outputs its work, it performs a rigorous, multi-layered validation process to ensure:

  • 🧱 Generated code is syntactically valid and idiomatic
  • 🔌 All API bindings and auth guards are resolved correctly
  • ♿ Accessibility, responsiveness, and i18n are present
  • 📦 Output is testable, buildable, and trace-complete

Validation occurs before output commit and ensures that no broken UI reaches downstream agents.

🔍 Validation Layers

1️⃣ Syntactic & Structural Validation

Tool Target
eslint / tsc Angular and TypeScript outputs
razor compiler .NET Blazor components
htmlhint Tailwind + HTML files
yaml validator Input files like ui-spec.yaml, layout-definition.md

Agent uses embedded linters or CLI checks to validate generated code blocks.

2️⃣ Binding & API Resolution

  • Ensure all components have @inject or import for API ports
  • Match API bindings to client library contracts:
    • E.g., dashboardService.getSummary exists and has expected signature
  • Ensure no dangling data bindings ([value] or @bind-Value without a model)

3️⃣ Access Guard Validation

  • Each protected route or view is checked for role/claim guard presence
  • Auth injection logic validated:
    • AuthorizedView, canActivate, ngIf="auth.isAuthorized()"

If any binding is missing or malformed:

{
  "event": "ValidationFailed",
  "trace_id": "trace-ui-789",
  "reason": "Missing route guard for /admin route",
  "component": "AdminPage"
}

4️⃣ Layout & Slot Integrity

  • Layout slots (header, content, footer) must match available components
  • Shell layouts (ShellLayout, FullScreenLayout) must compile and support the defined pages

Agent emits:

{
  "component": "DashboardPage",
  "layout": "ShellLayout",
  "slots_validated": true
}

5️⃣ Cross-Cutting Compliance Checks

Concern Rule
Accessibility Must include ARIA roles and keyboard handlers
Responsiveness Tailwind breakpoints or media queries must exist for .page views
i18n No hardcoded strings allowed if i18n.enabled = true
Telemetry At least one ui.rendered span per page is required

These are verified using agent-side analyzers (i18nScanSkill, TelemetryLintSkill, etc.)

6️⃣ Test Stub Validation

  • Check that each page has a matching test file in /__tests__/
  • Run Playwright or MSTest test generation dry-run
  • Validate selectors used in test are present in component

If missing, a MissingTestCoverage warning is emitted (non-blocking in dev env).

7️⃣ Trace Metadata Completeness

Each file must embed:

trace_id: trace-ui-789
execution_id: exec-ui-789
agent_origin: frontend-developer-agent
framework: blazor
component: DashboardPage

Missing metadata results in validation failure.

🧪 Example: Validation Pipeline per Page

- ValidateSyntax
- ValidateLayoutSlots
- ResolveApiBindings
- CheckAccessGuards
- InjectTelemetrySpan
- ScanForHardcodedStrings
- EmitValidationReport

📘 Final Output: validation-report.json

{
  "component": "DashboardPage",
  "status": "passed",
  "issues": [],
  "trace_id": "trace-ui-789"
}

If errors:

{
  "status": "failed",
  "issues": [
    { "type": "missing-guard", "location": "pages/AdminPage.razor" },
    { "type": "missing-i18n", "text": "Welcome, user!" }
  ]
}

✅ Summary

The Frontend Developer Agent enforces frontend integrity through:

  • ✅ Syntax & structure checks
  • 🔌 Binding and guard resolution
  • 🌍 i18n, a11y, and responsive layout scans
  • 🧪 Test presence and selector validation
  • 📡 Telemetry injection verification
  • 🧾 Trace metadata completeness

This ensures the agent only emits secure, valid, observable, and production-grade frontend output.

📡 Observability and UX Telemetry Hooks

The Frontend Developer Agent is responsible not only for visual rendering but also for making UIs observable and trace-linked.

It injects OpenTelemetry-compatible spans, structured logging hooks, and user event traces into every page, ensuring all frontend applications are:

  • 📊 Traceable in dashboards
  • 🧾 Auditable for user interaction flows
  • 🔧 Debuggable with diagnostics events
  • 📡 Connected to the Software Factory’s event stream

🧭 Core Telemetry Injection Points

Location Hook
Page render ui.rendered span on every route/page
Click events click.button, click.link, click.tab
Form submission submit.form with form name or selector
API failure ui.error.api emitted on failed API responses
Auth flows auth.success, auth.failed based on result
Feature toggles feature.enabled/disabled events when conditional UI is rendered

📘 Span Emission Example (Blazor)

@inject ActivitySource Source

@code {
  protected override void OnAfterRender(bool firstRender)
  {
      if (firstRender)
      {
          using var span = Source.StartActivity("ui.rendered", ActivityKind.Internal);
          span?.SetTag("component", "DashboardPage");
          span?.SetTag("trace_id", "trace-ui-789");
          span?.SetTag("edition", "b2b");
      }
  }
}

📘 Span Emission Example (Angular/JS)

trace("ui.rendered", {
  component: "DashboardPage",
  trace_id: "trace-ui-789",
  environment: "staging",
  edition: "b2b"
});

button.addEventListener("click", () =>
  trace("click.button", { id: "refreshBtn", label: "Refresh", trace_id: "trace-ui-789" })
);

JS/TS telemetry logic uses a standard trace() helper injected by the agent.

🗂️ Folder Structure

/frontend/
  ├── telemetry/
  │   └── traceEvents.ts
  │   └── otel.config.ts

These files are included by default in every frontend app unless disabled via telemetry.enabled = false.

🧪 Test Coverage of Telemetry

Each generated test case includes basic coverage to ensure spans are emitted:

expect(trace).toHaveBeenCalledWith("ui.rendered", expect.objectContaining({
  component: "DashboardPage"
}));

🧩 Metadata-Linked Spans

Every telemetry span includes the following tags:

Tag Description
trace_id From orchestrator
execution_id Unique to this agent’s run
component The current view/component
edition Multi-tenant or edition-specific identifier
user_role If available, injected via session context
event_type e.g., click.button, ui.rendered

📊 Dashboard Integration

Telemetry emitted by this agent enables:

  • Real-time heatmaps of user interaction
  • Dashboard tiles showing render latency by region or user role
  • Monitoring broken flows, failed submissions, or auth issues
  • Audit trails for feature.enabled events linked to rollout strategies

🔒 Privacy & Security Notes

  • No PII is included by default
  • Events can be disabled globally or per-component with telemetry.enabled: false
  • All telemetry is edition- and tenant-aware

🧠 Summary

The Frontend Developer Agent makes every UI traceable and observable by injecting:

  • 🛰️ OpenTelemetry spans for key user and system events
  • 📊 Structured events for buttons, forms, auth, and routing
  • 🔗 Trace metadata tags linking back to blueprint, edition, and agent ID
  • 📘 Configurable telemetry logic per framework and edition
  • 🧪 Test coverage for all spans in rendered views

These observability hooks are essential for runtime diagnostics, analytics, and cross-agent insight across the ConnectSoft platform.

🤝 Collaboration Interfaces

The Frontend Developer Agent operates in coordination with multiple upstream and downstream agents in the software factory pipeline. It neither initiates design nor deploys output alone — instead, it integrates, transforms, and hands off.

It is a mid-pipeline transformation agent, converting UI/UX + API + edition context into UI artifacts, ready for commit and testing.

🧩 Primary Collaborating Agents

Agent Relationship
🎨 UI Designer Agent Supplies ui-spec.yaml, layout definitions, component design rules
🧭 UX Designer Agent Provides interaction flows (user-flows.json), component behavior
🏗️ Application Architect Agent Defines framework strategy, layering, frontend layout patterns
📡 API Contract Generator Agent Supplies typed client libraries and binding contracts
🛡️ Security Engineer Agent Injects role-based access control, auth context
⚙️ IaCCoordinator / Orchestration Layer Triggers the agent, provides execution_id, trace_id, config
📥 Code Committer Agent Receives emitted files and metadata, creates PRs for frontend code
🧪 QA/Test Generator Agent Consumes tests, metadata, selectors, telemetry for UI validation
📊 Observability Agent Ingests telemetry data + component traces for frontend instrumentation
👤 HumanOps Agent Receives preview diffs and validation errors (manual review when needed)

🔁 Data Flow: Upstream → Frontend → Downstream

flowchart TD
    UI[UI Designer Agent]
    UX[UX Designer Agent]
    API[API Generator Agent]
    ARCH[Application Architect Agent]
    SEC[Security Engineer Agent]
    COORD[Orchestration Layer]

    FRONT[Frontend Developer Agent]

    COMMIT[Code Committer Agent]
    QA[QA/Test Generator Agent]
    OBS[Observability Agent]

    UI --> FRONT
    UX --> FRONT
    API --> FRONT
    ARCH --> FRONT
    SEC --> FRONT
    COORD --> FRONT
    FRONT --> COMMIT
    FRONT --> QA
    FRONT --> OBS
Hold "Alt" / "Option" to enable pan & zoom

🧠 Collaboration Inputs

Source Agent Artifact
UI Designer ui-spec.yaml, layout-definition.md, Tailwind tokens
UX Designer user-flows.json, interaction rules
API Generator api-client-lib.ts / apiClient.cs
Security Engineer auth-context.json, claims, edition roles
Orchestrator trace_id, execution_id, config flags

📤 Output Consumers

Target Agent Receives
Code Committer File structure, .metadata.json, diffs
QA/Test Generator Tests, selectors, telemetry assertions
Observability Agent UI telemetry spans, component logs
HumanOps Agent Reviewable changes, validation errors
DevOps Agent (indirect) Receives PR to build + deploy frontend bundle

🗂️ Shared Metadata for Coordination

All files include:

trace_id: trace-ui-789
execution_id: exec-ui-789
agent_origin: frontend-developer-agent
component: DashboardPage
edition: B2B
framework: blazor

This metadata enables cross-agent traceability, audit logs, and PR lineage tracking.

📫 Interface Types

Interface Type Usage
Filesystem Shared folder /frontend/ with versioned structure
Event Bus Emits events like FrontendRendered, ValidationFailed, PreviewGenerated
Planner-to-Agent Prompt-based execution via frontend-developer.plan.yaml
GitOps Changes staged for commit by Code Committer Agent

🧠 Summary

The Frontend Developer Agent collaborates with:

  • 🔼 Design and architecture agents to receive layout, structure, and tech stack
  • ⚙️ Orchestration layer to bind execution context
  • 🔽 Code commit, QA, and observability agents to deliver testable, monitored UIs

These interfaces ensure every frontend delivery is context-aware, composable, and seamlessly integrated into the full ConnectSoft pipeline.

🔁 Retry and Correction Flow

Despite structured inputs and skill-based generation, frontend rendering can fail due to:

  • ❌ Incomplete or malformed ui-spec.yaml
  • 🔄 Missing bindings or unresolved API client functions
  • 🧱 Broken layout slots or guard mismatches
  • 🧪 Test stubs or selectors failing lint/test validation
  • 🔤 i18n or a11y violations

The agent must detect, correct, and retry autonomously where possible, or emit actionable diagnostics when human feedback is needed.

🧪 Retry Triggers

Condition Trigger Type
Missing layout slot component Auto-correction
Unresolved API method Retry with inferred stub
Lint failure (CSS, Razor, TS) Retry with syntax correction
Missing i18n key Retry using fallback localization helper
Auth wrapper mismatch Rebuild guard or fallback to default roles

Retry logic is trace-aware and never overwrites a previously valid artifact unless explicitly replaced.

⚙️ Correction Strategies

1️⃣ Missing Slot Components

layout:
  content: [DashboardSummaryCard, MissingWidget]

➡ Agent renders MissingWidget as a fallback stub:

<div class="bg-yellow-100 text-yellow-800 p-4 rounded">
  ⚠ MissingWidget placeholder rendered by Frontend Developer Agent
</div>

2️⃣ API Binding Failure

If:

api_bindings:
  getSummary: dashboardService.getSummary

…is missing in the client, the agent will:

  • Emit ApiStubAdapter with TODO comment
  • Retry the render with stub injection

3️⃣ Lint/Test Validation Failure

If Razor or TS lint fails:

  • Agent re-indents, corrects structural tags, or rewraps @code blocks
  • Retry using clean template-based render
  • If retry still fails: emit ValidationFailed event with line info

4️⃣ Missing i18n Key

If string "Welcome, {{username}}" is hardcoded and i18n.enabled: true:

  • Injects fallback key: "welcome.username"
  • Adds entry to i18n-missing.json and links it in metadata

5️⃣ Role Guard Errors

If required roles are missing from auth-context.json, the agent:

  • Assumes user role by default
  • Emits warning in metadata:
{
  "warning": "Roles undefined, defaulted to 'user'",
  "component": "SettingsPage"
}

🔁 Retry Loop Architecture

flowchart TD
    A[Initial Render Attempt] --> B[Run Validation Checks]
    B --> C{Validation Passed?}
    C -- Yes --> D[Emit Final Output]
    C -- No --> E{Retryable Issue?}
    E -- Yes --> F[Apply Auto-Correction]
    F --> A
    E -- No --> G[Emit ValidationFailed Event]
Hold "Alt" / "Option" to enable pan & zoom

📘 Retry Events

RetryAttempted

{
  "event": "RetryAttempted",
  "trace_id": "trace-ui-789",
  "reason": "API binding missing",
  "attempt": 1
}

ValidationFailed

{
  "event": "ValidationFailed",
  "trace_id": "trace-ui-789",
  "component": "ProfilePage",
  "reason": "Slot 'Sidebar' missing from layout definition"
}

⛔ Retry Limits

Type Max Attempts
Minor syntax fix 2
Component stub retry 1
API fallback 1
Lint reflow 2

Beyond max, emits final diagnostics and halts output.

✅ Summary

The Frontend Developer Agent performs:

  • 🔁 Self-healing retries on common render, binding, and layout issues
  • 🧠 Context-aware corrections using fallback stubs, default roles, or placeholder tokens
  • 📡 Diagnostics emission when unresolvable issues occur
  • 🧾 Event logging for every retry attempt and resolution decision

This retry and correction flow makes the agent resilient, developer-friendly, and safe to automate at scale.

👤 Human Intervention Hooks

Although the Frontend Developer Agent operates autonomously, certain situations benefit from manual intervention, such as:

  • Design ambiguity
  • Visual correctness disputes
  • Feature flag conflict resolution
  • Accessibility or localization review
  • Approval before promoting to production editions

The agent exposes well-defined intervention hooks that allow UI designers, architects, or QA leads to interact without breaking the automation flow.

🛑 Intervention Scenarios

Scenario Hook Trigger
⚠️ Unmapped Component in Layout Pause and request confirmation or override
❓ Ambiguous Input/Output Binding Present multiple interpretations with prompt to select
🧪 Missing Test Definition Warn and request human-written test if generated stub insufficient
🌍 Undefined Language Key Flag and allow i18n editor to input missing translations
🔐 Role-Based UI Mismatch Raise conflict if required role not defined in auth-context.json
🎨 Visual Validation Mode Enabled Offer visual diff review before committing output (UI reviewer step)

🧭 Intervention Flow Diagram

flowchart TD
    A[Start Agent Execution]
    B[Detect Conflict or Missing Binding]
    C{Manual Review Enabled?}
    D[Emit InterventionRequest]
    E[Await Approval or Response]
    F[Resume Agent Execution]

    A --> B --> C
    C -- Yes --> D --> E --> F
    C -- No --> F
Hold "Alt" / "Option" to enable pan & zoom

📬 InterventionRequest Event

{
  "event": "InterventionRequest",
  "trace_id": "trace-ui-789",
  "component": "SettingsPage",
  "reason": "Unmapped component 'SecurityPanel'",
  "recommended_actions": ["Skip", "Render Empty", "Replace with Fallback"]
}

Delivered to:

  • HumanOps Agent
  • Orchestrator dashboard
  • Slack/Teams bot (if configured)
  • GitHub/GitLab PR comment (if in preview mode)

✅ Supported Human Actions

Action Result
Approve As-Is Agent proceeds with current plan
Modify Inputs Agent restarts with updated inputs (e.g., layout override)
Inject Custom Snippet Accept user-submitted Razor/HTML/TS for that section
Defer Page Agent skips emitting output for this component (marks as blocked)
Mark as Non-Blocking Continue with warnings instead of halting

📄 Preview Mode Support

When manual_review: true is set in the prompt or agent is running in preview mode:

  • All pages are rendered to an HTML sandbox
  • PreviewGenerated event is emitted
  • UI reviewer receives a visual diff dashboard (side-by-side actual vs. expected)

Great for collaborative design validation before CI pipeline continues.

🧾 Feedback Loop Integration

Human feedback is persisted:

{
  "component": "ProfileEditor",
  "reviewed_by": "alice.ui-designer",
  "action": "Modified layout.slot.footer",
  "timestamp": "2025-05-10T12:10:45Z"
}

Stored in:

  • feedback-log.json
  • Trace history metadata
  • (Optionally) Git commit annotation

🧠 Summary

The Frontend Developer Agent supports safe, traceable, and configurable human intervention via:

  • 👁️ Preview diffs and component review dashboards
  • ⚠️ Conflict resolution prompts on binding and layout issues
  • 📬 Intervention events with actionable options
  • 🧾 Persisted audit trail of feedback and manual decisions

These hooks make the platform auditable, UX-inclusive, and visually verifiable — without sacrificing automation.

🎯 Component and Interaction Diagrams

To ensure clarity and traceability across the ConnectSoft agentic ecosystem, the Frontend Developer Agent emits and aligns to:

  • 🧱 Component tree diagrams: UI layout structure
  • 🔁 Interaction flow maps: UI ↔ API ↔ state ↔ telemetry
  • 🧠 Agent positioning diagrams: lifecycle phase in software factory
  • 🧩 Clean Architecture maps: separation of concerns in frontend

🧩 UI Component Tree Diagram (Mermaid)

Example: DashboardPage Render Tree (Blazor / Angular / HTML)

graph TD
    DashboardPage --> HeaderBar
    DashboardPage --> SidebarMenu
    DashboardPage --> MainContent
    MainContent --> ChartCard
    MainContent --> SummaryTable
    DashboardPage --> FooterNotice
Hold "Alt" / "Option" to enable pan & zoom

This diagram reflects the agent’s slot-to-component rendering logic, based on layout-definition.md.

🔁 Interaction Flow Diagram

flowchart LR
    User[🧑 User Clicks "Refresh"]
    UIComponent[↪️ UI Component]
    Port[📩 Service Port Interface]
    Adapter[🔌 API Adapter]
    API[🌐 Backend API]
    Result[📤 Result DTO]
    State[🧠 Local State]
    UIUpdate[🔁 UI Rerender]

    User --> UIComponent --> Port --> Adapter --> API --> Result --> State --> UIUpdate
    UIUpdate --> UIComponent
Hold "Alt" / "Option" to enable pan & zoom

Every action initiated in the UI passes through the agent-generated port-interface-adapter abstraction.

🧠 Agent System Context Diagram

flowchart TD
    Vision[🎯 Vision Agent]
    UIUX[🎨 UI/UX Designer Agents]
    API[📡 API Generator Agent]
    AppArch[🏗️ App Architect Agent]
    Frontend[🖥️ Frontend Developer Agent]
    Commit[📥 Code Committer Agent]
    QA[🔍 QA Generator]
    Orchestration[⚙️ Orchestrator]

    Vision --> UIUX
    UIUX --> Frontend
    API --> Frontend
    AppArch --> Frontend
    Orchestration --> Frontend
    Frontend --> Commit
    Frontend --> QA
Hold "Alt" / "Option" to enable pan & zoom

📐 Clean Architecture Mapping

flowchart LR
    View[🎨 UI Page/Component]
    Port[🧩 Port Interface]
    Adapter[🔌 Adapter (Service/HTTP)]
    APIClient[🌐 API Client]

    View --> Port
    Port --> Adapter
    Adapter --> APIClient
Hold "Alt" / "Option" to enable pan & zoom

This diagram is enforced structurally by folder layout and Semantic Kernel skill execution order.

📋 Metadata Trace Flow

flowchart TD
    Prompt[📝 Input Prompt Template]
    Skills[⚙️ Rendering Skills]
    Output[📦 Component Output]
    Metadata[📘 metadata.json]
    Event[📡 Telemetry Span + Event]

    Prompt --> Skills --> Output --> Metadata --> Event
Hold "Alt" / "Option" to enable pan & zoom

Each file rendered by the agent flows through this structured, trace-linked generation path.

📊 Telemetry Injection Model

graph LR
    Component --> ClickHook[trace("click.button")]
    Component --> RenderSpan[trace("ui.rendered")]
    Component --> SubmitSpan[trace("submit.form")]
    RenderSpan --> TraceBus[📡 OpenTelemetry Pipeline]
Hold "Alt" / "Option" to enable pan & zoom

Telemetry is woven into the rendering lifecycle, enforced at the skill level.

✅ Summary

The Frontend Developer Agent emits and follows:

  • 🧱 Component tree diagrams for rendering clarity
  • 🔁 Interaction flows for user/API/state alignment
  • 🧩 Clean Architecture maps to enforce separation of concerns
  • 📡 Telemetry flows linked to traceable events
  • ⚙️ System context diagrams showing agent orchestration

These diagrams are automatically generated or documented as part of output to ensure cross-agent alignment, debugging, and audit readiness.

📡 Emitted Events and Orchestration Integration

The Frontend Developer Agent emits structured events during key lifecycle transitions to:

  • Notify the Orchestration Layer
  • Trigger downstream agents (e.g., commit, test)
  • Signal failures or human intervention needs
  • Provide observability feedback for dashboards

All events include trace_id, execution_id, and agent_origin, ensuring traceability and cross-agent correlation.

📬 Emitted Events

Event Name Trigger
FrontendRendered After successful rendering and validation of a component or page
FrontendValidationFailed When output fails structural, binding, or cross-cutting compliance
PreviewGenerated When manual review or visual diff mode is requested
InterventionRequest Human input required to resolve ambiguity or layout issue
OutputCommitted (indirect) Triggered by Code Committer Agent once output is committed
TraceTelemetryAvailable When UI-generated spans and logs are available for Observability Agent

📄 Example Event: FrontendRendered

{
  "event": "FrontendRendered",
  "trace_id": "trace-ui-789",
  "execution_id": "exec-ui-789",
  "agent_origin": "frontend-developer-agent",
  "component": "DashboardPage",
  "framework": "blazor",
  "edition": "b2b",
  "status": "success",
  "timestamp": "2025-05-10T13:22:00Z"
}

❌ Example Event: FrontendValidationFailed

{
  "event": "FrontendValidationFailed",
  "trace_id": "trace-ui-789",
  "component": "SettingsPage",
  "reason": "Missing route guard",
  "stage": "guard-resolution",
  "status": "blocked"
}

Consumed by Orchestration Layer and HumanOps Agent.

🧠 Integration with Orchestration Layer

Triggered By:

agent: frontend-developer-agent
component: DashboardPage
framework: blazor
auto_commit: true
auth_required: true
manual_review: false

Orchestration sets:

  • Execution plan
  • Input prompt
  • Edition rules
  • Framework/runtime flags
  • Downstream triggering instructions

Triggers Downstream Agents:

Agent Action Triggered
📥 Code Committer Agent When FrontendRendered or PreviewGenerated emitted
🔍 QA/Test Generator Agent Based on component structure and test_generation: true
📊 Observability Agent After telemetry span files and traceEvents.ts are emitted
👤 HumanOps Agent If manual_review: true or InterventionRequest emitted

📦 Output Manifest

Emitted with FrontendRendered:

{
  "output_path": "/frontend/DashboardPage",
  "files": [
    "DashboardPage.razor",
    "DashboardPage.test.ts",
    "DashboardPage.metadata.json"
  ],
  "validated": true,
  "trace_id": "trace-ui-789"
}

📘 Trace & Audit Log Record

All emitted events and component outputs are reflected in the central trace registry, e.g.:

{
  "trace_id": "trace-ui-789",
  "agent": "frontend-developer-agent",
  "actions": [
    "rendered:DashboardPage",
    "validated",
    "emitted:DashboardPage.metadata.json",
    "triggered:CodeCommitterAgent"
  ]
}

✅ Summary

The Frontend Developer Agent:

  • 📡 Emits structured, traceable events on render, validation, and failure
  • ⚙️ Integrates seamlessly into the orchestration lifecycle
  • 🪝 Triggers downstream commit, test, and observability agents
  • 📦 Includes output manifest, metadata, and telemetry summaries
  • 🧾 Supports full trace and audit logging via trace_id and execution_id

This ensures the entire UI generation process is automatable, observable, and orchestrator-friendly.

🧩 Final Summary and Governance Enforcement

The Frontend Developer Agent is a core software engineering persona in the ConnectSoft AI Software Factory. It autonomously translates design blueprints, service contracts, and edition-specific configurations into production-ready, observable, and testable frontend interfaces — fully aligned with:

  • 🔁 Clean Architecture
  • 🔐 Security-first design
  • 📦 Traceable GitOps practices
  • ♿ Accessibility and internationalization standards
  • ⚙️ Orchestrated execution flows

📦 What It Delivers

Output Category Artifacts
📄 Pages & Components .razor, .ts, .vue, .html files
🔌 API Bindings Service adapters and port interfaces
🧠 State & Routing Reactive state handlers, app routes, guards
🧪 Test Suites Unit + E2E tests (Playwright, MSTest, Cypress)
📡 Telemetry OTEL spans (ui.rendered, click.*, error.*)
📘 Metadata .metadata.json, output-manifest.json
📁 Folder Structure GitOps-aligned /frontend/ output tree

🧠 AI Capabilities Used

  • Semantic Kernel functions for UI layout, API binding, i18n
  • Reasoning on edition-specific rules, feature flags
  • Prompt templating and planner-based skill orchestration
  • Fallback inference for missing layout elements or bindings
  • Trace-aware file labeling and retry logic with diagnostics

🔐 Governance & Compliance Enforcements

✅ Enforced by Default:

Area Policy
🧱 Clean Architecture Ports → Adapters → API Clients separation
🔐 Security Role guards, AuthorizedView, token injection
♿ Accessibility ARIA roles, keyboard support, focus indicators
🌍 i18n Required for any static content if i18n.enabled
📱 Responsiveness Tailwind breakpoints or media-query logic
📡 Telemetry ui.rendered, click.*, form.submit, auth.*
🧪 Testing All components/pages must emit test stubs unless skipped
🧾 Traceability All files tagged with trace_id, execution_id, agent_origin

📜 Failure & Correction Governance

  • Retry on missing bindings or syntax violations
  • Emit ValidationFailed with diagnostics when blocking issue occurs
  • Request human review if ambiguity is detected
  • Never emit partially broken output to Code Committer Agent unless explicitly marked

📚 Contribution to the Platform

Function Impact
🎨 Converts UI/UX design into real UI artifacts
🔌 Connects frontend to application logic and services
🧪 Supports test, observability, and rollback flows
⚙️ Orchestrates agent execution per edition, component, and framework
🔍 Enables visual QA, visual diffing, and trace validation

🧭 Lifecycle Integration

It is fully integrated with:

  • Design Phase → Consumes UI/UX Agent output
  • Architecture Phase → Aligns with App Architect’s frontend layering
  • Engineering Phase → Coordinates with Backend + API Generator
  • Commit + QA Phases → Feeds Committer and Test Generator Agents
  • Observability Phase → Emits trace spans and metadata to telemetry pipelines

✅ Final Compliance Guarantee

Each emitted output is:

  • Traceable (trace_id, execution_id)
  • Auditable (metadata.json, validation-report.json)
  • Observable (telemetry/traceEvents.ts)
  • Testable (__tests__/)
  • Git-committable
  • Human-verifiable (via preview hooks)

🏁 Final Summary

The Frontend Developer Agent guarantees:

“Every user-facing screen generated in the ConnectSoft AI Software Factory is secure, testable, observable, edition-aware, and production-ready — without sacrificing automation, quality, or governance.”