---
name: patterns-ui-ux
description: "Choose and implement UI and UX patterns using the Patterns decision guides. Use when comparing interface controls, planning user flows, or reviewing interaction and accessibility behavior."
---

# Patterns UI/UX

> **Work in progress.** We’re reviewing and expanding this guide. Patterns and examples may change as the site develops.

Use this reference to choose a pattern for a specific user task and implement its interaction and accessibility behavior.

When using a local copy, read the [current skill index](https://patterns.alexanderclaes.be/SKILL.md) at the start of the task to discover added or renamed guides.

## Workflow

1. Identify the user task, the information needed, and the consequence of an error. Respect the project’s existing design system and technology choices.
2. Select the relevant guides from the index below and read their current Markdown versions before making a recommendation. Read related guides only when the decision needs them.
3. Check the named use and avoid conditions, then explain the choice and its tradeoff for this task. Treat design recommendations as contextual; consult the linked primary references for implementation requirements.
4. Apply the implementation guidance and verification question to the actual interface. The example links demonstrate individual patterns; they do not establish accessibility conformance for the finished product.

## Guide index

The following 19 guides are generated from the same validated content as the website. Fetch the relevant linked guide when using this skill rather than relying on an older copied recommendation.

### Overlays

- [Modal, drawer, or separate page?](https://patterns.alexanderclaes.be/patterns/modal-or-page.md)
- [When should I use a drawer?](https://patterns.alexanderclaes.be/patterns/drawers.md)

### Forms

- [When should a form show errors?](https://patterns.alexanderclaes.be/patterns/validation-timing.md)
- [Select menu or radio buttons?](https://patterns.alexanderclaes.be/patterns/select-or-radios.md)
- [One long form or multiple steps?](https://patterns.alexanderclaes.be/patterns/multi-step-forms.md)
- [Toggle or checkbox?](https://patterns.alexanderclaes.be/patterns/toggles-or-checkboxes.md)
- [Does this flow need a review step?](https://patterns.alexanderclaes.be/patterns/review-before-submit.md)

### Navigation

- [Tabs or page navigation?](https://patterns.alexanderclaes.be/patterns/tabs-or-navigation.md)
- [When are breadcrumbs useful?](https://patterns.alexanderclaes.be/patterns/breadcrumbs.md)
- [Search, filters, or both?](https://patterns.alexanderclaes.be/patterns/search-or-filters.md)

### Feedback

- [Toast, banner, or inline message?](https://patterns.alexanderclaes.be/patterns/toast-or-banner.md)
- [Spinner, skeleton, or progress bar?](https://patterns.alexanderclaes.be/patterns/loading-states.md)
- [What should an error message say?](https://patterns.alexanderclaes.be/patterns/error-recovery.md)

### Data & content

- [What belongs in an empty state?](https://patterns.alexanderclaes.be/patterns/empty-states.md)
- [Pagination or infinite scroll?](https://patterns.alexanderclaes.be/patterns/pagination.md)
- [Table or cards?](https://patterns.alexanderclaes.be/patterns/tables-or-cards.md)
- [Accordion or visible content?](https://patterns.alexanderclaes.be/patterns/accordions.md)

### Actions

- [Confirmation or undo?](https://patterns.alexanderclaes.be/patterns/destructive-actions.md)
- [Button or link?](https://patterns.alexanderclaes.be/patterns/button-or-link.md)

## Website

[Browse the guides](https://patterns.alexanderclaes.be/) · [Skill usage](https://patterns.alexanderclaes.be/skill/)