1.8 KiB
1.8 KiB
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.