46 lines
1.8 KiB
Markdown
46 lines
1.8 KiB
Markdown
# 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.
|