---
name: frontend-ui-integration
description: Implement or extend a user-facing workflow in a web application, integrating with existing backend APIs. Use when the feature is primarily a UI/UX change backed by existing APIs, affects only the web frontend, and requires following design system, routing, and testing conventions.
---

# Frontend UI Integration

## Purpose

Implement or extend a user-facing workflow integrating with **existing backend APIs** and following **design system, routing, and testing conventions**.

## When to Use

- The feature is primarily a **UI/UX change** backed by existing APIs
- Backend contracts, auth model, and business rules **already exist**
- The change affects **only** the web frontend

## Inputs

- **Feature description**: short narrative of the user flow
- **Relevant APIs**: endpoints, request/response types
- **Target routes/components**: paths, component names
- **Design references**: Figma links or existing screens
- **Guardrails**: performance limits, accessibility requirements

## Out of Scope

- Creating new backend services or changing data models
- Modifying authentication/authorization flows
- Introducing new frontend frameworks

## Conventions

- **Framework**: React with TypeScript
- **Routing**: use existing router and route layout patterns
- **Styling**: use in-house design system components
- **State management**: prefer existing state libraries

## Required Behavior

1. Implement UI changes with **strong typing** for all props and API responses
2. Handle loading, empty, error, and success states
3. Ensure UI is **keyboard accessible** and screen-reader friendly
4. Respect feature flags and rollout mechanisms

## Required Artifacts

- Updated components and hooks in appropriate feature module
- **Unit tests** for core presentation logic
- **Integration tests** for the new flow
- Minimal **PR description** summarizing behavior change

## Verification

```bash
pnpm lint
pnpm test -- --runInBand --watch=false
pnpm typecheck
```

Complete when all tests, linters, and type checks pass.