name: web-ui-ux
description: Use when designing how a website behaves and feels to use — navigation, user flows, components, forms, interaction states, and feedback. Triggers: "improve the UX", "the flow is confusing", "design this form", "users get lost", "what happens when it's loading/empty/errors", building or reviewing interactions and usability.
Web UI/UX
Design the experience, not just the screens. Every interaction should feel obvious and give feedback.
Global default
Navigation
- A visitor should always know: where am I, where can I go, how do I get back.
- Keep top-level nav short (5–7 items). Highlight the current page.
- One clear primary action per screen. Don't make people choose between five equal buttons.
Flows
- Map the path to the main goal and remove every step that isn't needed. Fewer clicks, fewer fields.
- Don't make users think or remember — carry context forward.
Forms (where most UX dies)
- Visible labels (not placeholder-only). Mark required fields.
- Validate inline, in plain language, next to the field — not one generic error at the top.
- Ask for the minimum. Every extra field costs conversions.
- Right input types and keyboards (email, tel, number).
The four states — design all of them
- Loading — skeletons or spinners, never a frozen blank screen.
- Empty — explain what goes here and how to start (empty states are onboarding).
- Error — say what happened and what to do next, kindly.
- Success — confirm the action visibly.
Feedback
- Every action gets a reaction within ~100ms (button press, toast, state change).
- Disable buttons while submitting; prevent double-submits.
- Destructive actions need confirmation.
Don't surprise people
- Use familiar patterns. Links look like links. Buttons look like buttons.
- Respect back button, scroll position, and deep links.
🇮🇱 Israel
- RTL flows: progress and "next" move right-to-left; back/forward arrows flip. Steppers and breadcrumbs mirror.
- Hebrew forms: labels and errors in Hebrew; align fields RTL.
- Local formats: Israeli phone (
05X-XXXXXXX), Israeli ID (teudat zehut, 9 digits with check digit), date format DD/MM/YYYY, currency ₪. - Mixed content: phone numbers and English are LTR inside RTL — wrap them so they don't scramble.
🔌 Power-ups (installed skills)
frontend-design — polished, usable components.mobile-first-responsive — touch targets, safe areas, viewport handling.accessibility-audit — keep interactions usable for everyone.- 🇮🇱
hebrew-rtl-best-practices (RTL flows), israeli-ui-design-system, and for form fields: israeli-phone-formatter, israeli-id-validator, israeli-address-autocomplete.
Checklist
- [ ] Clear nav: where am I / where can I go / how to get back
- [ ] One primary action per screen
- [ ] Forms: visible labels, inline plain-language errors, minimal fields
- [ ] All four states designed (loading/empty/error/success)
- [ ] Immediate feedback on every action; no double-submit
- [ ] Familiar patterns; back button + deep links work
- [ ] (Israel) RTL flows + Hebrew fields + Israeli formats