UI Pattern Prompts

Add an empty state for when [list/section] has no items.
Show a friendly illustration or icon, a short message,
and a call-to-action button to add the first item.

When [data] is empty, show an empty state that explains:
- What this section is for
- Why it's currently empty
- How to add the first item
Include a prominent "Add [item]" button.

Add a "no results" state for the search.
Show when the query returns nothing.
Include a suggestion to try different keywords.

Show a loading indicator while [data] is fetching.
Use a subtle spinner centered in the content area.

Add skeleton loading screens for [component].
Show placeholder shapes that match the content layout.
Animate with a subtle shimmer effect.

Show loading progress while [file/data] uploads.
Display a progress bar and percentage.
Include a cancel button.

When the user [action], immediately show the result
as if it succeeded. If the API fails, show an error
and revert to the previous state.

Show an error state when [action] fails.
Include:
- A clear error message (not technical jargon)
- A retry button
- Optionally, a help link

Show validation errors inline under each field.
Highlight the field with a red border.
Error text should explain how to fix the issue.

Add an offline state for when the network is unavailable.
Show a message explaining the connection issue.
Automatically retry when connection is restored.

Create a 404 page for when content doesn't exist.
Include a friendly message and link back to home.
Make it consistent with the rest of the design.

Show a toast notification when [action] succeeds.
It should appear at [top/bottom] of the screen,
display the message, and auto-dismiss after 3 seconds.

After [form] submits successfully, show a success
message in place of the form. Include a "Submit another"
link to reset the form.

When [action] completes, show an animated checkmark.
Use a simple, satisfying animation that confirms success.
Then transition to [next state] after a brief moment.

Show an auto-save indicator. When changes are being
saved, show "Saving...". When saved, show "Saved"
that fades out after 2 seconds.

Break this form into [N] steps.
Show a progress indicator at the top.
Allow going back to previous steps.
Validate each step before advancing.

Make the [field] editable inline. Click to edit,
press Enter or click away to save.
Show a subtle edit icon on hover.

Add auto-complete to the [field]. As the user types,
show matching suggestions in a dropdown.
Allow selecting with arrow keys and Enter.

When [field A] changes, update the options in [field B].
Show a brief loading state while fetching new options.
Clear [field B] if the selection is no longer valid.

Show a confirmation modal when the user tries to [action].
Include:
- A clear question: "Are you sure you want to [action]?"
- A description of what will happen
- Cancel and Confirm buttons
- Confirm button should be [red for destructive/primary for safe]

Open a modal with a form for [action].
Include validation and a submit button.
Close the modal on successful submission.
Show errors inline if validation fails.

On mobile, use a bottom sheet instead of a modal for [action].
It should slide up from the bottom and be dismissible
by swiping down.

Create a multi-step modal for [workflow].
Show progress indicators and allow navigation
between steps. Include Cancel and final Confirm buttons.

Add tab navigation between [section 1], [section 2], and [section 3].
Highlight the active tab. Content should update without page reload.

Create a sidebar with navigation links to [pages].
Highlight the current page. On mobile, collapse to
a hamburger menu.

Add breadcrumb navigation showing the path:
Home > [Section] > [Current page]
Each level should be clickable except the current page.

Add pagination to the [list]. Show:
- Page numbers with current highlighted
- Previous/Next buttons
- "X of Y" indicator
Load the new page when a page number is clicked.

Add sorting to the [list]. Users should be able to
drag items to reorder them. Save the new order.

Add filters for the [list]. Allow filtering by:
- [Filter 1]
- [Filter 2]
- [Filter 3]
Show the number of results. Update as filters change.

Load more [items] as the user scrolls near the bottom.
Show a loading indicator while fetching.
Stop when all items are loaded.

Add swipe actions to list items.
Swipe left reveals a [delete/archive] button.
Swipe right reveals [action].

Allow selecting multiple [items] from the list.
Show checkboxes. Add a "Select all" option.
Show bulk actions when items are selected.

Create a dropdown for selecting [option].
Show the current selection.
Options should be [searchable/filtered] if there are many.

Add a toggle switch for [setting].
Show the current state visually.
Save immediately when toggled.