# Frontend UI Implementation

## Purpose

Guide interface implementation that balances correctness, usability, clarity, performance, and consistency with the existing product experience.

## When to use

- Building or updating pages, components, and interactions
- Implementing client-side state or view logic
- Adjusting layout, form flows, states, and visual feedback
- Shipping UI changes tied to product behavior

## Inputs to gather

- Existing design system, component patterns, and styling conventions
- User flow, content requirements, and responsive constraints
- State, API, and error/loading behavior tied to the UI
- Current tests, stories, screenshots, or acceptance criteria if available

## How to work

- Preserve the established visual language unless the task explicitly calls for a new direction.
- Design for the full experience: loading, empty, error, success, and edge states.
- Keep interaction logic understandable and avoid overengineering small UI behavior.
- Use content, hierarchy, and spacing intentionally so the UI communicates clearly.
- Validate on the most important screen sizes or states that the repository can reasonably support.

## Output expectations

- A functional UI change that is coherent visually and behaviorally
- Clear notes on user-facing behavior and state handling
- Verification appropriate to the stack, such as tests, stories, or manual checks

## Quality checklist

- The UI is understandable without hidden assumptions.
- Important states are handled, not just the happy path.
- Visual and code patterns fit the existing app.
- Accessibility, responsiveness, and copy quality are considered.

## Handoff notes

- Mention any UX debts, unresolved visual questions, or browser/device gaps that remain.
- Pair with UX review or product copy when usability or wording is central to the task.