Frontend Flow Design
Definition
Design the user-facing path for the feature. The frontend should express the feature outcome clearly while hiding system complexity and matching existing product conventions.
Questions To Ask
- Where does the user start the feature?
- What fields, controls, and states are needed?
- What feedback appears for loading, success, validation, and errors?
- What existing screens or components should be reused?
- What should be accessible by keyboard and assistive tech?
Existing Project Comparison
- Inspect current routes, components, design system, forms, state management, and tests.
- Reuse existing patterns before inventing new UI structures.
- Flag UI that exposes internal IDs, implementation states, or backend sequencing.
Suggestive Plan
- Define entry point and user actions.
- Map UI states: empty, editing, loading, success, error, disabled.
- Define client validation and server error display.
- Map API calls and optimistic or pessimistic update behavior.
- Define accessibility and responsive requirements.
Example
Receptionist opens request details, edits preferred window in a controlled form, saves, sees inline validation or a success confirmation, and remains on the updated request.
Vocabulary
- UI state: visible condition of the interface.
- User feedback: confirmation, error, or progress signal.
- Client validation: immediate local check before API submission.
- Accessibility: usability for keyboard and assistive technology.
Expected Outcome
Produce frontend flow with screens, actions, states, validation, API connection, accessibility, and UI test needs.
1---2name: frontend-flow-design3description: Design the frontend flow for one feature, including screens, states, user actions, loading, validation, errors, accessibility, and connection to API behavior.4---56# Frontend Flow Design78## Definition910Design the user-facing path for the feature. The frontend should express the feature outcome clearly while hiding system complexity and matching existing product conventions.1112## Questions To Ask1314- Where does the user start the feature?15- What fields, controls, and states are needed?16- What feedback appears for loading, success, validation, and errors?17- What existing screens or components should be reused?18- What should be accessible by keyboard and assistive tech?1920## Existing Project Comparison2122- Inspect current routes, components, design system, forms, state management, and tests.23- Reuse existing patterns before inventing new UI structures.24- Flag UI that exposes internal IDs, implementation states, or backend sequencing.2526## Suggestive Plan27281. Define entry point and user actions.292. Map UI states: empty, editing, loading, success, error, disabled.303. Define client validation and server error display.314. Map API calls and optimistic or pessimistic update behavior.325. Define accessibility and responsive requirements.3334## Example3536Receptionist opens request details, edits preferred window in a controlled form, saves, sees inline validation or a success confirmation, and remains on the updated request.3738## Vocabulary3940- UI state: visible condition of the interface.41- User feedback: confirmation, error, or progress signal.42- Client validation: immediate local check before API submission.43- Accessibility: usability for keyboard and assistive technology.4445## Expected Outcome4647Produce frontend flow with screens, actions, states, validation, API connection, accessibility, and UI test needs.
harsh817